HTML5 is a format for a text file, which makes pretty stuff happen to the text when viewed in an HTML5 browser. For references to the rest of my articles on this subject, see the section below.

In this article I want to talk about the whole picture of the web, as painted by the singular brush strokes of HTML5. One part is the stuff such as meta data, links, styles and scripts mainly found in the head element which characterize the document as a whole. Another part is all the linking and embedding that forms the web of content surfaced by every single document. I call these controlling, linking, and embedding elements the silk of HTML5 because they transform documents into a web of content.

These elements indirectly and directly enhance the total HTML5 document experience, from search engine support and mobile support, to navigation between documents and a sea of content, to display and behavior. Some of these elements are not visible directly, but they enhance the content in appearance, in functionality, in behavior and with connection to the web.

From the Top

Ignoring comment tags, the DOCTYPE tag and the root element always form the top level of an HTML5 document.

!DOCTYPE
I can have only one (per document). This tag begins the first line so also begins the first few characters of the whole file. To declare an HTML5 document, the file should begin with <!DOCTYPE html> exactly. Note that the character set is declared later in the file, but a BOM may precede it.
html
The root element. I must have exactly one (per document). The root element is a normal element with the tag name html. It follows optional space after the DOCTYPE. The root element has a start tag <html> (or implied start), content (innerHTML), and an end tag </html> (or implied end).

The head element and the body element are the required two children of the html root element which also may have comments and space as child nodes. The distinctions between the head element and the body element may feel a bit blurred, but here is how I distinguish the two in function.

head
I must have exactly one (per document). Collects most control elements of the document at the top. I'd like to think of the head element as containing all the internal workings of the document. Or maybe it's just the part that thinks for the rest of the document. To learn more about the head element, keep reading below.
body
The fundamental root sectioning element of the document. I must have exactly one (per document). Collects all content, semantic elements and display elements together after the head element. I'd like to think of the body element as containing all text and layout or structure, and other elements such as references to media that will be presented with the text in the browser. To explore how to section and outline in HTML5 and then enrich those sections with content, see my articles on HTML5.

Document metadata elements

live in the head

Ignoring comment tags, a small number of elements form the head of the document.

base
I can only have one (per document). The base element contains two attributes href and target to control default behavior of attributes in the document by those names.
title
I must have exactly one (per document). An escapable raw text element containing the document title, which is the default name when bookmarking the document, but also may display
  • on the task bar of the OS,
  • on the task switcher of the OS,
  • on the title bar of the browser window (non-tabbed browser),
  • on the browser tab (tabbed browser), or
  • on the address bar (mobile browser).
meta
I can have many (per document). This element provides a collection of metadata to help various user agents, applications and browsers that must process or present HTML5 documents.
style
I can have many (per document). This element embeds stylesheet (CSS) information directly in the document.
link
I can have many (per document). Most commonly, the file is the browser tab icon or an external stylesheet for the document. Other use cases may provide value behind the scenes as metadata (transparent to user). The specification elaborates on other use cases as hyperlinks which don't seem to be, well, supported anywhere. Examples follow to add a stylesheet or icon to aid in document function using the link element.
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="logo.ico">

Scripting elements

may live in the head and the body

Nearing the conclusion of this discussion of HTML5 silk, I come to scripting elements which are allowed in the head and body elements.

script
I can have many (per document). This element either points to a script file or has inline script (content) but not both. The script element is meant for client side javascript, but other script languages may be supported by the specific browser.
noscript
I can have many (per document). This element is for rendering alternate content when scripts are disabled. The content is usually hidden, but will be displayed within a sandboxed browsing context <iframe sandbox=""> … </iframe>, and within a browser that is set to disable scripts.
template
I can have many (per document). Holds HTML5 elements in template (not displayed nor executed) until cloned via scripts. Additional javascript attributes:
content
Holds the template as a document fragment.

<script>
var clone = obj.content.cloneNode(true);
// customize the clone
obj.parentNode.appendChild(clone);
</script>

Linking elements

live in the body

Linking elements are for linking resources for presentation to the user within the body element. Here are the linking elements.

a
I can have many (per document). The a anchor element provides a clickable link.
area
I can have many (per document). Defines a polygonal "click" region which is collected into a map element.
map
I can have many (per document). This element makes a map of clickable areas within an image. This element is not a link, but is essential to collect area elements before they can be employed. Assign a name=myMapName for the map element, and then set usemap=myMapName in the img or the object element to which to associate clickable areas.

Linking elements (a and area) may perform the following basic functions for purpose of user navigation, interaction or download:

