HTML 5 Author Reference (totally incomplete experiment)

HTML elements

The html element

Start tag: optional. End tag: optional.

DOM interface: HTMLElement

Contains: body, head. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.
xmlns
If this attribute is specified, it must have the value http://www.w3.org/1999/xhtml. This attribute has no effect at all – it is permitted only to ease migration between HTML and XHTML.

The html element is the container for the whole HTML document. A typical document looks like:

<!DOCTYPE HTML>
<html>
<head>
    <title>Title of page</title>
</head>
<body>
    ... Contents of page ...
</body>
</html>

View example

The head element

Start tag: optional. End tag: optional.

DOM interface: HTMLElement

Contains: base, link, meta, script, style, title. Contained in: html.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.
The head element is simply a container for the metadata elements that describe or affect the rest of the document.

The title element

Start tag: required. End tag: required.

DOM interface: HTMLElement

Contains: Empty. Contained in: head.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The title element represents the document's title or name. Authors should use titles that identify their documents even when they are used out of context, for example in a user's history or bookmarks, or in search results. The document's title is often different from its first header, since the first header does not have to stand alone when taken out of context.

Here are some examples of appropriate titles, contrasted with the top-level headers that might be used on those same pages.

<title>Introduction to The Mating Rituals of Bees</title>
    ...
<h1>Introduction</h1>
<p>This companion guide to the highly successful
<cite>Introduction to Medieval Bee-Keeping</cite> book is...

View example

The next page might be a part of the same site. Note how the title describes the subject matter unambiguously, while the first header assumes the reader knowns what the context is and therefore won't wonder if the dances are Salsa or Waltz:

<title>Dances used during bee mating rituals</title>
    ...
<h1>The Dances</h1>

View example

The title element must not contain any other elements. The < and > characters are interpreted literally, not as tags:

<title>The <b> &amp; <i> elements</title>
    ...

View example

The base element

Start tag: required. End tag: forbidden.

DOM interface: HTMLBaseElement

Contains: Empty. Contained in: head.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.
href
URI used for resolving any relative URIs in the document.
target
Default target for links. Must be a valid browsing context name.

The base element can control the document's base URI for the purposes of resolving relative URIs (mainly in href and src attributes). By default, URIs are relative to the current page's location, but <base href="..."> overrides this default value:

<!DOCTYPE HTML>
<html> <!-- page located on http://cache.example.net/fYfgFLe8tVAJ/ -->
<head>
    <title>Cached copy of "W3C HTML Working Group"</title>
    <base href="http://www.w3.org/html/wg/">
</head>
<body>
...
<a href="html5/">HTML 5 editor's draft</a> <!-- links to http://www.w3.org/html/wg/html5/ -->
...

View example

The base element can also set the default browsing context for the purposes of following hyperlinks: the target attribute has the same meaning as on a and area links, and is used when those elements do not specify their own target:

<!DOCTYPE HTML>
<html>
<head>
    <title>Meta-Search</title>
    <base target="inner-frame">
</head>
<body>
<p><a href="http://google.com/">Google</a> |
   <a href="http://yahoo.com/">Yahoo!</a> |
   <a href="http://live.com/">Live Search</a></p>
<iframe id="inner-frame"></iframe>
</body>
</html>

View example

There must be no more than one base element in a document.

The link element

Start tag: required. End tag: forbidden.

DOM interface: HTMLLinkElement

Contains: Empty. Contained in: head.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.
href
Required. URI of the resource that is being pointed to by the link.
rel
Required. Space-separated list of link types.
media
Media query that controls which media this link applies to. Defaults to all.
hreflang
Language code for the linked resource.
type
MIME type of the linked resource.

The link element indicates explicit relationships between the document and other resources. The location of the resource is given by the href attribute, and the types of relationship are given by the rel attribute. rel must be a space-separated list of link types.

For some link types, link defines a link to an external resource such as a style sheet:

<!DOCTYPE HTML>
<html>
<head>
    <title>Daily Ramblings</title>
    <link rel="stylesheet" href="design.css">
    <link rel="icon" href="/images/favicon.png">
    <link rel="feed" href="/feed.xml" title="News feed">
</head>
...

View example

Other link types define hyperlinks, which may be presented to users in a special navigation menu:

