How to properly use HTML5 section tag

This site is best viewed in a modern browser with JavaScript enabled.

Jerrell_B

I was informed that I am using HTML5's section tag incorrectly. Can anyone show me the proper way to use HTML5's section tag?

    <div id="content-container">
     <div id="form">
  	 <p>
	  <label class="block">
	     <input type="text" id="zip" class="normal" type="zip" autocomplete="on" value="zip code">
	  </label> 
	  <button type="submit"  id="submit" value="CHECK NOW" title="check now">check now</button>
  	</p>		
    </div><!-- end form -->

<img width="959" height="330" alt="clear form" src="img/widthHero.png"/>

   <div id="content">

   <section id="noInstall">
  	<a href="#"><img src="img/noInstall.png" alt="No Installation Appointments" title="No Installation Appointments" /></a>
   </section>

  <section id="affordable">
  	<a href="#"><img src="img/affordablePlan.png" alt="Affordable Plans" title="Affordable Plans" /></a>
  </section>

  <section id="tomorrow">
  	<a href="#"><img src="img/onlineTomorrow.png" alt="Get Online By Tomorrow" title="Get Online By Tomorrow" /></a>
  </section>

  <section id="take-w-you">
  	<a href="#"><img src="img/takeInternet.png" alt="Take It With You Internet" title="Take It With You Internet" /></a>
  </section>

  <section id="coverage">
  	<a href="#"><img src="img/cwCoverage.png" alt="City Wide Coverage" title="CityWide Coverage" /></a>
  </section>			
 </div><!-- end content-->

simplypixie

From what I have been reading recently, don't use section, article or aside, they are pointless and you are better just sticking to divs.

Major_Payne

When to Use the HTML5 “section” Element

When to Use the HTML5 SECTION Element

The section element

Those might help. The section tag is not to be used the same as a div tag. The SECTION Element is a Semantic Element.

simplypixie

And it doesn't even have any point as a SEMANTIC ELEMENT at the moment!!! Better off using Aria Roles

Jerrell_B

I appreciate your feedback. It's really frustrating because some articles i've read say "take advantage of the new HTML5 tags" while others say HTML5 elements such as the section tag "don't have a specific use/ purpose so it should be avoided". W3C.org is very vague (imo). I was viewing one article that stated section tags are to be used as a replacement for div tags, however after viewing this article http://html5doctor.com/avoiding-common-html5-mistakes/ it states use section tags as a wrapper is bad coding practice... What is the purpose of introducing section tag if there is no purpose for it? The role attribute was introduced in XHTML but was later omitted however with HTML5 it has been re-introduced. How should the role attribute be properly used?

simplypixie

I wish I could help you further but I am really in the same position as you - I initially read all about the HTML5 tags and started using them, only to now read (at the same sources as you have been reading really) that they don't really do anything and also shouldn't be used for styling, so in affect, completely pointless.

What really clarified this for me is that I have started reading a book - The Truth About HTML5 (For Web Designers) by Luke Stevens and it makes sense how he explains it all (I haven't finished the book yet but so far so good).

The point of the AIRA Roles is for screen readers / visually impaired, which makes a lot more sense to me.

Jerrell_B

Thank You!!!! I have been looking for a good book on HTML5. I will be creating a new post for this question but wanted your feedback, what tools are you currentlyusing for cross-browser compatibility testing? I was using ie tester but that proved to be unreliable, since I have started using IE's developer tool which is somewhat similar to Chrome's developer tool (but not as good imo).

simplypixie

I usually use Browserlab by Adobe for cross-browser testing but that is not always accurate either and then sometimes free online testers (can't remember site names off the top of my head, sorry).

Javaboey

No point in having a section just to house a link. It would make more sense to have a <section> that housed all your links. Also, each section can have a <header> and <footer>. HTML5 <header>s and <footer>s aren't how developers would normally view a header and footer. But as other posters have said, there is no SEO advantage to using new HTML5 tags. You're better off with <div>s that have classes and ids.

TotalGambit

In your code example it looked like something i had setup a few days ago. I don't use <div> anymore in my projects and have moved up to getting standard with HTML5. After your form ends you could just use a list to pump out those links and just slap the list into a <section>. You just had the section too far down the hierarchy. You could do it like this.

<section id="pwrap">

[INDENT]
<section id="formCheck">
     <form>
          Zip Code: <input type="text" name="fname"><br>
          <input type="submit" value="Check Now">
     </form>
</section>


<section id="content">
    <ul>
        <li id="noInstall"><a href="#">(image)</a></li>
        <li id="yesInstall"><a href="#">(image)</a></li>
    </ul>
</section>
[/INDENT]

</section>

When you use HTML5 tags it for the most part makes your markup easy to understand and makes more sense. I'm assuming you id'd your sections for another reason? If you need any further help with HTML5 tags just get a hold of me, I am a big supporter.

Javaboey

That's a perfectly illustrated misuse of <section>. HTML5 is in its infant stages. It's not a final product yet. Windows XP will be around for several more years, and the most they can ever upgrade to is IE8. There is no IE9 for XP, and there never will be. Using HTML5 in older legacy IE browsers will cause the site to break. You get no SEO benefits to using HTML5. It's redundant. Just learn HTML and use classes and advanced CSS selectors.

TotalGambit

It works, it's clean and it's up to date. If you want to design backwards for those who stand still then that is certainly one approach. Just be careful you don't get left behind

Javaboey

It works. It's not clean, and it's not semantically correct. By your standards, let's eliminate 50% of computer users in the world. I'm not sure what companies you've developed for, all all the ones I do have a source of commerce - usually via the web. So those who are (and I completely f'ing agree) 'standing still' are also potential customers/clients and dictate (unfortunately) how the web advances, because they are stuck on IE. Newer isn't always better, and HTML5 is a perfect example. You have yet to articulate one positive thing about HTML5 and how <section>s are better than <div>s, and I just gave you a huge reason why they're not. And what you call "designing backwards" is what pros call graceful degradation. You should get over your pride, and see what real developers are actually doing. When HTML5 finishes out and is a final product, it's nothing to learn a few new tags. Until then, you have to go with what works on new and older technology, and if you're busy wasting time on <section> tags, you're missing the point.

TotalGambit

HTML5 can be read by legacy browsers anyway with a simple shiv or modernizers. There are games based on HTML5, storage is smarter, media support is great, list goes on! HTML5 isn't the future, it is here right now. I have yet to come across a reason why I wouldn't want to use HTML5. You can even get rid of flash and even silverlight (crap anyway). Apple is pushing it and it is great for modern mobile devices. It has nothing to do with pride, for me it just makes the most sense is all.

Javaboey

No, I agree. It's great. It has many benefits, but regarding this topic, <section>s aren't one of them. They are useless. Also, modernizer doesn't fix everything.

TotalGambit

Well I use section like that all the time lol i'm not sure why it wouldn't work for others. This person wanted to know how to use <section> in a way that works and my example does work. You class them the same way you would class any <div>. And yes I know modernizer doesn't nearly take care of everything but HTML5 can be sent back in time, that is all that matters hehe.