Apps

HTML5: Creating a base template

Ryan Boudreaux details some of the first element updates of HTML5. Follow along and create a base template to reflect the updated specification.

In my previous post on HTML5: The Next Generation. I briefly mentioned the major changes that the HTML5 specification has implemented already or is in the process of implementing, since the full specification is not expected to be completed until 2020 or 2022. I also touched on the browser compatibility matrix for HTML5 support.

This post will dive deeper into some of the major element updates that the specification brings to the table, specifically those that can be implemented today. If you are like me, you probably don't write your entire markup by hand; you have templates set aside that take care of the initial page creation process. Until the tools you use now catch up to the new elements in HTML 5, you will be doing some initial markup by hand while you are learning, so why not start out with making a base template?

HTML5 base template

With the HTML5 specification, you can now create a new base template, why rewrite all this code every time you need to create new HTML documents? Included here are the elements that will get you up and running with an HTML5 base template.

Doctype declaration

Are you still using those hard to remember doctypes? I thought so; even TR still uses them.

Out with the old:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In with the new HTML5:

<!DOCTYPE html>

How much simpler can that get? Even if the browser does not recognize the doctype it will revert rendering in standards mode.

Character Set Encoding declaration

And how about the old character set declaration?

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

HTML5 now has the code simplified:

<meta charset="UTF-8">

The http equivalent and content type is implied now and does not have to be declared.

Language Attribute declaration

This is necessary for browsers to render text in the correct language, especially for those that are not written in English. As an example, you might see this language declaration in use today:

<meta http-equiv="Content-Language" content="en" />

HTML5 has the language declaration slimmed down to:

<html lang="en">
Removed Internet Media Type

In previous HTML versions you might be used to seeing a script or link tag which includes the media type and written like these examples:

<script type='text/javascript' src='modernizer-2.0.min.js'></script>
<link rel="stylesheet" href="style.css" type="text/css" />

HTML5 has removed the Internet media type for scripts and links, as it is implied by the script or link source and renders similar to these two examples:

<script src="modernizer-2.0.min.js"></script> 
<link rel="stylesheet" href="style.css">

Several of the immediate benefits for web developers include a streamlined, easier to implement, and reduced overall file size for HTML coding. The base HTML5 template file (.dwt) and HTML file is available for download (zip file).

Quote me on it?

As long as attribute values don't contain blank spaces, with HTML5 quotes are not required but recommended, so if you still like to use quotes or wrap your attributes within quotation marks, it is perfectly okay to do so, but know that it is not necessary with the HTML5 specifications. Either way you go, it makes sense to be consistent with whatever way you decide.

Coming up

The next segment on HTML5 will continue to explore the new elements and demonstrate code examples for empty attributes, attributes with values, conforming semantic markup, and more.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

1 comments
Spitfire_Sysop
Spitfire_Sysop

I was just looking through this stuff on www.w3c.org yesterday. It's nice to have it all in one place. I pushed my latest site through the validator and it came out green. http://validator.w3.org/ I find the validator to be the #1 most helpful tool when building a new HTML5 site.

Editor's Picks