Basic HTML Structure

HTTP Headers for HTML

(Setting the HTTP headers requires a bit of technical know-how. You may want to skip directly to the Basic HTML Code section.)

The HTTP headers which control how an HTML 5 document is displayed might look like this:

Content-Type: application/xhtml+xml; charset=UTF-8
Cache-Control: max-age=120
X-UA-Compatible: IE=8

It is highly recommended that the charset attribute specifying the character encoding of the HTML page be included in the Content-Type header for non-XML user agents in addition to the xml declaration.

HTML 5 MIME Type

How to set the Content-Type for the HTML 5 MIME Type

If the web documents are being created by a program, the programming language probably has an API to send the proper HTTP headers.

For example, in PHP:

<?php
session_start();
header('Content-Type: application/xhtml+xml;charset=utf-8');
header('Content-Disposition: inline; filename=".html"');
echo '<?xml version="1.0" encoding="UTF-8"?>'.$nl;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>My Title</title>
   </head>
   <body>
   </body>
</html>

(Setting the parameters for a web server requires a bit of technical know-how. You may want to skip directly to the Basic HTML Code section.)

For static web pages, it may be necessary to add the MIME Type for HTML 5 Polyglot Documents to the HTTP web server configuration to send the appropriate Content-Type header. With the Apache HTTP Server, for example, the HTML 5 MIME Type can be added to the .htaccess file(s):

DirectoryIndex index.html
ErrorDocument 404 /error.html
AddType application/xhtml+xml;charset=UTF-8 html

HTML Serialization

Serialization of HTML 5 Documents

(Whether a web page is being processed as HTML, xHTML or pure XML is a technical issue for advanced users. You may want to skip directly to the Basic HTML Code section.)

The type of serialization of an HTML document refers to the syntax used when converting the HTML from an internal document model to a stream of bytes to be stored or transmitted or vice-versa. The HTML 5 specifications allow coding HTML documents in either the HTML style, based on 1997 HTML 4 and earlier specifications, or the xHTML style, based on the 1998 XML, 1999 Namespaces and 2000-2001 XHTML 1.x W3C recommendations. The xHTML style of code has a number of advantages, including:

support for tags with non-HTML namespaces, such as rdf:RDF, and
it is required for Polyglot Documents
the same coding rules can be used for including HTML code in other XML-based document formats, such as in a <description> element in an RSS feed, where the HTML serialization would not be valid

HTML 5 has been designed to be backward compatible with both the 1997-1999 HTML 4 standards and the 2000-2001 XHTML 1.x W3C recommendations. The XML serialization of HTML 5 merges these two standards, and is already understood by virtually all web browsers including xHTML-based mobile browsers.

Processing HTML Code

HTML code can be processed in at least three different ways:

as an HTML serialization of HTML, by web browsers and other software that process HTML documents from that serialization format
as an XML serialization of HTML (xHTML), by web browsers and other software that process HTML documents from that serialization format
as pure XML, by XSLT and other software that process documents as XML

Polyglot HTML documents are HTML documents that are coded in a manner that allows them to be read in any of those three ways. This avoids having to limit the documents to only the parsers that process one serialization or the other or having to code the same content in two or three different ways.

Polyglot documents can be delivered as:

text/html to traditional web browsers,
application/xml to XML parsers or
application/xhtml+xml, the combination of both, which works with web browsers on cell phones and other handheld devices as well as on desktop computers

If you start creating polyglot documents now your web pages will be well positioned for both current and future HTML browsers and mobile devices.

Basic HTML Code

The typical code for a simple HTML version 5 page would look something like the following (this is the HTML equivalent of a "Hello World!" program):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Example Only</title>
   </head>
   <body>
      <p>This is only an example. For more information, see 
         <a href="http://www.ExampleOnly.com/" alt="ExampleOnly.com"/>
      </p>
   </body>
</html>

(By the way, there is a real "Hello World!" example of the HTML 5 <canvas> tag also.)

HTML Element Content Models

An HTML element's content model specifies what is allowed inside the element.

Content Model of <head> Tag

The expected content of the <head> tag consists of HTML elements categorized as metadata content elements. (In the HTML tag list, click on an HTML tag to see the content model of that element.)

Content Model of <body> Tag

The expected content of the <body> tag consists of HTML elements categorized as flow content elements. (In the HTML tag list, click on an HTML tag to see the content model of that element.)

Flow Content vs. Phrasing Content

When the expected content of an HTML element is flow content, you can code either flow content elements or phrasing content elements, with some occasional restrictions.

In other words, flow content elements can only be used where flow content is expected.

When the expected content of an HTML element is phrasing content, you cannot code any flow content elements, only phrasing content elements, with some occasional additional restrictions.

In other words, phrasing content elements can be used where either flow content or phrasing content is expected.

Valid HTML 5