The New HTML5 Doctype

Download Example.

The New HTML5 Doctype (provided by Doris Yee)

So…if you are special..then you probably didn’t memorized how to write our the doctype character-by-character. Well, guess what? That’s totally fine for HTML because all you need to write at the top of your documents now is:

<br /><!DOCTYPE html><br />

And remember how you used to divide and group everything with the div tag, followed by specifying them with classes and ids? Well, HTML5 provides a new semantic vocabulary for parts of your webpage that can now be referenced as something else. Look at the diagram below followed by the example markup.

The New HTML5 Doctype (provided by Doris Yee)

If you downloaded the example, then you’ll see that where we would have used the div tag was replaced by a couple of these new elements. They are listed and explained below:

  • The header element represents the header of a section. Headers may contain more than just the section’s heading—for example it would be reasonable for the header to include sub headings, version history information or bylines.
  • The nav element represents a section of navigation links. It is suitable for either site navigation or a table of contents.
  • The aside element is for content that is tangentially related to the content around it, and is typically useful for marking up sidebars.
  • The article element represents an independent section of a document, page or site. It is suitable for content like news or blog articles, forum posts or individual comments.
  • The section element represents a generic section of a document or application, such as a chapter, for example.
  • The footer element represents the footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.

How to Write Your First HTML5 Document

There’s not too much different. If anything, things just got more simplified. You already know how to start with the doctype. Lets look at the rest:

<br /><!DOCTYPE html><br /><html lang="en"><br /><br /><%%KEEPWHITESPACE%%>  <head><br /><br /><%%KEEPWHITESPACE%%>    <meta charset="UTF-8"><br /><br /><%%KEEPWHITESPACE%%>    <title>HTML Revisited: Hello World 2010</title><br /><br /><%%KEEPWHITESPACE%%>    <link rel="stylesheet" type="text/css" href="style.css" media="screen" ><br /><br /><%%KEEPWHITESPACE%%>  </head><br /><br /><%%KEEPWHITESPACE%%>  <body><br /><br /><%%KEEPWHITESPACE%%>	<div id="container"><br /><%%KEEPWHITESPACE%%>		<header><br /><%%KEEPWHITESPACE%%>			<h1><code>h1</code> tag inside header element</h1><br /><%%KEEPWHITESPACE%%>		</header><br /><br /><%%KEEPWHITESPACE%%>		<nav><br /><%%KEEPWHITESPACE%%>			<ul><br /><%%KEEPWHITESPACE%%>				<li>List Item 001</li><br /><%%KEEPWHITESPACE%%>				<li>List Item 002</li><br /><%%KEEPWHITESPACE%%>				<li>List Item 003</li><br /><%%KEEPWHITESPACE%%>			</ul><br /><%%KEEPWHITESPACE%%>		</nav><br /><br /><%%KEEPWHITESPACE%%>		<section><br /><br /><%%KEEPWHITESPACE%%>			<h1>This is a <code>section</code></h1><br /><br /><%%KEEPWHITESPACE%%>			<aside><br /><%%KEEPWHITESPACE%%>				<h2>Learning New Structural Elements</h2><br /><%%KEEPWHITESPACE%%>			</aside><br /><br /><%%KEEPWHITESPACE%%>			<article><br /><br /><%%KEEPWHITESPACE%%>				<h2>This is a paragraph inside of an element called <code>article</code>.</h2><br /><br /><%%KEEPWHITESPACE%%>			</article><br /><br /><%%KEEPWHITESPACE%%>		</section><br /><br /><%%KEEPWHITESPACE%%>		<footer><br /><%%KEEPWHITESPACE%%>			<p>This is a paragraph inside of an element called <code>footer</code>.</p><br /><%%KEEPWHITESPACE%%>		</footer><br /><br /><%%KEEPWHITESPACE%%>	</div><!--end of container--><br /><br /><%%KEEPWHITESPACE%%>  </body><br /><br /></html><br /><br />

Notice how we’re still backwards compatible. We’re still using the div element to group everything together, but we’ve now replaced all the inner divs with the new structural elements. This may help you wrap your mind around your groupings better.

What Does the CSS Look Like

Good question. It also isn’t too complicated. The new CSS3 will be looking for these items if you’re coding in HTML5. Take a look at some example rules within a stylesheet:

<br />header {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br />}<br /><br />nav {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br />}<br /><br />section {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br />}<br /><br />article {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br /><br />}<br /><br />aside {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br />}<br /><br />footer {<br /><br /><%%KEEPWHITESPACE%%>	/* Insert Your Styles here */<br />}<br /><br />



© 2011. All Rights Reserved

TopTop