Periodic Table of HTML5 Elements

Introduction:

The table below shows all valid elements in the current HTML5 specification. They are grouped and coloured based on their "Content Model" i.e. what type of element it may contain. Items shown with red text have complex requirements but are shown alongside elements with similar content models. Unlike the Mendelevian Periodic Table that is used in Chemistry, there is no fundamental ordering to the elements within a group, and no significance to the presence of a few empty spaces.

html

Categories:
None.
Contexts in which this element can be used:
As the root element of a document.
Wherever a subdocument fragment is allowed in a compound document.
Content model:
A head element followed by a body element.
Content attributes:
Global attributes
manifest
 

Legend

head

Categories:
None.
Contexts in which this element can be used:
As the first element in an html element.
Content model:
If the document is an iframe srcdoc document or if title information is available from a higher-level protocol: Zero or more elements of metadata content.
Otherwise: One or more elements of metadata content , of which exactly one is a title element.
Content attributes:
Global attributes

body

Categories:
Sectioning root.
Contexts in which this element can be used:
As the second element in an html element.
Content model:
Flow content.
Content attributes:
Global attributes
onafterprint
onbeforeprint
onbeforeunload
onblur
onerror
onfocus
onhashchange
onload
onmessage
onoffline
ononline
onpagehide
onpageshow
onpopstate
onredo
onresize
onscroll
onstorage
onundo
onunload
  • TEXT
  • Empty
  • Transparent
  • Flow Content
  • Phrasing Content
  • Complex
  • Additional Rules
    (Red Text)

title

Categories:
Metadata content.
Contexts in which this element can be used:
In a head element containing no other title elements.
Content model:
Text.
Content attributes:
Global attributes

iframe

Categories:
Flow content.
Phrasing content.
Embedded content.
Interactive content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Text that conforms to the requirements given in the prose.
Content attributes:
Global attributes
src
srcdoc
name
sandbox
seamless
width
height

div

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes

p

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

base

Categories:
Metadata content.
Contexts in which this element can be used:
In a head element containing no other base elements.
Content model:
Empty.
Content attributes:
Global attributes
href
target
 

a

Categories:
Flow content.
When the element only contains phrasing content : phrasing content.
Interactive content.
Contexts in which this element can be used:
When the element only contains phrasing content : where phrasing content is expected.
Otherwise: where flow content is expected.
Content model:
Transparent , but there must be no interactive content descendant.
Content attributes:
Global attributes
href
target
rel
media
hreflang
type

style

Categories:
Metadata content.
If the scoped attribute is present: flow content.
Contexts in which this element can be used:
If the scoped attribute is absent: where metadata content is expected.
If the scoped attribute is absent: in a noscript element that is a child of a head element.
If the scoped attribute is present: where flow content is expected, but before any other flow content other than other style elements and inter-element whitespace.
Content model:
Depends on the value of the type attribute, but must match requirements described in prose below.
Content attributes:
Global attributes
media
type
scoped
Also, the title attribute has special semantics on this element.

blockquote

Categories:
Flow content.
Sectioning root.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes
cite

header

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content , but with no header orfooter element descendants.
Content attributes:
Global attributes

h1

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

span

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

i

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

link

Categories:
Metadata content.
Contexts in which this element can be used:
Where metadata content is expected.
In a noscript element that is a child of a head element.
Content model:
Empty.
Content attributes:
Global attributes
href
rel
media
hreflang
type
sizes
Also, the title attribute has special semantics on this element.

area

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected, but only if there is a map element ancestor.
Content model:
Empty.
Content attributes:
Global attributes
alt
coords
shape
href
target
rel
media
hreflang
type

figcaption

Categories:
None.
Contexts in which this element can be used:
As the first or last child of a figure element.
Content model:
Flow content.
Content attributes:
Global attributes

footer

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content , but with no header orfooter element descendants.
Content attributes:
Global attributes

h2

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

pre

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

code

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

b

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

hgroup

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
One or more h1, h2, h3, h4, h5, and/or h6 elements.
Content attributes:
Global attributes

article

Categories:
Flow content.
Sectioning content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes

address

Categories:
Flow content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content , but with no heading content descendants, no sectioning content descendants, and no header, footer, oraddress element descendants.
Content attributes:
Global attributes

h3

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

abbr

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes
Also, the title attribute has special semantics on this element.

var

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

u

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

hr

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Empty.
Content attributes:
Global attributes

ol

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes
reversed
start
type

aside

Categories:
Flow content.
Sectioning content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes

figure

Categories:
Flow content.
Sectioning root.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Either: One figcaption element followed by flow content.
Or: Flow content followed by one figcaption element.
Or: Flow content.
Content attributes:
Global attributes

