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 twomore ).

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="https://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