The Ashes
Technology, Science and other news
September 17, 2009
Walking through an HTML5 blog site
Filed under : General
Edward O’Connor has created a nice tutorial of HTML5 through the lens of his blog site use case.
The HTML5 spec introduces several new sectioning elements to HTML:
<article>,<section>,<header>&<footer>,<nav>,<aside>, and<hgroup>.There’s widespread confusion about when to use these elements. I’d like to write a little bit about these elements and how to use them appropriately, using blog template markup as a motivating example.
Go through the post and you will quickly grok all of:
HTML:
-
-
<!DOCTYPE html>
-
<html lang=“en-US-x-Hixie”>
-
<title>My Blog: Adventures in cat pictures</title>
-
</head>
-
<header> <!– site header –>
-
<hgroup> <!– squashes subtitle in doc outline –>
-
<h1>My Blog</h1>
-
<h2>Adventures in cat pictures</h2>
-
</hgroup>
-
<nav> <!– main blog navigation links –>
-
… other navigation links …
-
</ul>
-
</nav>
-
</header>
-
-
… main content goes here …
-
-
<aside> <!– sidebar –>
-
<section>
-
<h1>Search My Blog</h1>
-
<form action=“…”>
-
<input name=“q” type=“search”
-
placeholder=“To search, type and hit enter” />
-
</form>
-
</section>
-
<section>
-
<h1>Blogroll</h1>
-
</ul>
-
</section>
-
</aside>
-
<footer> <!– site footer –>
-
<p>Copyright © 2009 You. All rights reserved.</p>
-
<a href=“mailto:you@example.org”>you@example.org</a>
-
</address>
-
</footer>
-
</body>
-
</html>
-
Tags :
No Comments