h4

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

cite

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

samp

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

em

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

br

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Empty.
Content attributes:
Global attributes

wbr

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Empty.
Content attributes:
Global attributes

video

Categories:
Flow content.
Phrasing content.
Embedded content.
If the element has a controls attribute: Interactive content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
If the element has a src attribute: zero or more track elements, then transparent , but with no media element descendants.
If the element does not have a src attribute: zero or more source elements, then zero or more track elements, then transparent , but with no media element descendants.
Content attributes:
Global attributes
src
poster
preload
autoplay
mediagroup
loop
muted
controls
width
height

ul

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes

li

Categories:
None.
Contexts in which this element can be used:
Inside ol elements.
Inside ul elements.
Inside menu elements.
Content model:
Flow content.
Content attributes:
Global attributes
If the element is a child of an ol element: value

caption

Categories:
None.
Contexts in which this element can be used:
As the first element child of a table element.
Content model:
Flow content , but with no descendant table elements.
Content attributes:
Global attributes

h5

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

q

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes
cite

mark

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

strong

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

col

Categories:
None.
Contexts in which this element can be used:
As a child of a colgroup element that doesn't have a span attribute.
Content model:
Empty.
Content attributes:
Global attributes
span

img

Categories:
Flow content.
Phrasing content.
Embedded content.
If the element has a usemap attribute: Interactive content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Empty.
Content attributes:
Global attributes
alt
src
usemap
ismap
width
height

dl

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more groups each consisting of one or moredt elements followed by one or more dd elements.
Content attributes:
Global attributes

dd

Categories:
None.
Contexts in which this element can be used:
After dt or dd elements inside dl elements.
Content model:
Flow content.
Content attributes:
Global attributes

h6

Categories:
Flow content.
Heading content.
formatBlock candidate.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

s

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

rt

Categories:
None.
Contexts in which this element can be used:
As a child of a ruby element.
Content model:
Phrasing content.
Content attributes:
Global attributes

small

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

audio

Categories:
Flow content.
Phrasing content.
Embedded content.
If the element has a controls attribute: Interactive content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
If the element has a src attribute:zero or more track elements, thentransparent , but with no media element descendants.
If the element does not have a src attribute: one or more source elements, then zero or more track elements, then transparent , but with no media element descendants.
Content attributes:
Global attributes
src
preload
autoplay
mediagroup
loop
muted
controls
  

nav

Categories:
Flow content.
Sectioning content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes

details

Categories:
Flow content.
Sectioning root.
Interactive content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
One summary element followed by flow content.
Content attributes:
Global attributes
open

dt

Categories:
None.
Contexts in which this element can be used:
Before dd or dt elements inside dl elements.
Content model:
Phrasing content.
Content attributes:
Global attributes

bdi

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes
Also, the dir global attribute has special semantics on this element.

rp

Categories:
None.
Contexts in which this element can be used:
As a child of a ruby element, either immediately before or immediately after an rt element.
Content model:
Phrasing content.
Content attributes:
Global attributes
 

param

Categories:
None.
Contexts in which this element can be used:
As a child of an object element, before any flow content.
Content model:
Empty.
Content attributes:
Global attributes
name
value

table

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or moretbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total).
Content attributes:
Global attributes
border

section

Categories:
Flow content.
Sectioning content.
formatBlock candidate.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content.
Content attributes:
Global attributes

form

Categories:
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Flow content , but with no form element descendants.
Content attributes:
Global attributes
accept-charset
action
autocomplete
enctype
method
name
novalidate
target

sub

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

bdo

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes
Also, the dir global attribute has special semantics on this element.

ruby

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
One or more groups of: phrasing content followed either by a single rt element, or an rp element, an rt element, and another rp element.
Content attributes:
Global attributes

datalist

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Either: phrasing content.
Or: Zero or more option elements.
Content attributes:
Global attributes

embed

Categories:
Flow content.
Phrasing content.
Embedded content.
Interactive content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Empty.
Content attributes:
Global attributes
src
type
width
height
Any other attribute that has no namespace (see prose).

ins

Categories:
Flow content.
When the element only contains phrasing content : phrasing content.
Contexts in which this element can be used:
When the element only contains phrasing content : where phrasing content is expected.
Otherwise: where flow content is expected.
Content model:
Transparent.
Content attributes:
Global attributes
cite
datetime
 

thead

Categories:
None.
Contexts in which this element can be used:
As a child of a table element, after anycaption, and colgroup elements and before any tbody, tfoot, andtr elements, but only if there are no otherthead elements that are children of thetable element.
Content model:
Zero or more tr elements
Content attributes:
Global attributes