Linking to another document or resource using a and area elements.
Linking to another part of the document using a and area elements.
Linking to the top of the document using a and area elements.
Linking to elsewhere, but ask first with a script using a and area elements.
REALLY AWESOME LINK TO ELSEWHERE
Linking to the same document (aka nothing), but call a script instead using a and area elements.
Executing a script using a and area elements.
Better to use the click event instead so don't put javascript: in your href! I don't! Hardly ever!

Embedded media elements

live in the body

The following elements which I call embedded media are the way to embed non-textual aspects of the web such as sound, images, and video.

audio
I can have many (per document). This element embeds an audio track in the document without requiring a plugin.
canvas
I can have many (per document). This element embeds custom graphics instantiated and controlled by scripts. Two contexts for rendering available to the developer are 2d and webgl. Additional javascript functions:
getContext( "2d" [, …] )
Request the canvas be made ready for a 2d sketch, and return the 2d canvas context (object).
getContext( "webgl" [, …] )
getContext( "experimental-webgl" [, …] )
Request the canvas be made ready for a webgl (3d) sketch, and return the webgl canvas context (gl object).
toDataURL()
toDataURL("image/png")
Convert the current canvas to a data URL, which is handy with the <img download="screenshot.png"
toBlob(callback)
toBlob(callback, "image/png")
Asynchronously convert the current canvas to a blob image file and execute callback(result) when done.
toBlob(callback, "image/jpeg" [, quality])
toDataURL("image/jpeg" [, quality])
Same functionality as just described for these functions, but when asking for a jpeg instead, I may specify the quality as a value between 0.0 and 1.0.
embed
I can have many (per document). This element embeds a plugin in the document. A void element.
iframe
I can have many (per document). This element embeds a document within the document. Its content is for alternate rendering in browsers that do not support the element.
img
I can have many (per document). This element embeds an image for display in the document. A void element.
object
I can have many (per document). This element embeds an extension or a plugin in the document.
param
I can have many (per parent). A void element without display that only has meaning within object elements. The name / value attribute pair is passed to the component extension or plugin.
source
I can have many (per parent). A void element without display that only has meaning within audio and video elements. This element gives one of possibly many available media for download. Multiple source elements should provide semantically equivalent sources in multiple file formats.
svg
This element embeds custom scalable graphics instantiated and controlled by the DOM.
track
I can have many (per parent). A void element without display that only has meaning within audio and video elements. Enhances media with navigation, audio synthesis or text overlay.
video
I can have many (per document). This element embeds a video in the document without requiring a plugin.

Silk resource attributes

Besides these attributes, elements also may have Global Attributes and Event Attributes.

classid
May apply to object elements. Not part of the HTML5 standard. Request to load a component extension or plugin matching this URI.
codebase
May apply to object elements. Not part of the HTML5 standard. A URL of a component extension or plugin to download. May specify the download version in the URL by appending #Version=1,0,0,0, so download is skipped if current version is greater.
data
May apply to object elements. The URL of component data to download.
form
May apply to object elements. Associates the object with a disjoint form element like a field element.
href
Must apply to a, area, and link elements. The URL of the linked resource to download.
May apply to the base element to indicate the default base for all relative URLs.
rel
May apply to link, a and area elements for any of the following values. An unordered space-separated list of relationships to refine semantics of the linked resource.
archives
The linked resource archives a reference to the linking document.
home
Indicates the linked resource is the home document of this document.
home alternate
Indicates the linked resource is a syndication feed for the home document of this document.
index
The linked resource is the top of a hierarchy containing the linking document.
up
The linked resource is a level above in a heirarchy containing the linking document.
up up
The linked resource is two levels above in a heirarchy containing the linking document.
up up up
The linked resource is three levels above in a hierarchy containing the linking document and so on.
first
The linked resource is first in a sequence of documents containing the linking document.
last
The linked resource is last in a sequence of documents containing the linking document.
prev
The linked resource is previous in a sequence of documents containing the linking document.
next
The linked resource is next in a sequence of documents containing the linking document.
The values of archives, first, index, home, last, and up are not in the HTML5 recommendation directly but are registered in the microformats wiki or IANA.
src
Must apply to source elements and must apply to audio and video elements without source elements as children. The URL of the linked media resource to download, embed and play.
Must apply to img, input (if type=image) and track elements. The URL of the linked image resource to download, embed and display.
Must apply to embed elements with no type attribute, and may apply to embed elements with the type attribute. The URL of the linked resource to download, embed and, execute, play or display.
Must apply to iframe elements without the srcdoc attribute or may apply as fallback to the srcdoc attribute. A URL for the linked document resource to download, embed and display.
May apply to script elements. Default is the content of the element embeds a script if unspecified. If specified, the content is ignored and provides a URL of the linked script resource to download and execute.

