HTML5 Part 1: Semantic Markup and Page Layout

Article
08/01/2011

This 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:

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

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.

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:

Comments

Anonymous
August 01, 2011
This says you're using the top section element wrong: html5doctor.com/the-section-element
Anonymous
August 02, 2011
@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!
Anonymous
August 02, 2011
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!!! :-D
Anonymous
August 05, 2011
PC today and more news other magazine direct download here at www.techyden.blogspot.com
Anonymous
August 05, 2011
PC today and more news other magazine direct download here at www.techyden.blogspot.com
Anonymous
October 17, 2011
Hi Jennifer, thanks for a good series on HTML5; btw where can i get the style.css & html5reset.css files?
Anonymous
February 01, 2012
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.
Anonymous
February 01, 2012
Don't get me wrong, I love HTML5, but as I have seen so far, Search Engines don't
Anonymous
March 09, 2012
what is it for? layour or readers?
Anonymous
July 29, 2012
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.
Anonymous
December 11, 2012
Hi Jennifer, thanks for a good series on HTML5; btw where can i get the style.css & html5reset.css files?
Anonymous
February 16, 2013
"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: www.youtube.com/watch
Anonymous
May 29, 2013
This page breaks the back-button. That's just awful.
Anonymous
July 22, 2016
I think html5 is great for website design as it very flexible and works really well to my customer.

Share via

HTML5 Part 1: Semantic Markup and Page Layout

Comments

Additional resources