Friday, October 5, 2007

HTML 5.0 Tag Spotlights: Structure Elements.

One exciting feature coming with HTML5 is the introduction of structure elements. Rather than having simply <div> after <div> after <div>, outlining your site's structure, you will be able to implement these tags:
  • <section> represents a generic document or application section. It can be used together with <h1>-<h6> to indicate the document structure.
  • <article> represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • <aside> represents a piece of content that is only slightly related to the rest of the page.
  • <header> represents the header of a section.
  • <footer> represents a footer for a section and can contain information about the author, copyright information, et cetera.
  • <nav> represents a section of the document intended for navigation.
source: http://www.w3.org/html/wg/html5/diff/

No longer will you have to extensively comment (or lazily avoid commenting) to keep your code clean.

<div id="navBar> ... </div> <!--end #navBar--> will be replaced by: <nav> ... </nav>

This will also make for better CSS files. While currently CSS organization goes something like * -> div -> id -> etc., with the implementation of these more specific block level elements CSS organization will be: * -> nav, as most pages don't have more than one or two navigation sections.

Finally, accessibility, (which should be a priority in every web developer's mind) will be enhanced via these tags. Rather than a screen reader having to guess what a <div> exists for, a reader can know precisely that the <nav> tag exists for navigation. The same goes for all of the above listed elements.

I'll rarely turn down an opportunity to keep my code organized... and making pages more accessible easier is always a plus. Yet another feature to look forward to in HTML5.

Labels: , , , , ,

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home