Menu icon Foundation
Html5 tags instead of simple DIVs ??

Can i code like this , instead of using div i am using html5 tags.???

<header class="row">
  <div class="large-4 columns">
  <img alt="Bar chart" src="analytics.gif" />
  <figcaption>Figure Caption Here
  </figcaption>
  </div>

  <hgroup class="large-2 columns">
  <h1>Heading1</h1>
  <h2>Heading2</h2>
  </hgroup>

  <nav class="large-6 small-12 columns">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Meet the team</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </nav>
 </header>            

         

html5 tagsdivgrid

Can i code like this , instead of using div i am using html5 tags.???

<header class="row">
  <div class="large-4 columns">
  <img alt="Bar chart" src="analytics.gif" />
  <figcaption>Figure Caption Here
  </figcaption>
  </div>

  <hgroup class="large-2 columns">
  <h1>Heading1</h1>
  <h2>Heading2</h2>
  </hgroup>

  <nav class="large-6 small-12 columns">
  <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Meet the team</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
  </nav>
 </header>            

         

Wing-Hou Chan gave the most helpful answer for this post
Wing-Hou Chan over 5 years ago

normalize.css adds a margin to figure as they aren't present in IE 8/9 and Safari.

You will need this CSS to overwrite it:

figure{margin: 0;}

Aravind Radhakrishnan over 5 years ago

Hi nice article .Nice question too..Its better to use the semantic tags available in HTML 5 instead of the simple div tags.you can go through the following link for some more detailed info.

http://technobytz.com/useful-features-html-5.html

Wing-Hou Chan over 5 years ago

normalize.css adds a margin to figure as they aren't present in IE 8/9 and Safari.

You will need this CSS to overwrite it:

figure{margin: 0;}

Rafi Benkual over 5 years ago

You can wrap elements or parts of the grid with html5 tags. The grid works with div's. What is the reason you are doing it this way?

Alpha over 5 years ago

Well there is a problem:
When i use below mentioned code then everything is fine:

<header class="row">
  <div class="large-2 medium-2 small-4 columns hide-for-small-only">
  <img alt="Bar chart" src="analytics.gif" />
  <figcaption>Figure Caption Here
  </figcaption>
  </div>

but when i use below mentioned code then the layout breaks:

<header class="row">
  <figure class="large-2 medium-2 small-4 columns hide-for-small-only">
  <img alt="Bar chart" src="analytics.gif" />
  <figcaption>Figure Caption Here
  </figcaption>
  </figure>

Any idea about problem ?

Wing-Hou Chan over 5 years ago

Howdy!

Yes you can! There won't be a problem in rendering for the latest browsers and styles will be applied.