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

γ€”βž€Β 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 Tutorial: figure, figurecaption〕

Audio, Video, Special Objects

namemeaning
β˜…video γ€”βž€Β HTML5 Video Tutorial〕
β˜…audioembed sound files. γ€”βž€Β 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. ⁖ 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