<!DOCTYPE HTML>
<html>
<head>
    <title>War and Peace (page 4)</title>
    <link rel="index" href="toc.html" title="Table of contents">
    <link rel="prev" href="page0003.html" title="Page 3">
    <link rel="next" href="page0005.html" title="Page 5">
</head>
...

View example

The title attribute gives the title of the link. Unlike the usual behavior when the title attribute is missing on other elements, link does not inherit the title of its parent element.

title has a special significance for style sheets: multiple links which have the same title are treated as a single style sheet set. For example:

<link rel="stylesheet" title="Standard" href="white_background.css">
<link rel="stylesheet" title="Standard" href="black_text.css">
<link rel="alternate stylesheet" title="Inverted" href="black_background.css">
<link rel="alternate stylesheet" title="Inverted" href="white_text.css">
<link rel="alternate stylesheet" title="Night" href="black_background.css">
<link rel="alternate stylesheet" title="Night" href="black_text.css">

View example

By default, a web browser will use the two style sheet links named "Standard". It should let the user choose between the "Standard", "Inverted" and "Night" alternative style sheet sets, making use of the appropriate style sheet links in each case.

For links to external resources, the media attribute uses the media query syntax to control when the link is used:

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="widescreen.css" media="screen and (min-width: 1280px)">

View example

If the media attribute is not specified, it defaults to all and the link applies to every media.

The type attribute, if specified, gives the MIME type of the linked resource. It has no effect on how the resource is treated after it has been downloaded, but it may affect whether the resource is downloaded at all. For example:

<link rel="stylesheet" href="A" type="text/css">
<link rel="stylesheet" href="B" type="text/plain">
<link rel="stylesheet" href="C">

View example

A user agent that supports only text/css style sheets will download A and C, but it may choose to skip B since it knows it cannot understand text/plain style sheets.

The hreflang attribute, if specified, must be a valid language code.

alternate links handle some attributes in a special way. The hreflang attribute indicates that the referenced document is a translation of the current document. The type attribute indicates a reformulation of the current document in a different data format. The media attribute indicates a version of the current document intended for the given media. 

<link rel="alternate" href="news.en.html" hreflang="en-GB">
<link rel="alternate" href="news.eo.html" hreflang="eo">
<link rel="alternate" href="news.grc.html" hreflang="grc">
<link rel="alternate" href="news.pdf" type="application/pdf">
<link rel="alternate" href="lowbandwidth.html" media="handheld">

View example

The meta element

Start tag: required. End tag: required.

DOM interface: HTMLMetaElement

Contains: Empty. Contained in: head.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.
name
One of a list of metadata names. Determines the meaning of the content attribute.
http-equiv
One of a list of pragma directives. Determines the meaning of the content attribute.
content
The value associated with the element's name or http-equiv.
charset
The character encoding of the document.

The meta element represents various kinds of metadata, depending on which attributes it has. Exactly one of the name, http-equiv and charset attributes must be specified.

If the charset attribute is present, it specifies the character encoding used by the document. In this case, the meta element must be the first element in the document's head, so that it comes before any text that depends on the character encoding.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Useful words for holidays</title>
</head>
<body>
<ul>
    <li>μπανάνα
    <li>банан
    <li>香蕉
</ul>
...

View example

Authors are encouraged to use the UTF-8 encoding, as it is widely supported and can handle almost every world language. The only other encoding with guaranteed support from user agents is Windows-1252 (which may be misspelled as ISO-8859-1).

If there is no <meta charset>, and the web server has not specified the page's character encoding in its Content-Type HTTP header, then user agents will try to guess the encoding that the page was written in. When a page uses any non-ASCII characters, this might guess wrong and give an incorrect rendering of the page – to avoid such problems, authors are encouraged to always use either the Content-Type header or the <meta charset> element to specify the encoding.

If the name attribute is present, then the content attribute must also be specified, and the meta element is defining a name/value pair of document metadata. The interpretation of the metadata depends on the name attribute:

generator
The content attribute must identify the software used to generate the document. This must not be used on hand-authored pages.
dns
The content attribute must be a space-separated list of host names. User agents may use this list to resolve the DNS host names into IP addresses and cache the result, saving time if they later have to subsequently load a page from that host. Items nearer the front of the list have a higher priority.
<!DOCTYPE HTML>
<html>
<head>
    <title>Zeptodyne Corporation: country-selection portal</title>
    <meta name="generator" content="Zeptodyne CMS v3.1">
    <meta name="dns" content="us.zeptodyne.com cn.zeptodyne.com eu.zeptodyne.com">
