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;}

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.

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 ?

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?

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