| << Chapter < Page | Chapter >> Page > |
The structure of a HTML5 document may be simpler than that of a HTML4 document. There is only one document type
<!DOCTYPE html> . Older browsers interpret this fine as they do not know about the HTML5 document type and try to do the best they can to render the page. Newer browsers know how to interpret HTML5.
The Web Hypertext Application Technology Working Group (WHATWG) does not speak of HTML5. They call it just HTML without a version number.
Minimal document
<!DOCTYPE html><html><head><title>The title of the document</title></head><body>The text ...</body></html>
Simple correct HTML5 template (http://www.w3.org/TR/html5/semantics.html#semantics)
<?xml version="1.0" encoding="UTF-8"?><html xmlns="http://www.w3.org/1999/xhtml"><head><title>The title of the document</title></head><body>The text ...</body></html>
The same as above but in XHTML syntax
In the strict sense HTML5 is the follow-up specification to HTML4. But people often mean more when they talk about HTML5. HTML5 used as umbrella term includes extended functions of CSS (CSS3) and JavaScript (ECMAscript version 5). With this it is possible to write complete web applications in one file.
Minimal template with css and javascript
<?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
.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 .
<html>...</html> node. It has two daughter nodes:
<head>...</head> and
<body>...</body> .<style type="text/css">...</style> .<> ) should not be consideredgetElementById to access the Document Object Model (DOM). All HTML elements are accessible this way.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.
<!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".
Notification Switch
Would you like to follow the 'Test collection' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|