demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Convert an XHTML Page To HTML5

html / elements

Estimated reading time: 2 minutes, 4 seconds

As we have discussed, XHTML really has just one generic container element: <div>, used to contain a cluster of related content.  While there is a loose convention for giving appropriate id and class values to divs, such as the following:

<div id="banner">
<h1>Maniacal Musings</h1>
<h3>The Daily Ponderings of a Supervillain</h3>
<ul id="nav">
<li><a href="/blog">Read All</a></li>
<li><"a href=/latest"">Latest Post</a></li>
<li><a href=/application>Apply to be a minion</a></li>
</ul>
</div>
<div id="sidebar">
<h2>About Me</h2>
<dl>
<dt>
<img src="images/doctor-d.jpg" alt="Doctor D">
</dt>
<dd>Your host, Doctor D</dd>
</dl>
<p>Raised by Manchurian Zoroastrian émigrés, I was schooled in Switzerland and the Congo under the private tutelage of Herr Kaiser Stamper, an eccentric pedagogue, sadist, and collector of origami folded by the insane.</p>
</div>
<div id="content">
<div class="article">
<h4 class="date">January 14, 2011.</h4>
<h4>Volcano Cleansing</h4>
<p>We are falling behind schedule in construction of the new secret lair. The volcano – currently quiescent – is remaining uncooperative. Adding to my frustration, the trap door above the pit filled with rabid monkeys has developed a squeak.</p>
<h5>Related articles:</h5>
<ul class="subjects">
<li><a href="/lairs">Lairs</a></li>
<li><a href="/renos>Renovations"</a></li>
<li><a href="/int"">Interior Decoration</a></li>
</ul>
</div>
</div>
<div id="footer">
<h6>Copyright &copy; 2011 Evil Incorporated.</h6>
<p class="fineprint">I own you.</p>
</div>

…there is no universal standard of naming divs in this way. As a result, the browser (and search engines) have no understanding of what most content on a page truly is, outside of headings, paragraphs, images and links, along with the occasional <address>, <cite>, and <abbr> tag (assuming the developer knows to use them).

HTML5 changes that. It introduces an entire lexicon of specialized container tags, with (mostly) appropriate names, that tell the browser what each part of your page is for. These tags make coding a webpage and control of content both easier and more powerful. The new elements include:

If we wanted to re-write the XHTML example above into pure HTML5, the result would look something like this:

<header>
<h1>Maniacal Musings</h1>
<h3>The Daily Ponderings of a Supervillain</h3>
<nav>
<a href=/blog>Read All</a>
<a href=/latest>Latest Post</a>
<a href=/application>Apply to be a minion</a>
</nav>
</header>
<aside>
<h2>About Me</h2>
<figure>
<img src=doctor-d.jpg alt="Doctor D">
<figcaption>Your host, Doctor D</figcaption>
</figure>
<p>Raised by Manchurian Zoroastrian émigrés, I was schooled in Switzerland and the Congo under the private tutelage of Herr Kaiser Stamper, an eccentric pedagogue, sadist, and collector of origami folded by the insane.</p>
</aside>
<section>
<article>
<header>
<time datetime=2011-01-14 pubdate>January 14, 2011.</time>
<h4>Volcano Cleansing</h4>
</header>
<p>We are falling behind schedule in construction of the new secret lair. The volcano – currently quiescent – is remaining uncooperative. Adding to my frustration, the trap door above the pit filled with rabid monkeys has developed a squeak.</p>
<footer>Related articles:
<a href=/lairs>Lairs</a>
<a href=/renos>Renovations</a>
<a href=/int>Interior Decoration</a>
</footer>
</article>
</section>
<footer>
Copyright &copy; 2011 Evil Incorporated.
<small>I own you.</small>
</footer>

It's important to note that the HTML5 elements take the same CSS as the XHTML example; we just need to change the selectors used in the stylesheet. We will look at that next.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.