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
| html | wrapper tag for entire file. (only DOCTYPE goes before it.) |
| head | wrapper tag for meta info |
| meta | meta tag used inside “head” tag |
| link | style sheet etc. <link rel="stylesheet" type="text/css" href="lang.css"> |
| title | document title |
| base | base URL |
| body | wrapper tag for page content |
| style | CSS 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
| h1 | headline 1 |
| h2 | headline 2 |
| h3 | headline 3 |
| h4 | headline 4 |
| h5 | headline 5 |
| h6 | headline 6 |
| hgroup† | Used to group one of “h1” to “h6”. |
Text Block
| div | generic block markup. Use with CSS |
| p | paragraph |
| pre | monospace block |
| blockquote | quote passages, excerpt |
Lists
| ul | unordered list |
| ol | ordered list |
| li | list item. (use inside “ul” or “ol”) |
See: Flowing List Items
| dl | definition list |
| dt | definition term |
| dd | definition description |
See: HTML examples: {dl, dt, dd} for Definition List
Table
| table | table |
| caption | table caption |
| tr | table row |
| td | table cell |
| th | table cell header |
| thead | table header |
| tfoot | table footer |
| tbody | table body |
| colgroup | group table columns for styling |
| col | used inside “colgroup” |
Forms
| form | |
| button | Render as Button. Used together with javascript. |
| input | Generic input (text, radio box, checkbox, submit button) |
| textarea | large text input (e.g. comment) |
| select | menu. |
| option | Menu item. Used with “select”. |
| optgroup | Menu item group label. |
| label | A label for a form input |
| fieldset | ? |
| legend | title 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
| span | generic text markup. Use with CSS |
| a | link (anchor) |
| em | emphasize. Placing emphasis may affect the meaning of sentence. |
| strong | important. Placement of this tag does not change the meaning of sentence. |
| b | bold |
| i | italic |
| u | underline for book title, misspelled word, …. |
| s | strike-thru |
| mark† | higlight |
| small | smaller |
| del | deleted text |
| ins | newly inserted text (in contrast to “del”) |
| sup | superscript |
| sub | subscript |
| dfn | definition term |
| code | computer code |
| var | variable |
| samp | sample code |
| kbd | keyboard input |
| q | short inline quote . “q” example |
| cite | book title (or title of: article, essay, song, script, film, TV show, game, artwork, … etc) |
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 |
| br | line break |
| wbr† | line-break hint. Browsers can render line break at this point. |
| bdo | text direction |
| bdi | text direction |
Image
| img | Embedded image. |
| figcaption† | caption for images |
| figure† | group images |
| map | Image Map example |
| area | image map. Used inside “map” tag. |
See: HTML5 “figure” ＆ “figurecaption” example.
Audio, Video, Special Objects
| script | See: Javascript Basics. |
| noscript | e.g. <noscript>displayed when javascript is off</noscript> |
| object | embedded object. Object example. |
| param | parameter, used with “object” tag |
| embed† | interactive content or plugin |
| video† | video. See Video/Audio Example |
| audio† | For embedding sound files. |
| iframe | embed a page; inner window. Iframe example |
| canvas† | interactive graphics, games |
| abbr | e.g. <abbr title="eXtensible Markup Language">XML</abbr>; abbr example |
| address | markup for contact of article or page. HTML5 “address” Tag |
| source† | ? media resources |
Obsolete HTML4 Tags
| acronym | use “abbr” |
| applet | use “embed” or “object” |
| bgsound | use “audio” |
| basefont | use CSS |
| big | use CSS |
| center | use CSS. See: Centering with CSS. |
| dir | Directory list. Use “ul” |
| font | use CSS |
| frame | use CSS, iframe |
| frameset | use CSS, iframe |
| noframes | |
| strike | use “s”. See: “s” vs “strike” vs “del”. |
| tt | stands for “teletype”, rendered in monospace font. Use “code”, “samp”, or CSS. |
| xmp | use “pre” with CSS. |
Reference
blog comments powered by