Silk metadata attributes

Many attributes provide more silk for weaving behind the scenes.

content
Must apply to meta elements if a name or http-equiv attribute is present to define the format and meaning of the attribute value. Specific instances as follows.
Must apply to meta elements if name=application-name. May have one such element per document. Freeform string naming the web application. Do not use if the document is not a web application.
Must apply to meta elements if name=apple-mobile-web-app-capable. May have one such element per document. Non-standard. Do not use if the document is not a Safari web application.
yes
Browser extension for Safari or iOS. Runs the Apple web app in full screen mode.
Must apply to meta elements if name=author. May have many such elements per document. Freeform string naming one of the document's authors.
Must apply to meta elements if name=description. May have one such element per document. Freeform string describing the document.
Must apply to meta elements if name=generator. May have many such elements per document. Identifies a software packages used to generate the document.
Must apply to meta elements if name=keywords. May have one such element per document. A comma-separated list of keywords for the document.
http-equiv
Must apply to meta elements without charset nor name attributes. The http-equiv / content attribute pairs specify replacement HTTP headers for the document. Some values I do not use.
set-cookie
Use actual cookies instead.
x-dns-prefetch-control
X-UA-Compatible
Nonstandard headers usage.
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
name
Must apply to param elements. The name / value attribute pair is passed to the component extension or plugin.
Must apply to meta elements without charset nor http-equiv attributes. The name / content attribute pairs specify metadata about the document. <meta name="ms-https-connections-only" content="true">
rel
May apply to link, a and area elements as noted for the following values. An unordered space-separated list of relationships to refine semantics of the linked resource.
author
May apply to a, area and link elements. The linked resource describes an author of the linking document.
bookmark
May apply to a and area elements. A permalink for this section.
  1. Permalink for the nearest/smallest containing article element, else
  2. Permalink for the nearest/smallest containing section element, else
  3. Permalink for the nearest/smallest containing logical section which goes from hx heading to the first hy heading where yx.
help
May apply to a and area elements. The linked resource provides context-sensitive help regarding the parent element such as if added to a label of a form field.
May apply to link elements. The linked resource provides a help document for the whole document.
license
May apply to a, area and link elements. The linked resource describes a license of the linking document.
pingback
May apply to link elements. The linked resource describes a pingback URL where websites may submit URLs that link to the linking document.
search
May apply to a, area and link elements. The linking document or site may be searched from the linked resource. If type=application/opensearchdescription+xml then the resource is an OpenSearch plugin.
tag
May apply to a, area and link elements. The linked resource describes a tag of the linking document.
value
Must apply to param elements. The name / value attribute pair is passed to the component extension or plugin.
custom
May apply many per embed element to pass as parameters to the plugin.

Silk display attributes

