Is there a place for div in html5

After introducing new elements like <article><section>, and <aside> in HTML5,  web developers might ask if the <div>  element still has a place or more practically when we should use plain simple divs.

Now that we have access to the more meaningful new semantic tags in HTML5 (header,articlesection, and footer, figure), would we still need to use a  div?

Well the answer is definitely YES.

According to W3C: “The div tag defines a division or a section in an HTML document and it can be used to group block-elements and format them with CSS”

<div> should be used when there is no other more semantically appropriate element. It will still be widely used for stylistic purposes and positioning, like a page wrapper that will wrap up the semantically marked-up content in the page.


Example

DO’s

<div id="pagewrapper" style="width: 500px; height: 300px margin: auto auto" />

<header>      

<h1>Demo Page</h1>
<nav>        
<ul><li>Home</li></ul>
</nav>    
</header>
<!-- ...remaining content... -->

<section>

  <article> </article>

</section>
</div>

DONT’s

<div class="section" />
<div class="article"/>

    <div class="header"/>
      <h1>

            Sample post

      </h1>

</div>

  </div>
<div/>

However in the below case when wrapping a new blog post, use the new article element instead. Its simply more semantic.


<article>
<header>
<h1>Sample Post</h1>
</header>
<!-- ... content ... -->
</article>

Posted in HTML5, Web Development Tagged with: ,