Welcome to the first article in the series, Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.

Today’s article covers Semantic HTML. The goal of this article is to show you how every HTML document should be planned. I say ‘planned’ because ‘started’ or ‘began’ suggests the top of a page, and that is not what this is about. Semantics refer to the meaning of something. In the case of html, its the meaning of the contents only. Presentation, through style or CSS file, is merely for human benefit. Therefore, when we talk about ‘planning’ an HTML document, we are talking only about a hierarchy of information.

Solid Statement: When you start a new HTML page, first outline sections of information using a hierarchy of headings (h1-h6), and content (paragraphs,lists,etc). Run your new page or existing page through the W3C validator using the “Show Outline” option. If it looks like a traditional outline, it will have more SEO potential.

Properly structured HTML looks like a traditional outline.

  1. Top Level Title I
    1. Second Level Information A
    2. Second Level Information B
      1. Third Level Information 1
      2. Third Level Information 2
        1. Fourth Level Information a
        2. Fourth Level Information b

Correct Hierarchy of Information

Here is an example of semantically sound HTML (indented to show hierarchy). This is also what a well-planned document starts out as. On a screen, this would look like a regular text document. The point of this information is for machines to read. When it’s properly formatted, machines can make more sense of it. That is the whole point.

HTML4STRICTview code 
<h1>A Title</h1>
    <h2>1. A Sub Title</h2>
        <h3>a.  About The Sub Title Part 1</h3>
            <p>regular content</p>
        <h3>b.  About The Sub Title Part 2</h3>
            <p>regular content</p> 
            <ol>
                <li>List item</li>
                <li>List item</li>
            <ol>

Why Bother?

The goal of HTML is to have a universally structured and organized collection of data. If the data you create is ill-structured, why would you expect anyone to be able to find it? If helping mankind isn’t enough, then think about your own search rankings! Be sure to check out the other articles in the series, Building Better Web Pages.

Solid Tip: Don’t forget to run your HTML through the validator (you already do that, right?). Use the “Show Outline” option to check the semantic structure of your code.

Solid Reading

For building better web pages, any of the following books are a great! “Web Design For Dummies” introduces pretty much every aspect of design, including planning and research. If you are interested more in the concepts and ideas of proper markup, go with “HTML and CSS Web Standards Solutions”. Finally, for a more conversational tone, “Designing with Web Standards” is reading geared toward the practical application, rather than the concepts themselves.