9 The <div> div Tag in HTML [DIV tag]

9 The Tag in HTML [DIV tag]

Last updated on July 1st, 2018 at 01:06 pm

9 The <div> Tag in HTML [DIV tag]

The <div> element is used as a container. By default the <div> does not contain anything. It is you who will put other elements inside of it.

 

A div can be used as a block to group different elements in a web page. For example you may have a div that has all content in a page. And another one that has all the sidebar elements in the web page.

Once you create the div, you will use CSS to style it. To style it, you may give the div classes and/or an identity (Using the id and class attributes.)

 

Join the FULL HTML and CSS Tutorial Here >>

 

The div tag must have both an opening ( <div> ) and a closing ( </div> )  tag. Like with most HTML tag pairs, your web page will still be rendered if you omit the closing div tag. However, you will definitely experience errors in terms of display.

 

Since HTML5, MDN says : The <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

 

Example Div Code

With NO classes or id attributes

<div>

<p> Inside a DIV you may put any kind of HTML elements here.</p>

</div>

 

With classes or id attributes

<div id=”myidentity” class=”myclass”>

<p> Inside a DIV you may put any kind of HTML elements here.</p>

</div>

 

In HTML5 there are better ways of semantically grouping your HTML elements. Divs used to be the easier way of doing this. Nowadays some of the available options include the following:

  • <main> : For good practice always use this only once on a page. And it should be a direct child of the <body> element, not any level deeper.
  • <article> : This can be used for related content things like news articles, blog posts, or user comments etc.
  • <section> : Can be used just like <article>, but the things it contains do not have to be related.
  • <nav> : This is used to group links together. Good for all navigations on a page.
  • <aside> : For grouping content that is related to the element around it, but can be considered separate.
  • <header> : Can be used to represent header content of a web page. For instance the logo, Navigation, site name , Site Tagline and so on.
  • <footer> : Can be used to represent footer elements such as legal, important pages , sitemap and any other elements desirable in the footer area.

 

You may join this Full HTML and CSS Tutorial using the button below.

Join the FULL HTML and CSS Tutorial Here >>

 

 

Comment Here