This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.
This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.
This document is an Editors Draft of “The Web Developer’s Guide to HTML 5” produced by the HTML Working Group, part of the HTML Activity. The working group is working on a new version of HTML not yet published under TR. In the meantime, you can access the HTML 5 Editor's draft. The appropriate forum for comments on this document is public-html-comments@w3.org (public archive) or public-html@w3.org (public archive).
Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.
This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
The World Wide Web’s markup language has always been HTML. HTML was primarily designed as a language for semantically describing scientific documents, although its general design and adaptations over the years has enabled it to be used to describe a number of other types of documents.
The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. HTML5 attempts to rectify this, while at the same time updating the HTML specifications to address issues raised in the past few years. However, the HTML5 specification is very much written to meet the needs of implementers rather than web designers and developers, making it more difficult to read and understand. This document is intended to meet the needs of web developers by focussing on document conformance criteria and authoring guidelines.
Authors who are familiar with previous versions of HTML are advised to familiarise themselves with the differences from HTML 4 [HTML4DIFF]
To ease readability and improve understanding, this document uses a number of conventions.
Notes are used throughout this document to provide additional information. Tips are used to provide useful hints and suggestions. Warnings are used to point out common authoring errors and highlight important issues to be aware of.
[Need to provide examples of these]
Example markup is provided for both HTML and XHTML. In some cases, the markup is the same and thus only one example is needed, but in others there may be differences syntactic differences. Where HTML and XHTML differ, separate examples are given with each one clearly labelled.
HTML Example:
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Example</title> </head> <body> <p>This is a sample HTML document. </body> </html>
XHTML Example:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>XHTML Example</title> </head> <body> <p>This is a sample XHTML document.</p> </body> </html>
Sometimes, erroneous examples are included. This is usually done to illustrate common authoring errors, bad practices and other issues to be cautious of.
Erroneous Example:
<p>This markup contains a <em><strong>mistake</em></strong></p>
Unless explicitly stated otherwise for a specific purpose, all attribute values in examples are quoted using double quotes. In HTML examples, boolean attributes are written in their minimised form and in XHTML examples, they are written in expanded form.
HTML Example:
<input type="checkbox" checked>
XHTML Example:
<input type="checkbox" checked="checked"/>
In XHTML examples, due to the XML Well-Formedness requirements, void elements are always marked up using the trailing slash.
XHTML Example:
<img src="image.png" alt="example"/>
In HTML, however, the trailing slash is optional and, unless explicitly stated otherwise, is always omitted.
HTML Example:
<img src="image.png" alt="example">
Some XHTML examples make use of XML namespaces. In such cases, the
following prefixes are assumed to be defined even if there is no
xmlns attributes in the fragment of code.
xml
http://www.w3.org/XML/1998/namespace
html
http://www.w3.org/1999/xhtml
math
http://www.w3.org/1998/Math/MathML
svg
http://www.w3.org/2000/svg
XHTML Example:
<html xml:lang="en"> ... </html>
XHTML Example:
<div> <svg:svg><svg:circle r="50" cx="50" cy="50" fill="green"/></svg:svg> </div>
There is a difference between the vocabulary of HTML—the elements and attributes that can be used, and their meanings—and the way the document is represented. When you write an HTML document in a text editor, you're using one of the
...
...
...
The Document Type Declaration...
<!DOCTYPE html>[Explain purpose of DOCTYPE, standards/quirks mode]
Elements are marked up using start tags and end tags. Start tags are delimited using angle brackets:
<div>End tags are marked up in a similar fasion, but they include a slash before the tag name.
</div>[Explain empty elements, void elements, differences between HTML and XHTML, etc.]
Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following categories are used in this guide:
Some elements have unique requirements and do not fit into any particular category.
[Create and link to some sort of index of elements that lists each element in each category.]
Metadata content includes elements for marking up document metadata; marking up or linking to resources that describe the behaviour or presentation of the document; or indicate relationships with other documents.
Metadata elements appear within the head of a document. Some common examples of
metadata elements include: title, meta,
link, script and style
Heading content includes the elements for marking up headings. Headings,
in conjunction with the sectioning elements, are used to describe the the
struction of the document. Heading content elements include the
header element and the h1 to h6
elements.
Phrasing content includes text and text-level markup. This is similar to the concept of inline level elements in HTML 4.01. Phrasing content is a sub-category of prose contnet, and thus all phrasing content is also considered to be prose content. However, most elements that are categorised as phrasing content can only contain other phrasing content.
Some common examples of phrasing content elements include
abbr, em, strong and
span
Embedded content includes elements that load external resources into the
document. Such external resources include, for example, images, videos and
Flash-based content. Some embedded content elements include
img, object, embed and
video.
Sectioning elements are elements that divide the page into, for lack of a better word, sections. This section describes HTML's sectioning elements and elements that support them.
Some elements are scoped to their nearest ancestor sectioning element.
For example, address elements apply just to their section.
For such elements x, the elements that apply to a
sectioning element e are all the x
elements whose nearest sectioning element is e.
html elementThe html element is the document’s
root element, which contains all of the document’s content. Every
document must have an html element
head elementThe head element is the container for
the document’s metadata. Metadata is information about the document
itself, such as it's title, author. Scripts and stylesheets may also be
included within the head element. Every
document must have a head element.
<head> ... </head>
html
element. It may only occur once.
<head>) optional, implied as the first
child of the html element.
</head>) optional, implied immediately
before the body element.
body elementThe body element represents the main content of the document. Every
document must have a body and there can only be one per document. The
body element must occur as the second
child of the html element, after the
head element.
<body> ... </body>
html
element. It may only occur once.
<body>) optional, implied after the
head element.
</body>) optional, implied immediately
before the end of the html element.
The following examples illustrate the typical usage of the body element in HTML and XHTML.
HTML Example
<!DOCTYPE html> <html> <head> <title>Example</title> </head> <body> <h1>Document</h1> </body> </html>
XHTML Example
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example</title> </head> <body> <h1>Document</h1> </body> </html>
In the HTML serialisation, both the start and end tags are optional. You may choose to omit both or include either the start tag only, end tag only, or both. Some authors appreciate the convenience of omitting the start and/or end tags, whereas others prefer to explicitly include them for clarity.
Note: This does not apply to XHTML.
HTML Example
<html> <head> ... </head> <h1>Document</h1> <p>Thebodystart tag is implied immediately before theh1element and the end tag before the end of thehtmlelement. </html>
It is sometimes useful to apply class or id
attributes to the body element, which may be used as a hook for page or
site specific styling or scripting.
In the following example, the body element has been given the class of
"archive", to indicate that the page is an archive page.
This may be used, for example, to style archive pages
differently from other pages on the site.
Example
<body class="archive"> ... </body>
[Maybe mention/refer to document.body here]
section elementSectioning block-level element.
style elements, followed by zero or more
block-level elements.
HTMLElement.
The section element represents a
generic document or application section. A section, in this context, is a
thematic grouping of content, typically with a header, possibly with a
footer. Examples of sections would be chapters, the various tabbed pages
in a tabbed dialog box, or the numbered sections of a thesis. A Web site's
home page could be split into sections for an introduction, news items,
contact information.
Example
<body>
<h1>Top Level Heading</h1>
<section>
<h1>Second Level Heading</h1>
<section>
<h1>Third Level Heading</h1>
</section>
</section>
</body
[Need to expand this as required.]
The editor would like to thank:
[TODO]