This is a quick reference of elements that are new or have been redefined in HTML5. For each element there is a short description, a link to the specification, and a code example. “Our prognosis” links to the HTML5 Doctor article on the element. There are more articles in the Article Archive.
HTML5 Element Index
A
- a
-
If the a element has an
href
attribute, then it represents ahyperlink
(ahypertext
anchor). If the a element has nohref
attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant.The
target
,rel
,media
,hreflang
, andtype
attributes must be omitted if thehref
attribute is not present.
- abbrour prognosis
-
Represents an abbreviation or acronym. The optional
title
attribute may be used to provide an expansion of the abbreviation. If specified, the title attribute must contain an expansion of the abbreviation and nothing else.
- addressour prognosis
-
Represents the contact information for its enclosing section. If it is a child of the
body
element, then it applies to the document as a whole.
- area
-
The
area
element represents either ahyperlink
with some text and a corresponding area on an image map, or a dead area on an image map.If the area element has no
href
attribute, then the area represented by the element cannot be selected, and thealt
attribute must be omitted.
- articleour prognosis
-
Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site. This could be a forum post, a magazine or newspaper article, a Web log entry, a user-submitted comment, or any other independent item of content.
- asideour prognosis
-
Represents a section of a page consisting of content that is tangentially related to the content around the
aside
element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
- audioour prognosis
-
Represents a sound or audio stream.
Content may be nested inside the
audio
element. User agents should not show this content to the user. Authors should use this content to force older browsers to use a legacy audio plugin or to inform the user of how to access the audio content.Supported audio codecs:
- Chrome 3+ supports
.ogg
and.wav
- Firefox 3.5+ supports
.ogg
and.wav
- Opera 10.5+ supports
.ogg
and.wav
- Safari 4+ supports
.mp3
and.wav
- Chrome 3+ supports
B
- bour prognosis
-
Represents a span of text to be stylistically offset from the normal prose without conveying any extra importance. Examples are key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is bold.
The
b
element should be used as a last resort when no other element is more appropriate. In particular, headings should use theh1
toh6
elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.
- base
-
The
base
element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.There must be no more than one
base
element per document. Abase
element must have either anhref
attribute, atarget
attribute, or both.
- bdi
-
The
bdi
element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
- bdo
-
The
bdo
element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override.
- blockquote
-
The
blockquote
element represents a section that is quoted from another source.Content inside a
blockquote
must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.
- body
-
The
body
element represents the main content of the document.
- br
-
The
br
element represents a line break.br
elements must be used only for line breaks that are actually part of the content, as in poems or addresses.br
elements must not be used for separating thematic groups in a paragraph.
-
The
button
element represents a button. If the element is not disabled, then the user agent should allow the user to activate the button.
C
- canvasour prognosis
-
Represents a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
Authors should not use the
canvas
element in a document when a more suitable element is available. For example, it is inappropriate to use acanvas
element to render a page heading. If the desired presentation of the heading is graphically intense, it should be marked up using appropriate elements (typicallyh1
) and then styled usingCSS
and supporting technologies such asXBL
.When authors use the
canvas
element, they must also provide content that, when presented to the user, conveys essentially the same function or purpose as the bitmap canvas. This content should be nested within the canvas element as a fallback.
-
The
caption
element represents the title of thetable
that is its parent, if it has a parent and that is a table element.When a
table
element is the only content in afigure
element other than thefigcaption
, thecaption
element should be omitted in favor of thefigcaption
.
- cite
-
The
cite
element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). This can be a work that is being quoted or referenced in detail (i.e. a citation), or it can just be a work that is mentioned in passing.A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names. (In some cases, the b element might be appropriate for names; e.g. in a gossip article where the names of famous people are keywords rendered with a different style to draw attention to them. In other cases, if an element is really needed, the span element can be used.)
- code
-
The
code
element represents a fragment of computer code. This could be anXML
element name, a filename, a computer program, or any other string that a computer would recognize.
- col
-
If a
col
element has a parent and that is acolgroup
element that itself has a parent that is atable
element, then thecol
element represents one or more columns in the column group represented by thatcolgroup
.
- colgroup
-
The
colgroup
element represents a group of one or more columns in the table that is its parent, if it has a parent and that is atable
element.If the
colgroup
element contains no col elements, then the element may have aspan
content attribute specified, whose value must be a valid non-negative integer greater than zero.
- command
-
The
command
element represents a command that the user can invoke. A command can be part of a context menu or toolbar, using themenu
element, or can be put anywhere else in the page, to define a keyboard shortcut.
D
- datalist
-
The
datalist
element represents a set of option elements that represent predefined options for other controls. The contents of the element represents fallback content for legacy user agents, intermixed withoption
elements that represent the predefined options. In the rendering, thedatalist
element represents nothing and it, along with its children, should be hidden.The
datalist
element is hooked up to aninput
element using the list attribute on theinput
element.
- ddour prognosis
-
The
dd
element represents the description, definition, or value, part of a term-description group in a description list (dl
element).
- del
-
The
del
element represents a removal from the document. Thedel elements should not cross implied paragraph boundaries
- detailsour prognosis
-
The
details
element represents a disclosure widget from which the user can obtain additional information or controls. However, thedetails
element is not appropriate for footnotes.
- dfn
-
The
dfn
element represents the defining instance of a term. The paragraph, description list group, or section that is the nearest ancestor of thedfn
element must also contain the definition(s) for the term given by thedfn
element.
- divour prognosis
-
The
div
element has no special meaning at all. It represents its children. It can be used with theclass
,lang
, andtitle
attributes to mark up semantics common to a group of consecutive elements.
- dlour prognosis
-
Represents a description list consisting of zero or more name-value groups. Each group must consist of one or more names (
dt
elements) each followed by one or more values (dd
elements).Name-value groups may be terms and definitions,
metadata
topics and values, or any other groups of name-value data. The values within a group are alternatives; multiple paragraphs forming part of the same value must all be given within the samedd
element.
- dtour prognosis
-
The
dt
element represents the term, or name, part of a term-description group in a description list (dl
element).
- doctype
-
A
DOCTYPE
is a required preamble and must consist of the following characters, in this order:- A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
- One or more space characters.
- A string that is an ASCII case-insensitive match for the string "
html
". - Optionally, a
DOCTYPE
legacy string or an obsolete permittedDOCTYPE
string (defined below). - Zero or more space characters.
- A U+003E GREATER-THAN SIGN character (>).
E
- emour prognosis
-
Represents stress emphasis of its contents. The level of emphasis that a particular piece of content has is given by its number of ancestor
em
elements. The 'stress' being referred to is linguistic. If spoken, this stress would be emphasised pronunciation on a word that can change the nuance of a sentence.
- embed
-
Represents an integration point for an external(typically non-
HTML
) application or interactive content.The optional
src
attribute specifies the URL of the resource being embedded.The optional type attribute specifies the
MIME
type of the plugin to instantiate. The value must be a validMIME
type, optionally with parameters. If both the type attribute and the src attribute are present, then the type attribute must specify the same MIME type as the explicit Content-Type metadata of the resource given by the src attribute.
F
- fieldset
-
The
fieldset
element is expected to establish a new block formatting context.If the
fieldset
element has a child that matches the conditions in the list below, then the first such child is the fieldset element's rendered legend:- The child is a
legend
element. - The child is not out-of-flow (e.g. not absolutely positioned or floated).
- The child is generating a box (e.g. it is not '
display:none
').
- The child is a
-
The
figcaption
element represents acaption
orlegend
for the rest of the contents of thefigcaption
element's parentfigure
element, if any.
- figureour prognosis
-
The
figure
element represents some flow content, optionally with acaption
, that is self-contained and is typically referenced as a single unit from the main flow of the document.The figure element can be used to annotate illustrations, diagrams, photos, code listings, etc., that are referenced in the main content of the document, but that could, without affecting the flow of the document, be moved away from that primary content — e.g., to the side of the page, to dedicated pages, or to an appendix.
-
Represents the "
footer
" of a document or section of a document. Thefooter
element typically containsmetadata
about its enclosing section, such as who wrote it, links to related documents, copyright data, etc. Contact information for the section given in a footer should be marked up using theaddress
element.
- form
-
The
form
element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
H
- h1-h6
-
Represent headings and subheadings. These elements rank in importance according to the number in their name. The
h1
element is said to have the highest rank, theh6
element has the lowest rank, and two elements with the same name have equal rank.
- head
-
The
head
element represents a collection ofmetadata
for the Document.
- headerour prognosis
-
Represents the "
header
" of a document or section of a document. The header element is typically used to group a set ofh1
–h6
elements to mark up a page's title with its subtitle or tagline.header
elements may, however, contain more than just the section's headings and subheadings — e.g., version history information or publication date.
- hrour prognosis
-
Represents a paragraph-level thematic break. The "paragraph-level" bit means between blocks of text, so it can't be used to separate sections of a site. Instead,
hr
now separates different topics within a section of prose, or between scenes in a novel.
- html
-
The
html
element represents the root of anHTML
document.
I
- iour prognosis
-
Represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, a ship name, or some other prose whose typical typographic presentation is italicized.
Only use i when nothing more suitable is available — e.g.,
em
for text with stress emphasis,strong
for text with semantic importance,cite
for titles in a citation or bibliography,dfn
for defining a word, andvar
for mathematical variables.
- iframe
-
The
iframe
element represents a nested browsing context.For
iframe
elements inHTML
documents, the attribute, if present, must have a value using theHTML
syntax that consists of the following syntactic components, in the given order:- Any number of comments and space characters.
- Optionally, a
DOCTYPE
. - Any number of comments and space characters.
- The root element, in the form of an
html
element. - Any number of comments and space characters.
- img
-
An
img
element represents an image. The image given by thesrc
attribute is the embedded content, and the value of thealt
attribute is theimg
element's fallback content.The
src
attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.The
img
element must not be used as a layout tool. In particular,img
elements should not be used to display transparent images, as they rarely convey meaning and rarely add anything useful to the document.
- input
-
The
input
element represents a typed data field, usually with a form control to allow the user to edit the data.
- ins
-
The
ins
element represents an addition to the document. The ins elements should not cross implied paragraph boundaries.
K
- kbd
-
The
kbd
element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).When the
kbd
element is nested inside a samp element, it represents the input as it was echoed by the system. When thekbd
element contains asamp
element, it represents input based on system output, for example invoking a menu item.When the
kbd
element is nested inside anotherkbd
element, it represents an actual key or other single unit of input as appropriate for the input mechanism.
- keygen
-
The
keygen
element represents a key pair generator control. When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.
L
- label
-
The
label
represents a caption in a user interface. The caption can be associated with a specific form control, known as thelabel
element's labeled control, either using for attribute, or by putting the form control inside thelabel
element itself.
- legend
-
The
legend
element represents a caption for the rest of the contents of thelegend
element's parent fieldset element, if any.
- liour prognosis
-
The
li
element represents a list item. If its parent element is anol
,ul
, ormenu
element, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any otherli
element.
- link
-
The
link
element allows authors to link their document to other resources.The destination of the link(s) is given by the
href
attribute, which must be present and must contain a valid non-empty URL potentially surrounded by spaces. If thehref
attribute is absent, then the element does not define a link.A link element must have
rel
attribute.
M
- main
-
The
main
element is an exact analogue of ARIA'srole="main"
, and is designed to show screenreaders and assistive technologies exactly where main content begins, so it can be a target for a "skip links" keyboard command, for example. It could also be used for content syndication (Instapaper-ish things); mobile browsers could zoom in onmain
when encountering non-responsive websites. It should therefore be used once per page. If you use something like<div id="main">
(or similar, such as<div id="content">
), simply replace that with<main role="main">
.
- map
-
The
map
element, in conjunction with anyarea
element descendants, defines an image map. The element represents its children.
- markour prognosis
-
Represents a run of text in one document marked or highlighted because of its relevance in another context.
When used in a quotation or other block of text referenced in a document, it indicates a highlight that was not present in the original document — e.g., a portion of text in an academic publication that has recently come under additional scrutiny.
-
The
menu
element represents a list of commands.If a menu element's type attribute is in the context menu state, then the element represents the commands of a context menu, and the user can only interact with the commands if that context menu is activated. If a
menu
element's type attribute is in the toolbar state, then the element represents a list of active commands that the user can immediately interact with.If a menu element's type attribute is in the list state, then the element either represents an unordered list of items (each represented by an
li
element), each of which represents a command that the user can perform or activate, or, if the element has noli
element children, flow content describing available commands.
- meta
-
The
meta
element represents various kinds of metadata that cannot be expressed using thetitle
,base
,link
,style
, andscript
elements.The
meta
element can represent document-level metadata with the name attribute, pragma directives with thehttp-equiv
attribute, and the file's character encoding declaration when anHTML
document is serialized to string form (e.g. for transmission over the network or for disk storage) with the charset attribute.
- meterour prognosis
-
When the
meter
binding applies to a meter element, the element is expected to render as an 'inline-block' box with a 'height' of '1em' and a 'width' of '5em', a 'vertical-align' of '-0.2em', and with its contents depicting a gauge.When the element is wider than it is tall(or square), the depiction is expected to be of a horizontal gauge, with the minimum value on the right if the 'direction' property on this element has a computed value of '
rtl
', and on the left otherwise. When the element is taller than it is wide, it is expected to depict a vertical gauge, with the minimum value on the bottom.
N
-
Represents navigation for a document. The
nav
element is a section containing links to other documents or to parts within the current document.Not all groups of links on a page need to be in a
nav
element — only groups of primary navigation links. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases.
- noscript
-
The
noscript
element represents nothing if scripting is enabled, and represents its children if scripting is disabled. It is used to present different markup to user agents that support scripting and those that don't support scripting, by affecting how the document is parsed.
O
- object
-
The
object
element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.
- olour prognosis
-
The
ol
element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the list.
- optgroup
-
The
optgroup
element represents a group ofoption
elements with a common label. The element's group of option elements consists of the option elements that are children of the optgroup element.When showing option elements in select elements, user agents should show the option elements of such groups as being related to each other and separate from other option elements.
- option
-
The
option
element represents an option in a select element or as part of a list of suggestions in adatalist
element.In certain circumstances described in the definition of the select element, an option element can be a select element's placeholder label option. A placeholder label option does not represent an actual option, but instead represents a label for the select control.
- outputour prognosis
-
Represents the result of a calculation.
The optional for attribute allows an explicit relationship to be made between the result of a calculation and the elements representing the values that influenced the calculation. If specified, the for attribute must contain a string consisting of an unordered set of unique, space-separated tokens, each of which must be the ID of an element in the same document.
P
- p
-
The
p
element represents a paragraph.
- param
-
The
param
element defines parameters for plugins invoked by object elements. It does not represent anything on its own.
- pre
-
The
pre
element represents a block of preformatted text, in which structure is represented by typographic conventions rather than by elements.
- progress
-
Represents the completion progress of a task. Progress may be either indeterminate — meaning it is unclear how much work remains before the task is complete (e.g., the task is waiting for a response from a remote host) — or a numeric value between 0 and a given maximum, explicitly specifying the fraction of work that has so far been completed.
Q
- q
-
The q element represents some phrasing content quoted from another source.
R
- rpour prognosis
-
Represents a container for parentheses used to wrap ruby text (
<rt>
) inside a<ruby>
element. These are displayed by browsers which don't support<ruby>
, allowing for graceful degradation of ruby content. Browsers which support<ruby>
hide<rp>
via display:none.
- rtour prognosis
-
Represents a container for ruby text inside a
<ruby>
element.<rt>
content becomes the small annotations rendered by default above horizontal base text or to the right of vertical base text.
- rubyour prognosis
-
Represents a container for base text and ruby text — small annotations used for phonetic readings in languages such as Japanese and Chinese. Examples include furigana and zhùyin fúhào (bopomofo).
S
- s
-
The
s
element represents contents that are no longer accurate or no longer relevant.
- samp
-
The
samp
element represents (sample) output from a program or computing system
- script
-
The
script
element allows authors to include dynamic script and data blocks in their documents. The element does not represent content for the user.
- sectionour prognosis
-
Represents a generic document or application section. In this context, a
section
is a thematic grouping of content, typically with aheader
, possibly with afooter
. Examples include chapters in a book, 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.
- select
-
The
select
element represents a control for selecting amongst a set of options.
- smallour prognosis
-
Represents side comments such as small print. It is not intended to be presentational. The
small
element should not be used for extended spans of text such as multiple paragraphs, lists, or sections of text. It is only intended for short runs of text.
- source
-
The source element allows authors to specify multiple alternative media resources for media elements. It does not represent anything on its own. The
src
attribute gives the address of the media resource. The value must be a valid non-empty URL potentially surrounded by spaces. This attribute must be present.
- span
-
The
span
element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children.
- strongour prognosis
-
Represents strong importance for its contents. Indicate relative importance by nesting strong elements; each
strong
element increases the importance of its contents. Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
- style
-
The
style
element allows authors to embed style information in their documents. Thestyle
element is one of several inputs to the styling processing model. The element does not represent content for the user.
- sub
-
The
sub
element can be used inside avar
element, for variables that have subscripts.
- summaryour prognosis
-
The
summary
element represents asummary
,caption
, orlegend
for the rest of the contents of the summary element's parent details element, if any.
- sup
-
The
sup
element represents asuperscript
and thesub
element represents a subscript.
T
- table
-
The
table
element represents data with more than one dimension, in the form of a table. Tables must not be used as layout aids.
- tbody
-
The
tbody
element represents a block of rows that consist of a body of data for the parent table element, if thetbody
element has a parent and it is a table.
- td
-
The
td
element represents a data cell in a table.
- textarea
-
The
textarea
element represents a multiline plain text edit control for the element's raw value. The contents of the control represent the control's default value.
- tfoot
-
The
tfoot
element represents the block of rows that consist of the column summaries (footers) for the parent table element, if thetfoot
element has a parent and it is a table.
- th
-
The
th
element represents a header cell in a table.
- thead
-
The
thead
element represents the block of rows that consist of the column labels (headers) for the parent table element, if the thead element has a parent and it is a table.
- timeour prognosis
-
Represents a precise date and/or time in the proleptic Gregorian calendar. The time element encodes modern dates and times in a machine-readable way, so that, for example, user agents could offer to add an event to the user's calendar.
- title
-
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 heading, since the first heading does not have to stand alone when taken out of context.
- tr
-
The
tr
element represents a row of cells in a table.
- trackour prognosis
-
The
track
element allows authors to specify explicit external timed text tracks for media elements. It does not represent anything on its own.
U
- uour prognosis
-
The
u
element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation (when you are annotating something, but not explicitly saying what it is). Examples include indicating misspelt words, labeling proper names in traditional Chinese prose, or indicating a family name when the name’s order is non-western.
- ul
-
The
ul
element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the list.
V
- var
-
The
var
element represents a variable. This could be an actual variable in a mathematical expression or programming context, or it could just be a term used as a placeholder in prose.
- videoour prognosis
-
Represents a video or movie.
Content may be nested inside the
video
element. User agents should not show this content to the user. Authors should use this content to force older browsers to use a legacy video plugin or to inform the user of how to access the video content.
W
- wbr
-
The
wbr
element represents a line break opportunity. Any content insidewbr
elements must not be considered part of the surrounding text.