alt
Must apply to img elements in case the resource is not available. Non-visual alternative meaning of the image. Attribute values.
The image has only decorative value if blank.
freeform text
Non-visual alternative text to display while resource is unavailable.
Must apply to area elements. Required with the attribute to provide non-visual alternative meaning of the href attribute with respect to the non-visual alternative meaning of the image.
content
Must apply to meta elements if name=viewport. May have one such element per document. Non-CSS styling for the initial containing block of the document.
Must apply to meta elements if http-equiv=default-style. May have one such element per document. Sets the name of the default alternative style sheet set for the document.
controls
May apply to audio and video elements. Boolean attribute that indicates whether to show play controls for the element.
coords
May apply to area elements. A comma-separated list of integers (no spaces). The coordinates specify the number of pixels from the left and then from the top in alternating fashion whose meaning depends on the shape attribute.
height
To provide the vertical dimension. For some media elements, this has meaning regarding actual resolution (before applying the style height). Important for reliable layout.
ismap
May apply to img elements. Boolean attribute indicating whether a server-side map is in use.
label
May apply to track elements. Specify a label for the track resource to help the user choose the correct non-default track.
loop
May apply to audio and video elements. Boolean attribute that indicates whether to loop back to the beginning when play ends.
media
May apply to a, area, link and style elements. Default is all so the resource is applicable to all media. Attributes to specify the linked resource's applicable CSS3 media query.
mediagroup
May apply to audio and video elements. Defines a named collection of media elements to keep synchronized.
muted
May apply to audio and video elements. Boolean attribute that indicates whether to mute the audio.
name
May apply to object and form elements. Adds a frame name to the nested browsing context.
Must apply to map elements for reference to associate clickable areas to img and object elements by matching their usemap attributes. If an ID attribute is also specified, it must be the same value.
rel
May apply to link, a and area elements as noted for the following values. An unordered space-separated list of relationships to refine semantics of the linked resource.
alternate
May apply to a, area and link elements with the type attribute. Indicates the linked resource is a syndication feed for purpose of automatic discovery.
May apply to a, area and link elements with the hreflang attribute. Indicates the linked resource is an alternate translation of the document.
May apply to a, area and link elements with the media attribute. Indicates the linked resource is an alternate format of the document that matches the media specified.
icon
May apply to link elements. Indicates the linked resource is an icon to the linking document.
stylesheet
May apply to link elements. Indicates the linked resource is a stylesheet to the linking document.
stylesheet alternate
May apply to link elements. Indicates the linked resource is another stylesheet available and a title attribute is expected to label it.
sidebar
The linked resource may be optimally displayed in a secondary context, if one is available in the user agent.
shape
May apply to area elements. Default is rect. The basic shape of the click region. One of the following values.
circle
Defines a clickable area of circular shape. Constrains the coords attribute to contain three (3) integers. The first (1st) and second (2nd) integers define the center coordinate. The third (3rd) integer measures the radius in pixels and must be positive.
default
Defines a clickable area of the whole image. Disallows the coords attribute.
poly
Defines a clickable area of polygonal shape. Constrains the coords attribute to contain an even number of integers and not less than six (6). Each pair of integers in sequence marks the next coordinate of the polygon in sequence.
rect
Defines a clickable area of rectangular shape. Constrains the coords attribute to contain four integers. The first (1st) and second (2nd) integers mark the left top coordinate. The third (3rd) and forth (4th) integers mark the right bottom coordinate.
sizes
May apply to link (if rel="icon") elements to indicate the sizes of icons embedded in the linked resource. Attribute values.
any
Indicates a variably scalable vector format such as type="image/svg+xml"
WxH
W1xH1 W2xH2
Pixel width and pixel height listed in pairs. A space-separated list of ordered pairs with an x or X between the first and second dimensions.
srcdoc
May apply to iframe elements. Embeds the HTML content directly or else must define the src attribute.
title
Global attribute that may be applied specially to link (if rel="stylesheet") and style elements to name alternative stylesheet sets.
target
May apply to a, area and form elements. The window location preference upon navigation for opening and rendering the resource. Accepts one of the following possible values.
_blank
Opens a link in a new unnamed tab or window.
_self
Opens a link in the current frame.
_parent
Opens a link in the parent frame.
_top
Opens a link in the window ancestor to the current frame.
framename
Opens a link in a named frame. Can be any frame name except for predefined target names above. Names an existing iframe, tab, or window to provide the result upon form submission. Or else, once the form is exercised, creates a new named tab or window.
May apply to the base element to indicates the default target (frame) for all hyperlinks and form submissions.
usemap
May apply to img and object elements. Associates the image or object to a map element by matching its name attribute.
width
To provide the horizontal dimension. For some media elements, this has meaning regarding actual resolution (before applying the style width). Important for reliable layout.

Silk download attributes

Some attributes control the time and nature of download of external files.

async
May apply to script elements. Default is to wait to load all preceding scripts and DOM elements in the file before executing the script. Boolean attribute to allow the script to execute asynchronously while the DOM continues loading.
autoplay
May apply to audio and video elements. Boolean attribute that indicates whether to start play automatically upon load.
content
Must apply to meta elements if http-equiv=refresh. May have one such element per document. Sets automatic refresh rules of the document.
Integer
Non-negative integer specifies number of seconds before automatically refreshing the document.
Integer; URL = New-URL
The Integer and URL specify the number of seconds before automatically navigating to a document.
defer
May apply to script elements. Default is to wait to load all preceding scripts and DOM elements in the file before executing the script. Boolean attribute to wait until the full DOM has loaded to execute the script.
download
May apply to a and area elements. Default action is to navigate to the linked resource. If specified, the linked resource is a download. If specified with an attribute value, the default save name of the file upon download. Specifying a name is especially useful for data: and blob: URLs.
manifest
May apply to the html element. Affects early loading behavior.
preload
May apply to audio and video elements. Can be changed dynamically. Suggest to the client the best buffer strategy at the time. Attribute values.
auto
Actively download the media.
metadata
Minimally download the media using just in time throttling.
none
Do not download unless play is clicked.
rel
May apply to link, a and area elements for the following value. An unordered space-separated list of relationships to refine semantics of the linked resource.
prefetch
Indicates likelihood of being fetched by the user.

