More semantic document structure

As developers see the need for, and experiment with different applications for existing technologies, they use what they have, and adapt it to the new circumstances. Such was the case with previous versions of HTML. Since only a handful of container tags existed, developers described very complex document structures with the same elements; while this accomplished the job, it also made it confusing and hard to maintain structures. Simply put, if all you have is a hammer, then everything you see will become a nail.

For example, it was common for developers to use the <div> tag to represent every single part of the document when describing a structure like the one represented by the following illustration:

Figure 1

The previous figure shows a very typical structure of most websites built in the last generation of web design.

Such a design could be represented by the following structure:

<div id="wrapper">
  <div id="header"></div>
  <div id="body">
    <div id="main_content">
      <p>Lorem Ipsum...</p>
    </div>
    <div id="sidebar"></div>
  </div>
  <div id="footer"></div>
</div>

While using the <div> tag for any purpose under the heavens was one way to get the job done, you can see how this can quickly get out of hand, and turn the document into something hard to understand without great inspection. Looking at this type of code becomes especially troublesome when you see a long series of closing <div> tags—how can you know what each closing tag is actually closing, since all the tags have the same name? Worse yet, how can you know if you have just the right number of closing tags?

Another major problem with designing HTML structures after the <div> paradigm was that each tag was completely meaningless from a semantic point of view. In order to make each <div> tag slightly more meaningful and self-describing, extra attributes were added, normally in the form an an ID or a class. Again, this solution only added to the problem, since larger, more complex documents required more and more of these attributes, which one had to keep track of, thus increasing the complexity of what should be a simple solution.

Thankfully, in HTML5 this problem is solved in a very elegant manner. Seeing that a lot of documents used the <div> tags for the same purpose, namely to define common sections such as the header, footer, navigation, and main content, new tags were added to represent such common sections. With these new tags, you are now able to visually scan a design structure, and very quickly understand the way information is to be laid out. Furthermore, the need to create endless ID attributes in order to distinguish each <div> tag is completely gone.

Using some of the new tags provided by HTML5, the same design concept from figure 1 can be represented as follows:

<header></header>
<section>
  <article>
    <p>Lorem Ipsum...</p>
  </article>
  <nav></nav>
</section>
<footer></footer>

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

You can see how much more descriptive the code becomes. Keep in mind also, that the benefits of this more meaningful structure extend beyond better readability for humans. With the new semantic tags in HTML5, search engines (such as Google, Microsoft's Bing, and Yahoo!) are able to better understand the content of web pages, and can therefore better index your website based on its subject matter, thus making the Web a bit better. Also, by defining your HTML files with more specific tags, screen reader software is able to better understand the contents of web pages, thus allowing users who depend on such software to better use and enjoy the Internet.

Note

Since the Internet seems to have made our world completely flat, you should never make the assumption that only your friends and neighbors will be accessing the content you publish online. Not only will your visitors come to your site from other countries and devices (such as smartphones, tablets, and even television sets), but many of the people surfing the Internet (thus, coming to your site to consume the material you make available to them) also have special needs such as visual or audio aid devices or software. For this reason, when you lay down any HTML code, keep that in mind, and consider how a screen reader program might interpret your content, and how easy it will be for that user to use and consume your work.

The following tags were added to HTML5 to accomplish this new, more streamlined semantic order. Keep in mind that each tag has several attributes, which we'll discuss in detail when we show sample usage in the next chapter. Also, because of the new data attributes, elements can be extended arbitrarily.

The following table has been taken from HTML5 W3C Candidate Recommendation 17 December 2012, which can be found at http://www.w3.org/TR/2012/CR-html5-20121217/.

Tag name	Description
<address>	This tag represents contact information related to its associated article element, or related to the entire document when associated with a body element.
<article>	This tag represents a standalone piece of content, such as an article or blog post. Article elements may be nested, in which case a child article node would be associated with its parent, yet it would still be independent of all other pieces of content in the document.
<aside>	This tag represents a piece of content related to other content elements within the document, yet could still be represented independently of its related elements. For example, sub-navigation sections, sidebars, and so on.
<audio>	This tag represents a sound or audio stream (or both) from a single source. Multiple sources may be specified, though the browser selects the most appropriate source to stream from.
<bdi>	This tag represents an isolated piece of text context that may be formatted in a bidirectional fashion.
<bdo>	This tag represents an element that controls the text direction of its children elements. The value of the dir attribute specifies whether text within the element is to flow from left to right (with a value of ltr) or from right to left (with a value of rtl).
<canvas>	This tag represents a rectangular panel that may have its contents manipulated through rendering context APIs exposed through JavaScript.
<command>	This tag represents a command that can be executed by the user, such as a keyboard shortcut.
<details>	This tag represents additional content related to some other element or content.
<figure>	This tag represents independent content that may be used as annotations for photos, illustrations, and so on.
<footer>	This tag represents a section of content with information about its elements, such as copyright information and other details about an article.
<header>	This tag represents a section heading, such as table of contents and navigational elements.
<hgroup>	This tag represents a section subheading, such as alternative titles and bylines.
<mark>	This tag represents a section of content marked up for referencing, similar in purpose as highlighting a block of text.
<meter>	This tag represents a value within a known range, such as the amount of energy left. Note that since there is a dedicated progress element, the meter element should not be used to represent a progress bar.
<nav>	This tag represents a navigation element with links to other documents, or links within the same document.
<progress>	This tag represents the amount of progress done within a known range, such as the number of steps completed in a registration process.
<rt>	This tag represents the text component of a ruby annotation.
<rp>	This tag represents the text component of a ruby annotation that is displayed by the browser when ruby annotations are not supported.
<section>	This tag represents a general-purpose section within the document, such as a slide, or the area of a document where a list of articles is displayed.
<summary>	This tag represents a summary of some content.
<time>	This tag represents a date and time in both human and machine-readable formats. The content displayed by the browser is meant for human consumption, whereas the data attributes are designed to be used by the browser and other applications.
<video>	This tag represents a video stream from a single source. Multiple sources may be specified, though the browser selects the most appropriate source to stream from.
<wbr>	This tag represents a line break opportunity, hinting to the browser where it would be appropriate to break a line when needed. Note that this element has no width, so that when a line break is not required, the element is not visible.