HTML Div Tag Usage Tutorial with Examples – POFTUT

HTML Div Tag Usage Tutorial with Examples

&lt;div&gt; is a very useful and popular HTML tag. <div> is mainly used to group multiple HTML elements and provide some attributes to this group of elements. As a popular and longtime tag, it is supported by all of the web browsers like Google Chrome, Mozilla Firefox, Microsoft Edge/Explorer, Opera, Safari, etc.

Define Div <div> Element

A div element can be defined with starting and closing tags &lt;div&gt; and &lt;/div&gt;.  We can use all of the other HTML elements inside the div element. In this part, we will provide an example which contains some text,  button, etc. inside a div element.

Define Div <div> ElementDefine Div

Element

 

Div Inside Styling

As like other HTML tags div tag can be styled in different ways. We can style inside the div tag by using style attribute. In this example, we will provide the style inside the tag.

Div Inside Styling

Div Inside Styling

Div Styling with CSS Style Tag

We can also style a div with the style tag. We will just put style tag inside the head tag and then use div  {} and put style information into curly braces.

LEARN MORE  How To Redirect Web Pages To Another Page with PHP or Javascript?

Div Styling with CSS

Div Styling with CSS

Div Attributes

Div provides standard and general attributes of the HTML tags like id, class, etc. In this example, we will set the id as  mydiv. The class mylist.

Div Attributes

Div Attributes

Div Inside Div

We can put divs inside divs. We will just put div tags inside divs. In this example, we will put 2 divs inside one div.

Div Inside Div

Div Inside Div

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)