HTML5 Tags Complete List

By Xah Lee. Date: . Last updated: .

This page is a COMPLETE list of HTML5 tags. Those marked with star are new in HTML5.

HTML Structure, Meta info

namemeaning
htmlwrapper tag for entire file. (only DOCTYPE goes before it.)
headwrapper tag for meta info
metameta tag used inside head tag. For example, <meta charset="utf-8" />
linkstyle sheet etc. For example, <link rel="stylesheet" type="text/css" href="basic.css">
titledocument title
basebase URL. <base href="http://example.com/" target="_blank" />
bodywrapper tag for page content
styleCSS stylesheet. <style type="text/css">…</style>

Page Structure

namemeaning
navnavigation bar
headerpage's header
footerpage's footer
mainmain section
asidesidebar
articlearticle body
sectionsection body (For example, chapter).

[see HTML5 Page Structure Tags Example]

Title/Section Heading

namemeaning
h1headline 1
h2headline 2
h3headline 3
h4headline 4
h5headline 5
h6headline 6
hgroupUsed to group one of h1 to h6, for subtitle purpose. This tag is removed from W3C spec, but remains in WHATWG spec.

[see HTML: How to Markup Subtitle]

Text Block

namemeaning
divgeneric block markup. Use with CSS
pparagraph
premonospace block
blockquotequote passages, excerpt
namemeaning
hrhorizontal rule

Lists

namemeaning
ulunordered list
olordered list
lilist item. (use inside ul or ol)

[see CSS: Flowing List]

namemeaning
dldefinition list
dtdefinition term
dddefinition description

[see HTML Tutorial: Definition List: dl, dt, dd]

Inline Text Markup

namemeaning
spangeneric text markup. Use with CSS
alink (anchor)
namemeaning
ememphasize. Placing emphasis may affect the meaning of sentence.
strongimportant. Placement of this tag does not change the meaning of sentence.
bbold
iitalic
uunderline for book title, misspelled word, ….
sstrike-thru
markhighlight
smallsmaller

[see HTML: What's the Difference Between “s” vs “strike” vs “del” Tags]

namemeaning
deldeleted text
insnewly inserted text (in contrast to del)
namemeaning
supsuperscript
subsubscript
namemeaning
dfndefinition term
codecomputer code
varvariable
sampsample code
kbdkeyboard input
qshort inline quote. [see “q” example]
citebook title (or title of: article, essay, song, script, film, TV show, game, artwork, … etc)

[see HTML Inline Markup Examples]

namemeaning
rubyPronunciation markup for Asian languages. [see ruby example]
rtused inside ruby tag, for pronunciation.
rpused inside ruby tag, for older browser support.
namemeaning
brline break
wbrline-break hint. Browsers can render line break at this point.
namemeaning
bdotext direction
bditext direction

Table

namemeaning
tabletable
captiontable caption
trtable row
tdtable cell
thtable cell header
theadtable header
tfoottable footer
tbodytable body
colgroupgroup table columns for styling
colused inside colgroup

Image

namemeaning
imginline image
figurefor independent illustartion, image, video, code example, …
figcaptioncaption for images
mapImage Map Example
areaImage Map Example

Audio, Video, Special Objects

namemeaning
video [see HTML5 Video Tutorial]
audioembed sound files. [see HTML5 Audio Tag Tutorial]
sourceA self-closing tag, to be used inside {video, audio} tags. Similar in purpose to the src="…" attribute. Used to indicate media source, for different formats. For example, mp4, ogg. For example, <source src="movie.mp4" type="video/mp4">
track? video/audio track related.
namemeaning
script [see JavaScript Basics by Example]
noscriptFor example: <noscript>displayed when JavaScript is off</noscript>
objectembedded object. [see “Object” tag for “Iframe”]
paramparameter, used with object tag
embedinteractive content or plugin
iframeembed a page; inner window. [see HTML: Iframe]
canvasinteractive graphics, games. [see Canvas Example]
namemeaning
abbrFor example: <abbr title="eXtensible Markup Language">XML</abbr>. [see abbr Example]
addressmarkup for contact of article or page. [see HTML5 “address” Tag]
namemeaning
metergauge indicator. [see HTML5 {meter, progress} Tags]
progressProgress bar. [see HTML5 {meter, progress} Tags]
timedate/time. [see HTML5 “time” Tag]

Forms

namemeaning
form
buttonRender as Button. Used together with JavaScript.
inputGeneric input (text, radio box, checkbox, submit button)
textarealarge text input (For example, comment)
selectmenu.
optionMenu item. Used with select.
optgroupMenu item group label.
labelA label for a form input
namemeaning
fieldset?
legendtitle in a fieldset
keygen?
command? command button
datalist? dropdown list
menu? menu list
output?
details?
summary? header of a "details" element

HTML Form Example


HTML5 Custom Data Attribute

See: HTML5 Custom Data Attribute.

Obsolete HTML4 Tags

namemeaning
acronymuse abbr
appletuse embed or object. [see “Object” tag for “Iframe”]
bgsounduse audio
basefontuse CSS
biguse CSS font-size.
centeruse CSS. [see Centering with CSS]
dirDirectory list. Use ul
fontuse CSS font-family
frameuse CSS, iframe. [see HTML: Iframe]
framesetuse CSS, iframe
noframes
strikeuse s. [see “s” vs “strike” vs “del”]
ttstands for “teletype”, rendered in monospace font. Use {code, samp}, or CSS.
xmpuse pre with CSS.
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

Ask me question on patreon