HTML5 elements and attributes properly used.


All the HTML elements you could ever need | The spec itself [copy]

Structure

section
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.
article
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.
aside
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.
nav
S    Reserved for navigation of primary importance, like global site navigation, inline links to page sections, (Drupal Book) tables of contents.
header
S    Introductory content for an article, section, aside or the entire page (= body).
main
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.
footer
S    Secondary (meta) information of an article, section, aside or the entire page (= body).

hgroup
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.
figure

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.)

figcaption
Within figure provides a captioned text explanation to the image, diagram, etcetera.

Textual elements

a
May be wrapped around blocks now.
address
Proper address – for instance of an author (scoped by nearest ancestor article or body).
abbr

Abbreviation – with required attribute: title="…".

Goes very well with an extra surrounding dfn element to indicate the surrounding paragraph defining the abbreviated term:
<p>
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>


q
Inline quote – with optional attribute: cite="http://…".
blockquote
Quote block – with optional attribute: cite="http://…".
cite
Reference to other source Reference to a creative work. Includes the title of the work, name of the author (person, people or organization), or URL.

pre

Preformatted text.

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.

code
Source code.
dfn
Definition.
kbd

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.

samp
Output sample.
var
Variable.
ins
Inserted since last version – with optional attributes: cite="http://…" datetime="…"
del
Deleted since last version – with optional attributes: cite="http://…" datetime="…"

em
Emphasis.
strong
Importance.
i
Italic Alternate 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.
b
Bold Attention – 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
Small print – for legalese, terms and conditions, yet not for long texts.
u
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.
mark
Highlight due to relevance to visitor's current search or browsing activity.

time

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).


ol
Ordered list – optional reinstated attribute start="…" and new boolean attribute reversed.
dl
Definition list Description list – for any series of name-value pairs, including Q&As. Not allowed for dialogue anymore.
details

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.

summary
Within details provides the always visible 'label' to click on to show the rest of details. Must be the first child.

progress
Current dynamic status – with optional attributes: min="…" max="…" value="…".
meter
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.

Custom elements


Deprecated Obsolete elements and attributes

acronym
big
center
font
frame
frameset
noframes
strike
tt

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.