</head>
...

View example

Other possible values for name are defined on the WHATWG wiki.

If the http-equiv attribute is present, then the content attribute must also be specified. http-equiv must have one of the following values:

refresh

The content attribute must be either a non-negative integer, or a non-negative integer followed by ; url= and a URI. The number represents a time in seconds. The specified URI (or the URI of the current page, if none is given) will be loaded after that time.

<!DOCTYPE HTML>
<html>
<head>
    <title>Latest stock quotes - updated live</title>
    <meta http-equiv="refresh" content="30">
</head>
...

View example

<!DOCTYPE HTML>
<html>
<head>
    <title>Zeptodyne Corporation: redirecting to international site...</title>
    <meta http-equiv="refresh" content="0; url=http://www.zeptodyne.com">
</head>
...

View example

Redirections are typically better handled with the HTTP 301 Moved Permanently or 302 Found status codes.

default-style
???

The style element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: head.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The body element

Start tag: optional. End tag: optional.

DOM interface: ???

Contains: Empty. Contained in: html.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The section element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The nav element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The article element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The blockquote element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The aside element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The hN element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The header element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The footer element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

The address element

Start tag: required. End tag: required.

DOM interface: ???

Contains: Empty. Contained in: None.

Attributes:

class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, tabindex, title
Global attributes.

Link types

Link type Effect on... Brief description
link a and area
alternate Hyperlink Hyperlink Gives alternate representations of the current document. See note for alternate stylesheet.
archives Hyperlink Hyperlink Provides a link to a collection of records, documents, or other materials of historical interest.
author Hyperlink Hyperlink Gives a link to the current document's author. This could be a mailto: link to an email address.
bookmark not allowed Hyperlink Gives the permalink for the nearest ancestor article or section.
contact Hyperlink Hyperlink Gives a link to contact information for the current document.
external not allowed Hyperlink Indicates that the referenced document is not part of the same site as the current document.
feed Hyperlink Hyperlink Gives the address of a syndication feed. Can be combined with alternate if the feed is specifically for the current document. The first feed in a document is used as the default feed.
first Hyperlink Hyperlink Indicates that the current document is a part of a series, and that the first document in the series is the referenced document.
help Hyperlink Hyperlink Provides a link to context-sensitive help.
icon External Resource not allowed Imports an icon to represent the current document.
index Hyperlink Hyperlink Gives a link to the document that provides a table of contents or index listing the current document.
last Hyperlink Hyperlink Indicates that the current document is a part of a series, and that the last document in the series is the referenced document.
license Hyperlink Hyperlink Indicates that the current document is covered by the copyright license described by the referenced document.
next Hyperlink Hyperlink Indicates that the current document is a part of a series, and that the next document in the series is the referenced document.
nofollow not allowed Hyperlink Indicates that the current document's original author or publisher does not endorse the referenced document.
pingback External Resource not allowed Gives the address of the pingback server that handles pingbacks to the current document.
prefetch External Resource not allowed Specifies that the target resource should be pre-emptively cached.
prev Hyperlink Hyperlink Indicates that the current document is a part of a series, and that the previous document in the series is the referenced document.
search Hyperlink Hyperlink Gives a link to a resource that can be used to search through the current document and its related pages.
stylesheet External Resource not allowed Imports a stylesheet.
sidebar Hyperlink Hyperlink Specifies that the referenced document, if retrieved, is intended to be shown in the browser's sidebar (if it has one).
tag Hyperlink Hyperlink Gives a tag (identified by the given address) that applies to the current document.
up Hyperlink Hyperlink Provides a link to a document giving the context for the current document.

Element summary

Name DOM interface Start tag End tag
address ???
article ???
aside ???
base HTMLBaseElement F
blockquote ???
body ??? O O
footer ???
hN ???
head HTMLElement O O
header ???
html HTMLElement O O
link HTMLLinkElement F
meta HTMLMetaElement
nav ???
section ???
style ???
title HTMLElement

Attribute summary

Name Elements
charset meta
class All
content meta
contenteditable All
contextmenu All
dir All
draggable All
href base, link
hreflang link
http-equiv meta
id All
irrelevant All
lang All
media link
name meta
rel link
tabindex All
target base
title All
type link
xmlns html