Silk domain attributes

I can annotate types, kinds and more to clarify the domain of my elements.

charset
Must apply to meta elements without http-equiv nor name attributes. One per document to specify a character set for the document. <meta charset="UTF-8">
May apply to script elements with a src attribute. I can specify a character set for an external script. Does not apply to internal scripts.
content
Must apply to meta elements if http-equiv=content-language. Use the lang attribute on the html element instead.
Must apply to meta elements if http-equiv=content-type. Use the charset attribute with the first meta element instead.
default
May apply to track elements. Specify the preferred track resources for the parent element. For each kind of track element found in a parent element, specify one as default.
  • One default among all kind=descriptions elements.
  • One default among all kind=chapters elements.
  • One default among all kind=captions and kind=subtitles elements.
hreflang
May apply to a, area, and link elements. Specify the BCP 47 language of the linked resource.
kind
May apply to track elements. Specify the intention of the track resource. Attribute values.
subtitles
Default when kind attribute is unspecified. For overcoming language barrier by translation text overlaid on video.
captions
For overcoming hearing impairment (deaf, muted) by text overlaid on video.
descriptions
For overcoming visual impairment (blind, driving mode) by audio synthesis.
chapters
For navigating the resource interactively within the user agent.
metadata
Bypasses the user agent. For tracks to be used by scripts.
lang
Global attribute that is recommended on the html element. Specify the default / primary BCP 47 language for the document.
srclang
May apply to track elements. Specify the BCP 47 language for the track resource to help the user choose the correct non-default track.
type
May apply to a, area, link, object, source and track elements. A valid MIME type for the linked resource. Important for reliable behavior on some media elements. A hint to help the browser determine usability, playability, or which plug-in to load.
May apply to style elements. Default is text/css. A valid MIME type for the linked resource.
May apply to script elements. Default is text/javascript. A valid MIME type for the linked resource.
Must apply to embed elements with no src attribute, and may apply to embed elements with the src attribute. A valid MIME type for the linked resource.

Silk trust attributes

The following attributes are important to securing, limiting abuse cases, and marking trust boundaries.

crossorigin
May apply to audio, img, link, script and video elements. Default if the crossorigin attribute is missing is to flag cross-origin requests as such which imposes some limitations. When present, this attribute allows resources from other origins to be treated as though they are from the same origin. Attribute values:
anonymous
The cross-origin request uses no credentials. Whether specifying crossorigin="" or crossorigin="anonymous", the behavior is the same.
use-credentials
The cross-origin request uses credentials.
rel
May apply to a and area elements for any of the following values. An unordered space-separated list of relationships to refine semantics of the linked resource.
external
The linked resource is external to the current site of the linking document.
nofollow
The linked resource is not endorsed by the author of the linking document.
noreferrer
Specifies that the browser not share the linking document nor any other document as the referrer when navigating to the linked resource.
sandbox
May apply to iframe elements. Adds restrictions to any content hosted in the frame. Disables all plugins (embed, object, and applet), disables modifications to document.domain javascript property, and adds other restrictions if not specifically allowed as follows. To reduce the sandbox restrictions, the attribute accepts a space-separated list from the following values:
May enable all frame restrictions with a blank value.
allow-forms
While maintaining some or all other restrictions, may allow form submission.
allow-pointer-lock
While maintaining some or all other restrictions, may allow pointer lock.
allow-popups
While maintaining some or all other restrictions, may allow the target attribute to cause navigation to a new window and may allow the window.open() javascript function to be called so new windows may be created from the frame.
allow-same-origin
While maintaining some or all other restrictions, may allow access between other content from the same domain origin such as communicating to the server, reading and writing to its own document.cookie and localStorage (javascript database objects), and the document of the parent frame reading and writing to the sandboxed document (from the same origin).
allow-scripts
May allow script execution and other automatic features (playing a video or focusing a form control).
allow-top-navigation
May allow the sandboxed document to navigate from or close its top-level browsing context (the document that contains the frame).
typemustmatch
May apply to object elements. Boolean attribute that demands that the resource matches the MIME type between the data and type attributes, if both attributes are present.

YES!! I have survived this exposé on how to spin HTML5 silk, and I hope you have too.