Categories
Programming & Web Development

HTML5 boilerplate for sectioning tags

I’ve seen a lot of confusion on the use of the new HTML5 sectioning tags <article> <section>, <nav>, <aside> and the role left for the old <div> element we used often in previous versions of HTML specifications.

After reviewing the documentation and consulting several examples of usage, a basic practical skeleton for an HTML5 document should look something like this:

<!DOCTYPE html>
<meta content="utf-8">
<title>Your page title</title>
<div id="wrap">
  <section id="main">
    <header>
      <h1>My page title</h1>
      <nav>
        <ul>
          <li>Website main section 1</li>
          <li>Website main section 2</li>
          <li>Website main section 3</li>
        </ul>
      </nav>
    </header>
    <article>
      <header>
        <h1>My content piece title</h1>
      <header>
        <p>My content text</p>
    </article>
    <article>
      <header>
        <h1>My content piece title</h1>
      </header>
      <p>My content text</p>
    </article>
  </section> <!-- closing #main -->
  <aside>
    <p>Sidebar content</p>
  </aside>
</div> <!-- closing #wrap -->
<footer>
  <p>This is my footer</p>
</footer>

Here’s a colored chart to understand better the nesting of the elements:

HTML5 basic sectioning structure

The <div> element has no meaning in semantic web development practices. It should only be used for styling purposes. In my example, I used it as a wrapper for centering the main content with CSS styling. I could have used <section>, but semantically there was no point on having a section that has nothing else but another section immediately inside it. I only need to wrap all the content so I can style the margins and colors of the background. So I use <div> when I need to wrap some content just for presentation purposes.

I always struggle when deciding to use <section> or <article> for a particular piece of content, or how to layout the document’s structure.

The W3C defines the <article> element as:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

For the <section> element, the specification says:

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

So in that sense, you can nest <article> in <section> or <article> in <article> and <section> in <article>. Yes, I know, this is still confusing.

On my example structure, I put a main <section> with the ID of “main”. This means I have a “main” section on my page, with a list of articles. Each article has its own heading and content. Some articles might have subsections, hence having <section> nested in <article>.

For the case of nesting <article> in <article>, the W3C exemplifies with a blog post and it’s comments. Since the comments are related to the article, they must be inside the tag, but each comment is an independent piece of content that can be individually distributed (direct link to a comment).

So in that way, the HTML structure will look like this:

<article>
  <header>
    <h1>My blog post title</h1>
  </header>
    <p> my post content </p>
  <section id="comments">
    <article id="comment-1">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
    <article id="comment-2">
      <header>
        <h1>Comment subject</h1>
        <p>by line</p>
      </header>
      <p>Comment text</p>
    </article>
  </section>
</article>

Here’s the colored chart:

HTML5 nested article tag

I hope this give a clearer view on how to use the sectioning elements in HTML5 and this example code serves as a quick boilerplate for your projects.

Categories
GNU/Linux Free Software & Open Source Programming & Web Development

HTML5 a jump backwards in web standards?

Web standards have always been about good markup, keeping things in order and cleaned up, etc. Using transitional or strict DTDs and validating our markup with different tools was a good practice encouraged by many. With HTML5 things seem to be going a bit backwards regarding structure and markup rules. Google’s HTML styleguide shows an example of how many tags in HTML5 are now optional. The good part of it is that markup is more simple and file sizes get reduced a lot. For high traffic websites like Google’s, every byte saved can be a big difference.

Back when HTML4 was being widely used, there was a lot of messy markup, incomplete tags and many ugly things done by different tools or even made by hand. Then XHTML came in to establish good practices. Web standards were not exactly born then, but got established, more widely known and adopted. XHTML brought a lot of structure and rules on the markup, all with the promise of being forward compatible with whatever new technologies would bring. By having a very well structured document and a correct markup, there would be no ambiguity for the markup parsers of that time and the ones the future would bring.

w3c html5 valid

But now with HTML5 everything that XHTML came to establish seems abandoned. The HTML markup has always been very permissive, as browsers tend to fix any unclosed tags and minor details like that. But the fact that the specification itself is also very permissive with lots of thing as optional, makes me think that we’re going backwards and contradicting everything that was told on the XHTML “web standards days”.

Very little effort is needed to update any XHTML document into HTML5. The move with HTML5’s new tags is to have a more semantic web and it seems to work fine. The question is: will HTML5’s loose markup be as forward compatible as XHTML markup turned out to be?