HTML5 Part 1: Semantic Markup and Page Layout


HTML5_Logo_128This week, I will be publishing a 5-part blog post series on HTML5.  This series is an introduction to HTML5 and some of the cool new functionality it provides. 

In this first blog post, I’ll discuss semantic markup. 

Semantic elements describe their meaning or purpose clearly to the browser and to the developer. Contrast that with (for example) the <div> tag. The <div> tag defines a division or a section in an HTML document, but it doesn’t tell us anything about its content or convey any clear meaning. 

<div>

Developers commonly use IDs and/or class names with these <div> tags.  This conveys more meaning to the developers, but unfortunately, it doesn’t help browsers derive the purpose of that markup. 

<div id="header">

In HTML5, there are new semantically rich elements that can convey the purpose of the element to both developers and browsers. 

<header>

There’s a great story about a university who, when building their campus, didn’t create any walking paths.  They just planted grass and waited a year.  At that time, based on where people had worn paths in the grass, they paved actual sidewalks there.*  Therefore, the sidewalks were in the places that people actually wanted to walk. 

* Thanks to all of my tweeps who provided references to this story: James Ashley, Kevin Miller, Billy O’Neal, Eric Miller, Kris Bultman, Jay Paige, Michael Letterle, Scott Stocker, Rick Mason, Jody Meyer, Ted Neward, and Jason Karns (plus two more).

The HTML5 new semantic elements were based on that exact same logic (see the W3C design guidance to “Pave the Cowpaths”).  The W3C mined billions of existing webpages to discover the IDs and class names that developers were already using.  Once they threw out div1, div2, etc., they came up with a list of rich descriptive elements that were already being used, and made those the standards. 

Here are some examples of the new semantic elements in HTML5:

  • article
  • aside
  • figcaption
  • figure
  • footer
  • header
  • hgroup
  • mark
  • nav
  • section
  • time

Because of the semantic richness, you can probably guess what most of these elements do.  But just in case, here is an example of a page layout using some of these elements:

HTML5PageLayout

Hopefully that gives you some context.  Headers and footers are pretty self-explanatory.  The nav element can be used to create a navigation or menu bar.  You can use sections and articles to group your content.  Finally, the aside element can be used for secondary content, for example, as a sidebar of related links. 

OK, want to see some real HTML?  Here is a simple example of some code that utilizes many of these elements. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="css/html5reset.css" rel="stylesheet" />
    <link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <header>
        <hgroup>
            <h1>Header in h1</h1>
            <h2>Subheader in h2</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Menu Option 1</a></li>
            <li><a href="#">Menu Option 2</a></li>
            <li><a href="#">Menu Option 3</a></li>
        </ul>
    </nav>
    <section>
        <article>
            <header>
                <h1>Article #1</h1>
            </header>
            <section>
                This is the first article.  This is <mark>highlighted</mark>.
            </section>
        </article>
        <article>
            <header>
                <h1>Article #2</h1>
            </header>
            <section>
                This is the second article.  These articles could be blog posts, etc.  
            </section>
        </article>
    </section>
    <aside>
        <section>
            <h1>Links</h1>
            <ul>
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
            </ul>
        </section>
        <figure>
            <img width="85" height="85" 
                src="http://www.windowsdevbootcamp.com/Images/JennMar.jpg" 
                alt="Jennifer Marsman" />
            <figcaption>Jennifer Marsman</figcaption>
        </figure>
    </aside>
    <footer>Footer - Copyright 2011</footer>
</body>
</html>

I should call out a few other new elements in this code.  Did you notice the hgroup element, which grouped together my h1 and h2 headers?  The mark element allowed me to highlight or mark some important text.  Finally, the figure and figcaption elements specify a figure in my content (like an image, diagram, photo, code snippet, etc.) and let me associate a caption with that figure, respectively. 

Here is a screenshot of the webpage that this code produces (when combined with some CSS).  NOTE: I borrowed this CSS from my talented teammate Brandon Satrom’s TechEd talk, but the less-than-beautiful end effect was all me.  Smile 

image

Now, imagine this in the hands of someone actually good at CSS (which I am not).  Pretty powerful, huh?  The semantic richness and descriptiveness of the HTML makes it easy to work with. 

Finally, one last trick.  If you’re trying to follow along in Visual Studio but seeing squiggly lines everywhere that VS doesn’t understand the HTML5 elements, make sure that you have Visual Studio 2010 SP1 installed.  Then in the Visual Studio menu, go to Tools, Options.  In the left-hand navigation pane, expand Text Editor, HTML, and then click Validation.  From the Target dropdown menu, select HTML5.  This will give you HTML5 IntelliSense support.  

image

For further research on semantic elements, check out the Semantics section of the W3C HTML5 specification or the Dive into HTML5 chapter on semantics entitled “What Does It All Mean?”.

Stay tuned for tomorrow’s post, when we will discuss how to draw in HTML5 using the new <canvas> tag

 

Other blog posts in this series:

  1. HTML5 Part 1: Semantic Markup and Page Layout
  2. HTML5 Part 2: Canvas
  3. HTML5 Part 3: Audio and Video
  4. HTML5 Part 4: Using HTML5 while retaining support for older browsers
  5. HTML5 Part 5: Resources, Websites, and Tools
Comments (14)

  1. Anon says:

    This says you're using the top section element wrong:

    html5doctor.com/the-section-element

  2. jennmar says:

    @Anon – you bring up a fabulous point that I should have covered, and that is: HTML5 is not completely baked yet and there is still tremendous debate over proper usage of some of these elements (just read the comments section from that article!).  I definitely agree that standards should be followed, although it can be difficult when they are still evolving.  Thank you for the link!  

  3. Rachel Appel says:

    Awesome post, Jen!

    "For further research on semantic elements, check out the Semantics section of the W3C HTML5 specification or the Dive into HTML5 chapter on semantics entitled “What Does It All Mean?”."

    That always makes me giggle and think of the double rainbow video….WHAT DOES IT MEEEEEAN!!! 😀

  4. check disa says:

    PC today and more news other magazine direct download here at http://www.techyden.blogspot.com

  5. check disa says:

    PC today and more news other magazine direct download here at http://www.techyden.blogspot.com

  6. Prasad says:

    Hi Jennifer, thanks for a good series on HTML5; btw where can i get the style.css & html5reset.css files?

  7. Riad says:

    So, why not stick to XHTML until full support is given. SEO reasons is one point I might say. Before I went to HTML5 on my site, more of my pages were indexed higher. Not cool HTML5, Not cool.

  8. Riad says:

    Don't get me wrong, I love HTML5, but as I have seen so far, Search Engines don't

  9. charlie says:

    what is it for? layour or readers?

  10. Michael says:

    I'm sorry but at lease post where your readers can download the completed files i.e. CSS's … and not just copy and paste someone else's work.

  11. harish kumar chandna says:

    Hi Jennifer, thanks for a good series on HTML5; btw where can i get the style.css & html5reset.css files?

  12. Adam says:

    "There’s a great story about a university who, when building their campus, didn’t create any walking paths.  They just planted grass and waited a year.  At that time, based on where people had worn paths in the grass, they paved actual sidewalks there.*  Therefore, the sidewalks were in the places that people actually wanted to walk. "

    This reminds me of something I did at uni as part of some research work:

    http://www.youtube.com/watch

  13. Heel Even says:

    This page breaks the back-button. That's just awful.

  14. Anam says:

    I think html5 is great for website design as it very flexible and works really well to my customer.