HTML5 elements and attributes properly used.
- Metadata content (self-explanatory)
- Flow content = any element that affects the flow of the document
- Sectioning content = see "S" below. Sectioning root elements – body, blockquote, details, fieldset, figure, td – have their own outlines, i.e. start a new, implicit sub-section
- Heading content = h1-6 and hgroup
- Embedded content = img, object, embed, video, canvas, etcetera
- Phrasing content = all inline content minus embedded content
- Interactive content = with which visitors can interact: form elements, links, and some elements with certain attributes applied
All the HTML elements you could ever need | The spec itself [copy]
S Generic, so only use if a more specific element, such as article, aside, nav is not available.
Has semantic meaning, which implies its content is related. If you cannot describe the content in a few words, better use the semantically neutral div.
S Represents a single piece of content that can stand on its own (in WHATWG words: a self-contained composition that is independently distributable/reusable), for instance through syndication.
Examples: forum posts, blog entries, magazine/news articles, user-submitted comments.
- S Use for content that is tangentially related to the content around it. It can be used in relation to an article, (combination of) section(s), or entire page or document/website. In the latter case it usual takes the form of a sidebar.
- S Reserved for navigation of primary importance, like global site navigation, inline links to page sections, (Drupal Book) tables of contents.
- S Introductory content for an article, section, aside or the entire page (= body).
- S For the main content; unique to the page. Must not be a descendant of article, aside, header, footer, or nav. Must not have a header or footer.
- S Secondary (meta) information of an article, section, aside or the entire page (= body).
- Nest h1 plus h2 headings into a composite heading, leaving the h2 out of the document outline and instead making it into a tagline or subtitle.
Surrounds any image, diagram, code listing, etcetera that does not affect the flow, yet is referred to from the content and adds understanding to it.
Can also be used for non-graphical content like code, poems, quotes, audio, video, charts or even tables of statistics!
(If removing it does not affect the document's understanding, better use something like aside. If removing it does affect the document's flow, use another option.)
- Within figure provides a captioned text explanation to the image, diagram, etcetera.
- May be wrapped around blocks now.
- Proper address – for instance of an author (scoped by nearest ancestor article or body).
Abbreviation – with required attribute: title="…".
Goes very well with an extra surrounding dfn element to indicate the surrounding paragraph defining the abbreviated term:
The <dfn><abbr title="World Wide Web Consortium">W3C</abbr></dfn> is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. </p>
- Inline quote – with optional attribute: cite="http://…".
- Quote block – with optional attribute: cite="http://…".
Reference to other sourceReference to a creative work. Includes the title of the work, name of the author (person, people or organization), or URL.
Combine with code, kbd, etc. inside it to identify the exact purpose of the text.
Use inside a figure element to benefit from the extra addition of figcaption as a label for the text or code.
- Source code.
Represents text for a textual user input (for instance from a keyboard)
Use kbd inside a kbd element to mark every single key you are showing.
Use samp inside a kbd element to mark input done through a menu item or button.
Or kbd inside samp to echo back the input to the user by the system.
- Output sample.
- Inserted since last version – with optional attributes: cite="http://…" datetime="…"
- Deleted since last version – with optional attributes: cite="http://…" datetime="…"
ItalicAlternate voice or mood – or otherwise offset from the normal prose in a manner indicating a different quality of text. Examples: a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
BoldAttention – for utilitarian purposes (stylistically offset) without conveying any extra importance and with no implication of an alternate voice or mood. Examples: key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lead.
- Small print – for legalese, terms and conditions, yet not for long texts.
- Annotation – unarticulated, though explicitly rendered, and non-textual, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
- Highlight due to relevance to visitor's current search or browsing activity.
A date, or date plus time, in human readable form, with the machine readable version in the optional attribute datetime="…".
<time datetime="2014-09-12">12 September of this year</time>
<time datetime="2014-09-12T11:04:18.022Z">12 September 2014</time>
<time datetime="2014-09-12T11:04:18.022-01:00" pubdate>12 September</time>
If datetime is omitted, the human readable form must be a valid date string.
Optional boolean attribute pubdate indicates this is the publication date of the surrounding section (/entire document).
- Ordered list – optional reinstated attribute start="…" and new boolean attribute reversed.
Definition listDescription list – for any series of name-value pairs, including Q&As. Not allowed for dialogue anymore.
Expandable additional information – meant for collapsible boxes.
If summary is omitted, the user agent is supposed to provide a label, like "Details".
Optional boolean attribute open sets the default state to show the contents instead of keeping it collapsed.
- Within details provides the always visible 'label' to click on to show the rest of details. Must be the first child.
- Current dynamic status – with optional attributes: min="…" max="…" value="…".
- Current fixed status – with mandatory attribute: value="…", and optional attributes: min="…" low="…" high="…" max="…" optimum="…". If min and max are not specified, they are assumed to be 0…1 and the value must be in that range.
- Scoped style
Mark styles that only apply to the parent element (plus its children).
<style scoped> / declarations / </style>
- Unobtrusive scripts
Only for external script files.
<script defer> = The script will not load until the entire markup is parsed.
<script async> = Asynchronously load the script, i.e. load as soon as it is available, yet without causing other page elements to delay.
Obsolete elements and attributes
The HTML 4 terms ‘deprecated’ and ‘obsolete’ have been replaced in HTML5 by just ‘obsolete’. In the W3C HTML5 specifications, the terminology is different. It does not use the word “deprecated” at all (except when referring to the use of this word in HTML 4.01). It does not define “obsolete” as a technical term (as applicable to features of HTML), but it uses the word a lot. The word is implicitly defined in the 11 Obsolete features section. The draft tells, with somewhat varying tones and specialties depending on features, authors not to use obsolete features but expects browsers to keep supporting them. It also contains detailed descriptions of their syntax and semantics, partly even more detailed than in older specifications. In the HTML5 draft, most of the obsolete features are also classified as “non-conforming”, with the statement that they “must not be used by authors”. These features cover most of the features that are deprecated in HTML 4.01, and some more, including features that were not in HTML 4.01 at all.