Menu icon Foundation
Can I use semantic HTML5 tags instead of div

I want to make my site as semantic as possible and still use Foundation. I am still confused on a couple points though.

Line 4 + 32:
Can I use the "main" and "aside" tags with a class of columns here instead of the "div" tag
or
Can you only use "non-div" tags with rows and not with columns

Line 5:
Can I wrap this section in a "header" tag to add meaning add styling but not give it a class of row or columns

As always, thank you so much for your help!

p.s. this is related to this previous post that I never totally understood
http://foundation.zurb.com/forum/posts/21786-html5-and-foundation

<div class="row"> 
<!--main body-->
<!--begin grants and programs-->
    <main role="main" class="medium-8 columns">
        <header class="mainheader">
            <h1>ARTS</h1>
            <p class="tagline">CREATIVITY EVERY DAY</p>
            <p>Arts 4Culture funds individual artists, artist groups and arts organizations that provide access to art experiences for all King County residents and visitors.</p>
        </header>
        <section class="row">
            <div class="columns">
                <h2>GRANTS</h2>
                <section class="row" data-equalizer> 
                    <div class="medium-6 columns" data-equalizer-watch> 
                        <img src="http://placehold.it/600x400&amp;text=img" alt="">
                        <h3><a href="../artprojects/index.htm">PROJECTS</a></h3>
                        <p class="deadline">Deadline: March 4</p>
                        <p>Funding support for art projects of all disciplines, created by artists and groups based in King County</p>   
                    </div>
                    <div class="medium-6 columns" data-equalizer-watch> 
                        <img src="http://placehold.it/600x400&amp;text=img" alt="">
                        <h3><a href="../equipment/index.htm">EQUIPMENT</a></h3>
                        <p class="deadline">Deadline: March 20</p>
                        <p>Investing funds for capital projects and the purchase of fixed assets by organizations</p>
                    </div>
                </section>
            </div>
        </section>
    </main>
<!--end grants and programs-->
<!--sidebar-->
    <aside role="complementary" class="medium-4 column panel">
        <h3>ASSISTANCE</h3>
        <p>Our Arts Program Staff is always happy to talk with you about any of your ideas, plans, problems or challenges for agencies, businesses or individuals.</p>
        <ul>
            <li>Our funding programs and how to succeed</li>
            <li>Connecting your projects and ideas with other opportunities</li>
        </ul>
    </aside>
<!--end sidebar-->
            

         

semantichtml5

I want to make my site as semantic as possible and still use Foundation. I am still confused on a couple points though.

Line 4 + 32:
Can I use the "main" and "aside" tags with a class of columns here instead of the "div" tag
or
Can you only use "non-div" tags with rows and not with columns

Line 5:
Can I wrap this section in a "header" tag to add meaning add styling but not give it a class of row or columns

As always, thank you so much for your help!

p.s. this is related to this previous post that I never totally understood
http://foundation.zurb.com/forum/posts/21786-html5-and-foundation

<div class="row"> 
<!--main body-->
<!--begin grants and programs-->
    <main role="main" class="medium-8 columns">
        <header class="mainheader">
            <h1>ARTS</h1>
            <p class="tagline">CREATIVITY EVERY DAY</p>
            <p>Arts 4Culture funds individual artists, artist groups and arts organizations that provide access to art experiences for all King County residents and visitors.</p>
        </header>
        <section class="row">
            <div class="columns">
                <h2>GRANTS</h2>
                <section class="row" data-equalizer> 
                    <div class="medium-6 columns" data-equalizer-watch> 
                        <img src="http://placehold.it/600x400&amp;text=img" alt="">
                        <h3><a href="../artprojects/index.htm">PROJECTS</a></h3>
                        <p class="deadline">Deadline: March 4</p>
                        <p>Funding support for art projects of all disciplines, created by artists and groups based in King County</p>   
                    </div>
                    <div class="medium-6 columns" data-equalizer-watch> 
                        <img src="http://placehold.it/600x400&amp;text=img" alt="">
                        <h3><a href="../equipment/index.htm">EQUIPMENT</a></h3>
                        <p class="deadline">Deadline: March 20</p>
                        <p>Investing funds for capital projects and the purchase of fixed assets by organizations</p>
                    </div>
                </section>
            </div>
        </section>
    </main>
<!--end grants and programs-->
<!--sidebar-->
    <aside role="complementary" class="medium-4 column panel">
        <h3>ASSISTANCE</h3>
        <p>Our Arts Program Staff is always happy to talk with you about any of your ideas, plans, problems or challenges for agencies, businesses or individuals.</p>
        <ul>
            <li>Our funding programs and how to succeed</li>
            <li>Connecting your projects and ideas with other opportunities</li>
        </ul>
    </aside>
<!--end sidebar-->
            

         
Salvatore Tolve over 4 years ago

Foundation wouldn't have any issues with the newer tags because its working off of the classes. Anything before IE9 would give you trouble, but anything pre-IE9 won't run Foundation anyway because it won't understand em/rem.

Anna Callahan over 4 years ago

So I can use any tag i want for columns or rows?

What about wrapping something in a tag that doesn't have a class or column or row just to add semantic meaning and give it styling?

Rafi Benkual over 4 years ago

Div, aside, nav, section, article, header, footer are just a tag that signifies a box. They do not by default have any styling applied to them either by the browser or Foundation. You can use any tag you want.

To be semantic though - there is a right way and a wrong way. If you're not sure, used div's.

Some basic guidelines

<section> // must contain heading

<article> // primary piece of content on a page

<header> and <footer> // can be defined for an entire page or a section of a page

<aside> // if used inside <article> then it's secondary content - if not then it's like a sidebar

<nav>

<div> and <span> // used for UI and components

So for example a structure may look like:

<header>
  <nav></nav>
<header>
<article>
  <div.row>
    <div.columns></div>
  </div>
  <div.row>
    <div.columns></div>
  </div>
  <div.row>
    <div.columns></div>
  </div>
  <div.row>
    <div.columns></div>
  </div>
</article>
<footer>
  <div.row>
    <div.columns></div>
  </div>
</footer>

Lastly, I don't style these tags so they can be re-used and keep the CSS less specific.

So I would do <footer class="footer">