What's new in HTML5

HTML5 Logo

In this second article about HTML5 i try to show some of the things that will change if you decide to use HTML5:

  • what is the difference between HTML4.01 and HTML5
  • attribute quotes syntax
  • self closing tags
  • the type attribute
  • HTML5 outlining

I hope i will be able to answer the questions, what's the difference between HTML5 an previous versions of html? What is new in HTML5? Why do some tags not need any type attribute anymore? What is outlining?

Here is a basic HTML5 document compared to a version build with HTML 4.01 / XHTML 1.1:

HTML 4.01 / XHTML 1.1 version:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" 
		content="text/html; charset=utf-8" />
		<title>Title</title>
		<link rel="stylesheet" href="example.css"
                 type="text/css">
		<script type="text/javascript" src="example.js">
                </script>
	</head>
	<body>
		<p>Hello World</p>
	</body>
</html>

HTML5 version:


<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset=UTF-8>
        <title>Title</title>
        <link rel=stylesheet href=example.css>
        <script src=example.js></script>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>

As you can see in HTML5 we have: * new and shorter doctype * the html root tag does not need to contain a namespace specification anymore * this is not something new but be aware that inside the head document you must have a title tag or the document won't pass validation

What is interesting about HTML5 is that not all the tags are required, the page will get rendered even without them and such a document will pass validation just fine. For example take the following document, then open it in your browser and inspect the source, you will see that the browser automatically added the missing tags (html, head and body) and every browser does it the same way. Now take the code an put pass it through the w3c HTML5 validator, you will notice that it is valid code even without the tags you would expect.


<!DOCTYPE html>
<meta charset="UTF-8">
<title>Title</title>
<p>Hello World</p>

attributes quotes

Quotes are optional in HTML5.

attribute=value is valid as well as attribute="value"

self-closing tags

Before i start explaining the different new tags you should notice that void elements don't need a closing tag (area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr). Adding a space and a slash at the end is valid too: you can check it out by yourself using the W3C HTML5 validator.


<!DOCTYPE html>
<!-- check validity of document at http://validator.w3.org/check -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 self closing tags</title>
		<base href="http://www.example.com/" target="_blank" />
		<link rel="stylesheet" href="#" />
		<meta name="author" content="chris.lu" />
    </head>
    <body>
        <map name="foo"><area /></map>
		<br />
		<table><colgroup><col /></colgroup><tr><th></th></tr></table>
		<command />
		<embed />
		<hr />
		<img src="#" alt="#" />
		<input />
		<keygen />
		<object data="http://www.example.com/example.ogg" type="audio/ogg"><param name="example" value="example" /></object>
		<audio><source src="http://www.example.com/example.ogg" /></audio>
		<video src="http://www.example.com/example.webm"><track src="http://www.example.com/example.vtt" /></video>
		<wbr />
    </body>
</html>

More informations about the HTML5 syntax can be found on the W3C website.

type attribute

Another note, the type attribute for style and javascript tags is now optional in HTML5, here again you can check it out by yourself using the W3C HTML5 validator.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 optional type attribute</title>
        <script>
            document.write('<p>Hello World</p>')
        </script>
        <style>
            p { background-color: blue; }
        </style>
    </head>
    <body>
    </body>
</html>

HTML5 outlining

What the heck is this new HTML5 outlining algorithm?

Every document has an outline, the outline summary describes the structure (and therefore semantic value) of parts of your document.

Tags that influence the outline of a document are h1-h6, hgroup, section, article, aside, nav (but not header and footer). The outliner algorithm is defined by HTML5 so every browser should use the same algorithm.

To see how the outlining of your document changes when using sections, test the following code with the this online outliner on github or use this outliner from html5org.

Use the example code and paste it into the outliner textarea and look at the result. Then remove the hgroup or other section tags and see what has changed.


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>html5 outlining</title>
    </head>
    <body>
        <header>
            <hgroup>
                <h1>the content of h1</h1>
                <h2>the content of h2</h2>
            </hgroup>
            <nav>
                <ul>
                    <li>
                        <a href="#">first link</a>
                        <a href="#">second link</a>
                    </li>
                </ul>
            </nav>
        </header>
        <aside>
            <p>some aside content</p>
        </aside>
        <section>
            <p>section content</p>
            <article>
                <header>
                    <p>first article header</p>
                </header>
                <p>first article</p>
                <footer>
                    <p>first article footer</p>
                </footer>
            </article>
            <article>
                <p>second article</p>
            </article>
        </section>
        <footer>
            <p>some footer content</p>
        </footer>
    </body>
</html>

Read this very good article for more informations about outlining on smashing magazine.

Even more about outlinescan be found at html5doctor or on the Mozilla developer Network page.