Building Your First Page in HTML5

— Tagged: HTML5 web-standards web-development

Now that we are familiar with the new semantic elements in HTML5, let's create a new page using these elements. I'll be going step-by-step as we build our demo page and show you the code as we go along.

Table of Contents

Let’s start with a “boilerplate” version of our HTML5 document. This can be our starting point for each project, hence the name “boilerplate.” For our test page, we will not be using CSS or any scripts, so those calls will be commented out in the code below.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2,keyword 3">
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- Our page's content -->
        <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

Our example page will contain the following items:

  • A page name and tagline or quote
  • Links to a “Projects” page and a “Contact” page (we will not be building these, but you could create them later if you’d like)
  • An introductory paragraph about yourself
  • A list of your favorite hobbies
  • Links to your favorite websites
  • A copyright notice and the date your page was created

If we examine the content list above, we can begin thinking how to semantically markup our page with HTML5. The page name and tagline will go nicely in a <header>. The links to our other pages can go in a <nav> tag. Our introductory text, list of hobbies, and list of links will go in a <main> tag. And finally, our copyright notice will go in a <footer>. We’ll sprinkle in our ARIA roles as we go, too.

Step 1: The Header

Let’s start at the top with our header. We need a page name (we’ll just use your name for now) and a tagline or quote. Within our <body> tag, let’s begin with a <header> and our content:

<header role="banner">
    <h1>Katie Harron</h1> <!-- fill in with your name -->
    <p>Web Developer, nerd, Texan.</p>
</header>

If we add this to our boilerplate we now have the following:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2,keyword 3">
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <h1>Katie Harron</h1> <!-- fill in with your name -->
            <p>Web Developer, nerd, Texan.</p>
        </header>

        <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

As you go along, you should validate your page and check the outline it generates. To validate your page, navigate to http://validator.w3.org/, choose the tab that says “Validate by Direct Input,” paste your code into the box, and click the button that says “Check.” So far, so good, no errors reported. Next, let’s check the outline that our page generates. Navigate to http://gsnedders.html5.org/outliner/ and paste your code into the box marked “HTML,” then click “Outline this!” The output of our current code should yield:

  1. Katie Harron (Or your name if you filled that in)

The outline recognizes that this is the most important header on our page. As we add more content and check the outline, you’ll notice how everything else is nested below this headline.

QUICK TIP: You can also use the validator at http://validator.nu/. Choose “Text Field” from the first dropdown, paste in your code, and click “Show Outline” right above the “Validate” button. This will check your website for validation errors AND show you the outline, all in one place.

What are Document Outlines?

The document outline is the structure of a document, generated by the document’s headings, form titles, table titles, and any other appropriate landmarks to map out the document. The user agent can apply this information to generate a table of contents, for example. This table of contents could then be used by assistive technology to help the user, or be parsed by a machine like a search engine to improve search results.1

Step 2: The Navigation

We’re going to add our navigation next by using the <nav> tag. We will nest this within our <header> since the W3C spec tells us that the header can contain navigational aids and the nav can contain links to other pages or parts within the page and is intended for major navigation blocks. We will use list markup for our links.

<header role="banner">
    <h1>Katie Harron</h1> <!-- fill in with your name -->
    <p>Web developer, nerd, Texan.</p>

    <nav role="navigation">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/projects.html">Projects</a></li>
            <li><a href="/contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

You might remember from my first article that nav is a sectioning element and will introduce a new section to the document outline. If we don’t specify a header (h1..h6) within our nav tag, it will appear in our outline as an “Untitled Section.” If you’d like, you can add a header within the nav tag and then hide it visually with CSS. It is acceptable to leave the headline out of the navigation and have an “Untitled Section” within our outline.2

Let’s take a look at our updated code, check it in the validator and the outliner tool:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2,keyword 3">
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <h1>Katie Harron</h1> <!-- fill in with your name -->
            <p>Web developer, nerd, Texan.</p>

            <nav role="navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/projects.html">Projects</a></li>
                    <li><a href="/contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

Everything checks out with the validator, and the outliner tool behaves as we expected- it gives us an Untitled Section for our navigation.

Our outline now looks like this:

  1. Katie Harron
    1. Untitled Section (this is our navigation)

Step 3: The Main Content

For our introductory paragraph, list of hobbies, and links to our favorite sites, we’ll use the <main> tag. Our intro will simply be a p tag, our hobbies will be in an unordered list (<ul>), and our favorite sites will be placed in an ordered list (<ol>).

<main role="main">
    <h2>Welcome to My First HTML5 Webpage</h2>
    <p>This is our introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quibusdam odio vero consequatur dolorum architecto maiores ab ipsum dolorem unde laudantium reiciendis cumque repudiandae quis eligendi atque voluptates vitae saepe?</p>

    <h2>My Hobbies</h2>
    <ul>
        <li>Cooking</li>
        <li>Kung Fu</li>
        <li>Reading</li>
        <li>Video Games</li>
    </ul>

    <h2>My Favorite Websites</h2>
    <ol>
        <li><a href="http://www.google.com">Google</a></li>
        <li><a href="http://www.apple.com">Apple</a></li>
        <li><a href="http://www.twitter.com">Twitter</a></li>
    </ol>
