Menu icon Foundation
Foundation and semantic elements

Hey everyone! Chris emailed us a question about the Foundation css. This will be helpful for many of you.

--

In Foundation projects, all I ever see is divs used for the various parts of a document.

Why don't we see the use of the semantic containers: header, nav, section, article, aside, and footer instead of one of the divs in a row or column? Is there a problem with that approach?

Would it be better for the semantic element to be on the outer row, or on the inner column? Or inside the column?

Cheers,
Chris

gridlayouthtml5divstags

Hey everyone! Chris emailed us a question about the Foundation css. This will be helpful for many of you.

--

In Foundation projects, all I ever see is divs used for the various parts of a document.

Why don't we see the use of the semantic containers: header, nav, section, article, aside, and footer instead of one of the divs in a row or column? Is there a problem with that approach?

Would it be better for the semantic element to be on the outer row, or on the inner column? Or inside the column?

Cheers,
Chris

Rafi Benkual about 5 years ago

As you can see from the example, these tags work as wrappers and you can call a class of row which works with the css. http://cdpn.io/rkqnp (click edit pen to see code)

You can use these other tags like

<section id="jobs">
<aside class="left-off-canvas-menu">
<section class="top-bar-section">

for wrappers.

<div> is tied in with the css for columns so other tags are not going to work without modification.

You can see how we did it on our site here view-source:http://foundation.zurb.com/docs/