HTML5 Tags Complete List

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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

See also: Case Sensitivity in HTML5/XML/CSS/Javascript and Allowed Characters in Attribute Names.

HTML Structure, Meta info, Tags

namemeaning
htmlwrapper tag for entire file. (only DOCTYPE goes before it.)
headwrapper tag for meta info
metameta tag used inside head tag. ⁖ <meta charset="utf-8" />
linkstyle sheet etc. ⁖ <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 (⁖ chapter).

〔➤ 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 WTF group spec.

〔➤ 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)

〔➤ CSS: Flowing List

namemeaning
dldefinition list
dtdefinition term
dddefinition description

〔➤ HTML examples: {dl, dt, dd} for Definition List

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

〔➤ 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. 〔➤ “q” example
citebook title (or title of: article, essay, song, script, film, TV show, game, artwork, … etc)

〔➤ HTML Inline Markup Examples

namemeaning
rubypronunciation markup for asian langs. 〔➤ ruby example
rpused inside ruby tag
rtused inside ruby tag
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
figcaptioncaption for images
figuregroup images
mapImage Map Example
areaImage Map Example

〔➤ HTML5 “figure” & “figurecaption” Tags Browser Support

Audio, Video, Special Objects

namemeaning
video 〔➤ HTML5 Video Example
audioembed sound files. 〔➤ HTML5 Audio Tag Example
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. ⁖ mp4, ogg. ⁖ <source src="movie.mp4" type="video/mp4">
track? video/audio track related.
namemeaning
script 〔➤ JavaScript Basics by Example
noscript<noscript>displayed when JavaScript is off</noscript>
objectembedded object. 〔➤ “Object” tag for “Iframe”
paramparameter, used with object tag
embedinteractive content or plugin
iframeembed a page; inner window. 〔➤ HTML Iframe Tutorial
canvasinteractive graphics, games. 〔➤ Canvas Example
namemeaning
abbr<abbr title="eXtensible Markup Language">XML</abbr>. 〔➤ abbr Example
addressmarkup for contact of article or page. 〔➤ HTML5 “address” Tag
namemeaning
metergauge indicator. 〔➤ HTML5 {meter, progress} Tags
progressProgress bar. 〔➤ HTML5 {meter, progress} Tags
timedate/time. 〔➤ HTML5 “time” Tag

Forms

namemeaning
form
buttonRender as Button. Used together with JavaScript.
inputGeneric input (text, radio box, checkbox, submit button)
textarealarge text input (⁖ 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. 〔➤ “Object” tag for “Iframe”
bgsounduse audio
basefontuse CSS
biguse CSS font-size.
centeruse CSS. 〔➤ Centering with CSS
dirDirectory list. Use ul
fontuse CSS font-family
frameuse CSS, iframe. 〔➤ HTML Iframe Tutorial
framesetuse CSS, iframe
noframes
strikeuse s. 〔➤ “s” vs “strike” vs “del”
ttstands for “teletype”, rendered in monospace font. Use {code, samp}, or CSS.
xmpuse pre with CSS.

Reference

http://www.w3.org/html/wg/drafts/html/master/

Thanks to Xue Fuqiao, Jean-Philippe Paradis for corrections.

blog comments powered by Disqus