tfoot

Categories:
None.
Contexts in which this element can be used:
As a child of a table element, after anycaption, colgroup, and thead elements and before any tbody and tr elements, but only if there are no other tfoot elements that are children of the table element.
As a child of a table element, after anycaption, colgroup, thead,tbody, and tr elements, but only if there are no other tfoot elements that are children of thetable element.
Content model:
Zero or more tr elements
Content attributes:
Global attributes
 

sup

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

legend

Categories:
None.
Contexts in which this element can be used:
As the first child of a fieldset element.
Content model:
Phrasing content.
Content attributes:
Global attributes

dfn

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content , but there must be no dfn element descendants.
Content attributes:
Global attributes
Also, the title attribute has special semantics on this element.

source

Categories:
None.
Contexts in which this element can be used:
As a child of a media element , before any flow content or track elements.
Content model:
Empty.
Content attributes:
Global attributes
src
type
media

del

Categories:
Flow content.
When the element only contains phrasing content : phrasing content.
Contexts in which this element can be used:
When the element only contains phrasing content : where phrasing content is expected.
Otherwise: where flow content is expected.
Content model:
Transparent.
Content attributes:
Global attributes
cite
datetime

tbody

Categories:
None.
Contexts in which this element can be used:
As a child of a table element, after any caption, colgroup, andthead elements, but only if there are notr elements that are children of thetable element.
Content model:
Zero or more tr elements
Content attributes:
Global attributes

tr

Categories:
None.
Contexts in which this element can be used:
As a child of a thead element.
As a child of a tbody element.
As a child of a tfoot element.
As a child of a table element, after anycaption, colgroup, and thead elements, but only if there are no tbody elements that are children of the table element.
Content model:
Zero or more td or th elements
Content attributes:
Global attributes

td

Categories:
Sectioning root.
Contexts in which this element can be used:
As a child of a tr element.
Content model:
Flow content.
Content attributes:
Global attributes
colspan
rowspan
headers

th

Categories:
None.
Contexts in which this element can be used:
As a child of a tr element.
Content model:
Phrasing content.
Content attributes:
Global attributes
colspan
rowspan
headers
scope

summary

Categories:
None.
Contexts in which this element can be used:
As the first child of a details element.
Content model:
Phrasing content.
Content attributes:
Global attributes

time

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content , but there must be no time element descendants.
Content attributes:
Global attributes
datetime
pubdate

command

Categories:
Metadata content.
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where metadata content is expected.
Where phrasing content is expected.
Content model:
Empty.
Content attributes:
Global attributes
type
label
icon
disabled
checked
radiogroup
Also, the title attribute has special semantics on this element.

track

Categories:
None.
Contexts in which this element can be used:
As a child of a media element , before any flow content.
Content model:
Empty.
Content attributes:
Global attributes
kind
src
srclang
label
default

canvas

Categories:
Flow content.
Phrasing content.
Embedded content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Transparent.
Content attributes:
Global attributes
width
height

optgroup

Categories:
None.
Contexts in which this element can be used:
As a child of a select element.
Content model:
Zero or more option elements.
Content attributes:
Global attributes
disabled
label

option

Categories:
None.
Contexts in which this element can be used:
As a child of a select element.
As a child of a datalist element.
As a child of an optgroup element.
Content model:
Text.
Content attributes:
Global attributes
disabled
label
selected
value

kbd

Categories:
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content.
Content attributes:
Global attributes

label

Categories:
Flow content.
Phrasing content.
Interactive content.
Form-associated element.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Phrasing content , but with no descendant labelable form-associated elements unless it is the element's labeled control , and no descendant label elements.
Content attributes:
Global attributes
form
for

script

Categories:
Metadata content.
Flow content.
Phrasing content.
Contexts in which this element can be used:
Where metadata content is expected.
Where phrasing content is expected.
Content model:
If there is no src attribute, depends on the value of the type attribute, but must match script content restrictions.
If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.
Content attributes:
Global attributes
src
async
defer
type
charset

colgroup

Categories:
None.
Contexts in which this element can be used:
As a child of a table element, after anycaption elements and before any thead,tbody, tfoot, and tr elements.
Content model:
If the span attribute is present: Empty.
If the span attribute is absent: Zero or more col elements.
Content attributes:
Global attributes
span

map

Categories:
Flow content.
When the element only contains phrasing content : phrasing content.
Contexts in which this element can be used:
When the element only contains phrasing content : where phrasing content is expected.
Otherwise: where flow content is expected.
Content model:
Transparent.
Content attributes:
Global attributes
name

© Copyright Mike Brockington 2004 - 2014   All Rights Reserved