</main>

By using the same heading level (<h2> in this case), all of these content areas are on the same level when we look at our outline.

  1. Katie Harron
    1. Untitled Section (this is our navigation)
    2. Welcome to My First HTML5 Webpage
    3. My Hobbies
    4. Favorite Websites

We could introduce another level of nesting by using a higher level heading such as <h3> or <h4>. If you wanted to organize your favorite links by type, you could introduce an <h3> for each “type” of link. For example:

<h2>My Favorite Websites</h2>
<h3>Technology</h3>
<ol>
    <li><a href="http://www.apple.com">Apple</a></li>
    <li><a href="http://slashdot.org">Slashdot</a></li>
</ol>

<h3>Social Networks</h3>
<ol>
    <li><a href="http://www.twitter.com">Twitter</a></li>
    <li><a href="http://www.facebook.com">Facebook</a></li>
</ol>

Incorporated into our boilerplate yields the following code for our page:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2,keyword 3">
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <h1>Katie Harron</h1> <!-- fill in with your name -->
            <p>Web developer, nerd, Texan.</p>

            <nav role="navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/projects.html">Projects</a></li>
                    <li><a href="/contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <main role="main">
            <h2>Welcome to My First HTML5 Webpage</h2>
            <p>This is our introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quibusdam odio vero consequatur dolorum architecto maiores ab ipsum dolorem unde laudantium reiciendis cumque repudiandae quis eligendi atque voluptates vitae saepe?</p>

            <h2>My Hobbies</h2>
            <ul>
                <li>Cooking</li>
                <li>Kung Fu</li>
                <li>Reading</li>
                <li>Video Games</li>
            </ul>

            <h2>My Favorite Websites</h2>
            <h3>Technology</h3>
            <ol>
                <li><a href="http://www.apple.com">Apple</a></li>
                <li><a href="http://slashdot.org">Slashdot</a></li>
            </ol>

            <h3>Social Networks</h3>
            <ol>
                <li><a href="http://www.twitter.com">Twitter</a></li>
                <li><a href="http://www.facebook.com">Facebook</a></li>
            </ol>
        </main>

        <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

The validator checks out and our outline generates the following:

  1. Katie Harron
    1. Untitled Section (this is our navigation)
    2. Welcome to My First HTML5 Webpage
    3. My Hobbies
    4. Favorite Websites
      1. Technology
      2. Social Networks

Step 4: The Copyright Information and Page Creation Date

We can use the <footer> tag to house our copyright and creation date. This will be a child of the <body> tag as it applies to our entire site and not just the <main> element.

<footer role="contentinfo">
    <p>Copyright &copy; Katie Harron. Page created on <time datetime="2013-10-09">October 9, 2013</time>.</p>
</footer>

Our updated code now looks like this:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2,keyword 3">
        <!-- <link rel="stylesheet" href="css/style.css"> -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header role="banner">
            <h1>Katie Harron</h1> <!-- fill in with your name -->
            <p>Web developer, nerd, Texan.</p>

            <nav role="navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/projects.html">Projects</a></li>
                    <li><a href="/contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <main role="main">
            <h2>Welcome to My First HTML5 Webpage</h2>
            <p>This is our introductory paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, quibusdam odio vero consequatur dolorum architecto maiores ab ipsum dolorem unde laudantium reiciendis cumque repudiandae quis eligendi atque voluptates vitae saepe?</p>

            <h2>My Hobbies</h2>
            <ul>
                <li>Cooking</li>
                <li>Kung Fu</li>
                <li>Reading</li>
                <li>Video Games</li>
            </ul>

            <h2>My Favorite Websites</h2>
            <h3>Technology</h3>
            <ol>
                <li><a href="http://www.apple.com">Apple</a></li>
                <li><a href="http://slashdot.org">Slashdot</a></li>
            </ol>

            <h3>Social Networks</h3>
            <ol>
                <li><a href="http://www.twitter.com">Twitter</a></li>
                <li><a href="http://www.facebook.com">Facebook</a></li>
            </ol>
        </main>

        <footer role="contentinfo">
            <p>Copyright &copy; Katie Harron. Page created on <time datetime="2013-10-09">October 9, 2013</time>.</p>
        </footer>

        <!-- <script src="js/scripts.js"></script> -->
    </body>
</html>

The <footer> element does not introduce a new section, so we don’t need to worry about our outline displaying an “Untitled Section” for our footer.

Our outline is the same as it was at the end of Step 3:

  1. Katie Harron
    1. Untitled Section (this is our navigation)
    2. Welcome to My First HTML5 Webpage
    3. My Hobbies
    4. Favorite Websites
      1. Technology
      2. Social Networks

Congratulations, you’ve just created your first HTML5 page!

Fill in the meta data (title, description, and keywords), save your code as index.html, and open it in your favorite browser to see the output. You can view my sample page and compare it to yours for reference.

  1. http://html5doctor.com/outlines/ ↩

  2. http://html5doctor.com/the-section-element/ ↩

Want to have your say? Send me a tweet »
Share