In the strict sense HTML5 is the follow-up specification to HTML4. But people often mean more when they talk about HTML5. Extended functions of CSS (CSS3) and JavaScript (ECMAscript version 5) are included. With this it is possible to write complete web applications in one file.
<?xml version="1.0" encoding="UTF-8"?>
<html xml:lang="en" lang="en">
<head>
<style><![CDATA[
h1 {color: red;
}
]]>
</style>
</head>
<body>
<h1>Beverages</h1>
<ul id="beverages">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<span id="note"></span>
<script>
<![CDATA[
// JavaScript statements
// This will be evaluated after the document has been loaded
// making it possible to easily access DOM elements.
var list = document.getElementById("beverages");
var listlength = list.children.length;
console.log(listlength);
var note = document.getElementById("note");
console.dir(note);
note.textContent = listlength + " types of beverages";
]]>
</script>
</body>
</html>
Template in XHTML5 syntax demonstrating access to a DOM element
View the template in your browser. You then may save it and start changing it. Make sure it has the file extension .xhtml for IE9 to display a local file in IE9 mode. In addition Firefox and Opera still display it properly if the file name extension is .xml.
- The document starts with a declaration that it is encoded as an XML file.
- The root element is an
<html>...</html> node. It has two daughter nodes: <head>...</head> and <body>...</body>. - The head contains the style information. It is contained in
<style type="text/css">...</style>. - The actual data to be displayed is in the body part.
- The CDATA tells the XML parser to treat the following code as data. This means that wedges (
<>) should not be considered - The JavaScript code shows the method
getElementById to access the Document Object Model (DOM). All HTML elements are accessible this way. - The JavaScript code is executed once at the end of loading the file.
- The
children method gives back all HTML elements of a particular parent HTML Element. console.log(listlength) and console.dir(note) may be used for debugging purposes. The output will be displayed on the console accessible for example in Firefox 9 through 'Tools'/'Web Developer'/'Web Console'. Other browsers have similar tools. - This example contains all the CSS and JavaScript code. Most often this code is put into two separate files. Then two links in the main HTML file connect to them.
MSDN: "Adding a <!DOCTYPE> pointing to an XHTML DTD does NOT influence whether a page is treated as HTML or XHTML. XHTML support for files on the web can only be triggered by the MIME type of the response from the web server. This is true both in IE9 and other browsers. This MIME type should be "application/xhtml+xml" (though you can technically use any supported XML mime type). Local files with ".xht" or ".xhtml" extensions will also be opened as XHTML".
Document Object Model
Structural semantic tags in HTML5
What is HTML5?
Creating an XHTML file with Notepad++
