The Semantic Web is not a separate Web but an extension of the current one, in which information is given well-defined meaning, better enabling computers and people to work in cooperation.
– Tim Berners-Lee
The HTML5 Specification introduces many new semantic elements intended to provide meaning to the structure of a document. These elements are quite important as they allow for marking up a document in meaningful ways which, prior to HTML5, would have otherwise required a rather ambiguous markup consisting primarily of divs, ids, and classes to provide some semblance of semantic structure.
Being purely markup based, it is understandable why these new semantic elements may not excite as much interest as many of the more attention grabbing HTML5 specifications, such as audio, video, Web Workers, WebSockets, Web Storage etc. However, it is important, perhaps even necessary, to emphasize the significance these new elements present in terms of helping to solidify the realization of what the web is intended to be: an open medium for disseminating homogeneous and heterogeneous information.
With this in mind, combined with an informed understanding of the context in which each new semantic element can be applied, overtime the Web will, quite naturally so, evolve in many new, exciting, and perhaps previously unthought-of ways.
Broadly, the new Structural elements introduced in HTML5 can be succinctly summarized as follows:
- The <header> Element
-
The
<header>element is rather self explanatory in that it allows for defining content which is to be denoted as a header of a page, or a header within a section of a page. Headers typically provide introductory and / or navigational content via hgroup and nav elements. What is important to keep in mind is that multiple<header>elements can be defined per page.1234567<header><h1>Some Blog</h1><h2>Some Blog Description</h2><p>Last Modified: <time>2011-10-19</time></p></header>
W3C Specification (section 4.4.8) - The <nav> Element
-
The
<nav>element represents an important section of navigational links to specific pages or specific sections within the current page. As such, not all navigational links need be defined within a<nav>.123456789101112131415<header><h1>Some Blog</h1><h2>Some Blog Description</h2><p>Last Modified: <time>2011-10-19</time></p><nav><h1>Navigation</h1><ul><li><a href="home.php">Home</a></li><li><a href="about.php">About</a></li><li><a href="contact.php">Contact</a></li></ul></nav></header>
W3C Specification (section 4.4.3) - The <article> Element
- The
<article>element provides a means by which content can be represented independently from the document or application with which it is associated. General examples could include, as one may have guessed, an article from a newspaper, a blog post, a comment on a blog post, a self contained UI widget, and so forth.12345678910<article><header><h1>Some Post</h1><p><time pubdate>2011-10-02</time></p></header><p>This is a simple example of the article element.</p><p>...</p></article>
W3C Specification (section 4.4.4) - The <section> Element
- The
<section>element defines generic sections of a document, article or entire application. The section element is intended to provide semantics for a document and is not intended to be used as a container for styling purposes, in which case a<div>element should be used.123456789101112131415161718192021222324<article><header><h1>Some Post</h1><p><time pubdate>2011-10-02</time></p></header><p>This is a simple example of the article element.</p><p>...</p><section><h1>Comments</h1><article><header><p>Posted by: Eric Feminella</p><p><time>2011-10-1</time></p></header><p>Nice post, simple enough!</p></article></section><section><h1>Categories</h1><span><a href="/html5">HTML5</a></span></section></article>
W3C Specification (section 4.4.2) - The <aside> Element
-
The
<aside>element represents content which is relevant to, or supportive of it’s surrounding content, but is not required to convey the information set forth by the surrounding content. General examples could include a pull quote, a blog roll, a sidebar etc.12345678910111213141516171819202122232425262728293031<article><header><h1>Some Post</h1><p><time pubdate>2011-10-02</time></p></header><p>This is a simple example of the article element.</p><p>...</p><section><h1>Comments</h1><article><header><p>Posted by: Eric Feminella</p><p><time>2011-10-1</time></p></header><p>Nice post, simple enough!</p></article></section><aside><h1>Categories</h1><span><a href="/html5">HTML5</a></span></aside><aside><ul id="tags"><li><a href="semantics/">semantics</a></li><li><a href="elements/">elements</a></li><li>...</li></ul></aside></article>
W3C Specification (section 4.4.5) - The <footer> Element
-
As with the
<header>element, the<footer>element is rather self explanatory in that it allows for defining content which is to be denoted as a footer of a page, or a footer within a section element for it’s nearest ancestor. A page can contain multiple<footer>elements, each unique to a particular section.12345678910111213141516171819202122232425262728293031323334<article><header><h1>Some Post</h1><p><time pubdate>2011-10-02</time></p></header><p>This is a simple example of the article element.</p><p>...</p><section><h1>Comments</h1><article><header><p>Posted by: Eric Feminella</p><p><time>2011-10-1</time></p></header><p>Nice post, simple enough!</p></article></section><aside><h1>Categories</h1><span><a href="/html5">HTML5</a></span></aside><aside><ul id="tags"><li><a href="semantics/">semantics</a></li><li><a href="elements/">elements</a></li><li>...</li></ul></aside><footer><div class="g-plusone" data-annotation="inline"></div></footer></article>
W3C Specification (section 4.4.9)
Putting it all Together
The following example is comprised of each semantic element described above to form a complete, valid HTML5 document:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!doctype html> <html> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Structure Example</title> </head> <body> <header> <h1>Some Blog</h1> <h2>Some Blog Description</h2> <p>Last Modified: <time>2011-10-02</time></p> <nav> <h1>Navigation</h1> <ul> <li><a href="home.php">Home</a></li> <li><a href="about.php">About</a></li> <li><a href="contact.php">Contact</a></li> </ul> </nav> </header> <article> <header> <h1>Some Post</h1> <p><time pubdate>2011-10-02</time></p> </header> <p>This is a simple example of the article element.</p> <p>…</p> <section> <h1>Comments</h1> <article> <header> <p>Posted by: Eric Feminella</p> <p><time>2011-10-13</time></p> </header> <p>Nice post, simple enough!</p> </article> </section> <aside> <h1>Categories</h1> <span><a href="/html5">HTML5</a></span> </aside> <aside> <ul id="tags"> <li><a href="semantics/">semantics</a></li> <li><a href="elements/">elements</a></li> <li>...</li> </ul> </aside> <footer> <div class="g-plusone" data-annotation="inline"></div> </footer> </article> </body> </html> |