HTML5 Tags

Perm url with updates: http://xahlee.org/js/html5_tags.html

HTML5 Tags

Xah Lee, 2011-06-26, 2011-07-07

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

HTML Structure, Meta info, Tags

htmlwrapper tag for entire file. (only DOCTYPE goes before it.)
headwrapper tag for meta info
metameta tag used inside “head” tag
linkstyle sheet etc. <link rel="stylesheet" type="text/css" href="http://xahlee.org/js/lang.css">
titledocument title
basebase URL
bodywrapper tag for page content
styleCSS stylesheet

See: HTML Basics.

Page Structure

nav†navigation markup
header†page's header
footer†page's footer
aside†Sidebar
article†Enclose a article. (e.g. essay)
section†section markup

See: html5 tags test page: header, footer, nav, article, section, aside.

Title/Section Heading

h1headline 1
h2headline 2
h3headline 3
h4headline 4
h5headline 5
h6headline 6
hgroup†Used to group one of “h1” to “h6”.

Text Block

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

Lists

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

See: Flowing List Items

dldefinition list
dtdefinition term
dddefinition description

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

Table

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

Forms

form
buttonRender as Button. Used together with javascript.
inputGeneric input (text, radio box, checkbox, submit button)
textarealarge text input (e.g. comment)
selectmenu.
optionMenu item. Used with “select”.
optgroupMenu item group label.
labelA label for a form input
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

Inline Text Markup

spangeneric text markup. Use with css
alink (anchor)
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
mark†higlight
smallsmaller
deldeleted text
insnewly inserted text (in contrast to “del”)
supsuperscript
subsubscript
dfndefinition term
codecomputer code
varvariable
sampsample code
kbdkeyboard input
qshort inline quote. “q” example
citecitation

See: test page for HTML text style Tags.

ruby†pronunciation markup for asian langs. ruby example.
rp†used inside “ruby” tag
rt†used inside “ruby” tag
brline break
wbr†line-break hint. Browsers can render line break at this point.
bdotext direction
bditext direction

Image

img
figcaption†caption for images
figure†group images
mapImage Map example
areaimage map. Used inside “map” tag.

See: HTML5 “figure” & “figurecaption” example.

Audio, Video, Special Objects

scriptSee: Javascript Basics.
noscripte.g. <noscript>displayed when javascript is off</noscript>
objectembedded object. Object example.
paramparameter, used with “object” tag
embed†interactive content or plugin
video†video. See Video/Audio Example
audio†For embedding sound files.
iframeembed a page; inner window. Iframe example
canvas†interactive graphics, games
abbre.g. <abbr title="eXtensible Markup Language">XML</abbr>; abbr example
addressmarkup for contact of article or page. HTML5 “address” Tag
source†? media resources
meter†gauge indicator. Meter examle
progress†Progress bar. Progress bar example
time†date/time HTML5 “time” Tag
  • track

Obsolete HTML4 Tags

acronymuse “abbr”
appletuse “embed” or “object”
bgsounduse “audio”
basefontuse css
biguse css
centeruse css. See: Centering with CSS.
dirDirectory list. Use “ul”
fontuse css
frameuse css, 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.

Reference

Popular posts from this blog

11 Years of Writing About Emacs

does md5 creates more randomness?

Google Code shutting down, future of ErgoEmacs