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

Last updated on October 31st, 2020 at 08:06 am.

9 about divs in HTML [DIV tag]

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.)

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.

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!