Page 1
Page Structure
Char. Codes
Misc.
Tags & Attributes
Namespaces
<head> Tags
Metatags
Attributes
Media Types
.htaccess
<body> Tags
Transition to HTML 5
How To Code HTML, What's New and Obsolete HTML Tags and Attributes
A great quick reference for the transition from HTML 4 to HTML 5. Designed to help authors create polyglot HTML documents, this can also help in creating HTML 4 and XHTML documents, in addition to upgrading to HTML 5. Most HTML cheat sheets, usually based on the technical specifications for a specific version of HTML, show only the valid features in that version of the HTML specs. In contrast, this one helps developers transition from earlier versions of HTML by indicating new features in HTML 5 with a "New" flag and using a strike-through font to indicate the tags and attributes previously used in HTML 4, XHTML 1 and earlier versions that are now obsolete in HTML 5.
For a quick reference of HTML character entities, see the HTML character codes reference.
Required or recommended HTML attributes for the HTML tags are shown in bold.
Next: Page Structure
Back Up: Menu
HTML Page Structure
pagename.html
Purpose
Attributes
<?xml version="1.0" encoding="UTF-8"?>
xml declaration, recommended
version, encoding
<?xml-stylesheet type="text/xsl" href="/template.xsl"?>
stylesheet processing instruction, optional
type, href
<!DOCTYPE html>
document type declaration, recommended
PUBLIC, SYSTEM
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<html> top element tag, required
xmlnsmanifestversion
common
<head>
head section, required
profile
common
<title>...</title>
...other head section tags...
title tag, required
HTML Head Section Tags
common attributes
</head>
End of <head> section
<body>
...body tags...
<body> tag, required
HTML Body Tags
alinkbackgroundbgcolorlinkonafterprintonbeforeprintonhashchangeonmessageonofflineononlineonpopstateonredoonstorageonundotextvlink
common
</body>
End of body of HTML document
</html>
End of HTML document
Prev: Page 1
Back Up: Menu
Character
Named Entity
Decimal
Hexadecimal
" - double quotes
"
"
"
& - ampersand
&
&
&
' - apostrophe / single quote
'
'
'
< - less than sign
<
<
<
> - greater than sign
>
>
>
non-breaking space
 
 
¢ - cents sign
¢
¢
¢
© - copyright symbol
©
©
©
® - registered trademark
®
®
®
• - bullet
•
•
•
•
™ - trademark
™
™
™
Next: Misc.
Back Up: Menu
Miscellaneous
HTML Tag
Purpose
Usage
<!--...-->
comments
must not contain "--"
Next: Tags & Attributes
Prev: Char. Codes
Back Up: Menu
Tag and Attribute Coding
Definition:
Polyglot HTML Documents:HTML documents that can be parsed as either text/html or as an XML type such as application/xhtml+xml.
Tags
Properly Nested Tags
<p>...</p> <p>... <P>...</P>
<tr><td>...</td></tr> <tr><td>...</tr></td>
Empty Tags
<br/> <br>
<hr/> <hr>
<img src="example.png" alt="example"/>
<img src="example.png" alt="example">
Attributes
Quoted Attributes
<abbr title="Hypertext Markup Language">HTML</abbr>
<a href=http://www.ExampleOnly.com/> <!-- ambiguous -->
<a href="http://www.ExampleOnly.com/"> <!-- / is part of URL -->
<p id=back-to-top>
<p id="back-to-top">
Style Attributes
<table width="100%">
<table style="width: 100%">
<table class="wide">
Boolean Attributes
<option selected="selected"/>
<option selected/>
<option selected=""/>
<option selected="true"/>
<option selected="yes"/>
Definitions of Acronyms and Abbreviations
Defined term, not definition, in title attribute
A <dfn title="short for weblog">blog</dfn> is an online journal.
A <dfn title="blog">blog or weblog</dfn> is an online journal.
A <dfn>blog</dfn>, short for <dfn>weblog</dfn>, is an online journal.
<dfn> gets default title from an <abbr> tag that is its only content
<dfn><abbr title="National Association for Stock Car Auto Racing">NASCAR</abbr></dfn> sanctions many different motor races
Override default title on <dfn> when expanding acronyms
<dfn title="TLA"><abbr title="Three Letter Acronym">TLA</abbr></dfn> stands for "Three Letter Acronym"
or, look up the acronym in the Acronym Finder at Acronyms .net and just copy-and-paste the code
Next: Namespaces
Prev: Misc.
Back Up: Menu
Namespaces
Namespace URI Declaration
Purpose
xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml"
HTML
xmlns:mathml="http://www.w3.org/1998/Math/MathML"
MathML
xmlns:svg="http://www.w3.org/2000/svg"
SVG
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
XML schema instance document
"http://www.w3.org/XML/1998/namespace" (implicit)
XML
Next: <head> Tags
Prev: Tags & Attributes
Back Up: Menu
<head> Section Tags
HTML Tag
Purpose
Attributes
<base/>
base URL for other URLs in the document
hreftarget
<basefont>
base font, deprecated
<isindex>
input field to submit keyword-based query, deprecated
<link/>
reference to external resource
hrefrelcharsethreflangmediarevsizestargettitletype
common
<meta http-equiv="..."/>
HTTP header equivalent
http-equivcontentcharset
<meta name="..."/>
document metadata
namecontentcharsetscheme
common
<script>
dynamic HTML script
asynccharsetdeferlanguagesrctype
<style>
style definitions
mediatypescopedtitle
<title>
page title
common
Next: Metatags
Prev: Namespaces
Back Up: Menu
HTML Metatags
HTML Metatag
Purpose
Content
http-equiv="Cache-Control"
cache control
http-equiv="Content-Disposition"
embedded content or attachment
http-equiv="Content-Language"
equivalent to HTTPContent-Language header, deprecated
http-equiv="Content-Type"
content media type
http-equiv="Default-Style"
http-equiv="Expires"
cache expiration date
http-equiv="Refresh"
refresh or redirect
http-equiv="X-UA-Compatible"
user agent compatibility
name="author"
author
name="classification"
name="copyright"
copyright notice
name="description"
description
name="formatter"
name="generator"
name="google"
Google archive directive
name="googlebot"
Google robot directive
name="HandheldFriendly"
for pages designed for handheld devices
content="true"
name="keywords"
keywords
name="rating"
rating
name="robots"
robots directive
name="verify"
name="viewport"
viewport size for small-screen / handheld devices
Next: Attributes
Prev: <head> Tags
Back Up: Menu
Common Attributes
Attribute
Purpose
Example
accesskey="..."
single case-insensitive character to change focus, deprecated
class="..."
space-separated list of class names for CSS or dynamic selection
class="todo high" matches .todo and .high selectors in CSS
contenteditable="..."
New
contextmenu="..."
New
data-*="..."
New
author-defined attributes
dir="..."
draggable="..."
New
id="..."
hidden="..."
New
lang="..."
ISO 639-1 language code, ISO 3166-1 country code, variant
lang="en"lang="en-US"
spellcheck="..."
New
style="..."
inline styles separated by semicolons
tabindex="..."
title="..."
title
xml:lang="..."
same as lang
use lang instead, without the "xml:" prefixEvent Attributes
Attribute
Purpose
Example
onabort="..."
abort event
onbeforeonload="..."
before onload event
onbeforeunload="..."
before unload event
onblur="..."
lost focus event
onchange="..."
content changed event
onclick="..."
mouse clicked event
oncontextmenu="..."
context menu event
oncopy="..."
copy event
oncut="..."
cut event
ondblclick="..."
mouse double-clicked event
ondrag="..."
drag event
ondragend="..."
drag ended event
ondragenter="..."
drag entered event
ondragleave="..."
drag exited event
ondragover="..."
drag over event
ondragstart="..."
drag start event
ondrop="..."
drop event
onerror="..."
error event
onfocus="..."
gained focus event
ongesturechange="..."
gesture change event
ongestureend="..."
end of gesture event
ongesturestart="..."
start of gesture event
onkeydown="..."
key pressed down event
onkeypress="..."
key pressed event
onkeyup="..."
key released event
onload="..."
document loaded event
onmousedown="..."
mouse button pressed down event
onmousemove="..."
mouse moved event
onmouseout="..."
mouse cursor exited event
onmouseover="..."
mouse cursor entered event
onmouseup="..."
mouse button released event
onmousewheel="..."
mouse wheel rotated event
onmove="..."
move event
onorientationchange="..."
device orientation changed event
onpaste="..."
paste event
onreset="..."
form reset event
onresize="..."
resize event
onscroll="..."
scroll event
onselect="..."
select event
onsubmit="..."
form submit event
ontouchcancel="..."
touch cancelled event
ontouchend="..."
touch ended event
ontouchmove="..."
touch move event
onstouchstart="..."
touch started event
onunload="..."
document unloaded event
Next: Media Types
Prev: Metatags
Back Up: Menu
HTML Media Types and Expressions
Media Type
Description
all
for all device types, default
aural
for speech synthesizers
braille
for braille printers
handheld
for handheld devices such as cell phones, PDAs and other mobile Internet devices
print
for printers
projection
for projection displays
screen
for traditional computer-based web browsers
tty
for teletypes and other media with fixed-width-character output
tv
for televisions and similar devices with limited input capability
screen,handheld
comma-separated "or"-ed list
handheld and (min-width:200px)
expressions with media queries
Next: .htaccess
Prev: Attributes
Back Up: Menu
.htaccess
Directive
Purpose
DirectoryIndex /index.html
default page
ErrorDocument 404 /error.html
error page
AddType application/xhtml+xml;charset=utf-8 html
HTML 5 media type
Prev: Media Types
Back Up: Menu
<body> Tags
HTML Tag
Purpose
Attributes
<a href="..." ...>
hypertext link
href accesskeycharsetcoordshreflangmediapingrelrevshapetargettype
<a id="..."/>
../definitions/placemark link
(anchor)
id name
<abbr>
acronym or abbreviation
clear
common
<acronym>
acronyms, deprecated
<address>
contact information for ancestor <article> or <body>
common
<applet>
Java applets, deprecated
<area/>
area inside image maps
accesskeyaltcoordshrefhreflangmedianohrefpingrelshapetargettype
common
<article>
New
sectioning tag for main article
pubdate
common
<aside>
New
sectioning tag for sidebar
common
<audio>
New
embedded audio content
autobufferautoplaycontrolsloopsrc
common
<b>
bold keywords or other text with no extra importance
common
<bb>
New
type
common
<bdo>
bi-directional text override
dir
common
<bgsound>
background sound, deprecated
<big>
larger text, deprecated
<blockquote>
block of quoted text
cite
common
<br/>
line break
common
<button>
standalone pushbutton
accesskeyautofocusdisabledformformactionformenctypeformmethodformnovalidateformtargetnametypevalue
common
<canvas>
New
heightwidth
common
<caption>
table caption
align
common
<center>
centered blocks, deprecated
<cite>
citation
common
<code>
program code
common
<col/>
table column
aligncharcharoffspanvalignwidth
common
<colgroup>
group of table columns
aligncharcharoffspanvalignwidth
common
<command/>
New
accesskeycheckeddefaultdisabledhiddeniconlabelradiogrouptype
common
<datagrid>
New
disabled
common
<datalist>
New
common
<dd>
definition description
common
<del>
deleted text
citedatetime
common
<details>
New
open
common
<dialog>
New
common
<dir>
directory listing, deprecated
<div>
division
align
common
<dfn>
inline defined term
title="defined term"title="definition"
common
<dl>
definition list
compact
common
<dt>
term defined in list
common
<em>
emphasized text
common
<embed/>
New
heightsrctypewidth
common
<fieldset>
disabledformname
common
<figure>
New
common
<fn>
footnotes, deprecated
<font>
font, deprecated
<footer>
New
footer section
common
<form>
form
acceptaccept-charsetactiondataenctypemethodreplacetarget
common
<frame>
frames, deprecated
<frameset>
top level element for a web page with frames, deprecated
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
heading levels 1-6
align
common
<header>
New
header section
<hgroup>
New
group of headings for section
common
<hr/>
horizontal rule for a thematic break
alignnoshadesizewidth
common
<i>
italics for technical terms, phrases in other languages, etc.
common
<iframe>
inline frame
alignframeborderheightlongdescmarginheightmarginwidthnamesandboxseamlessscrollingsrcwidth
common
<img/>
image
alignaltborderheighthspaceismaplongdescnamesrcusemapvspacewidth
common
<input/>
input field or control
acceptaccesskeyalignaltautocompleteautofocuscheckeddisabledformformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminmultiplenamepatternplaceholderreadonlyrequiredsizesrcsteptypevaluewidth
common
<ins>
inserted text
citedatetime
common
<kbd>
keyboard input
common
<label>
label for form control
for
common
<legend>
accesskeyalign
common
<li>
list item
typevalue (<ol> only)
common
<mark>
New
mark selected text
common
<map>
image map
name
common
<menu>
menu list
compactlabeltype
common
<meter>
New
meter or gauge
highlowmaxminoptimumvalue
common
<nav>
New
navigation section
common
<noembed>
Alternate content to be displayed when the <embed/> tag is not supported, deprecated
No replacement needed since the embed tag has been standardized in HTML 5
<noframes>
Alternate content to be displayed when frames are not supported, deprecated
No replacement needed since frames have been removed from the HTML 5 standard
<noscript>
fallback content when scripting is disabled
common
<object>
embedded object
alignarchiveborderclassidcodebasecodetypedatadeclareheighthspaceobjectstandbytypeusemapvspacewidth
common
<ol>
ordered list
compactreversedstarttype
common
<optgroup>
option group
disabledlabel
common
<option>
option in selection list
disabledlabelselectedvalue
common
<output>
New
form
common
<p>
paragraph
align
common
<param/>
parameter for object
nametypevaluevaluetype
common
<pre>
preformatted text
width
common
<progress>
New
progress bar
maxvalue
common
<q>
quotation
cite
common
<rp>
New
parenthesized ruby text
common
<rt>
New
ruby text
common
<ruby>
New
ruby annotation
common
<s>
strike-through text, deprecated
<samp>
sample program code
common
<section>
New
section
cite
common
<select>
selection list
autofocusdatadisabledformmultiplename
common
<small>
smaller text for comments and legalese
common
<source/>
New
external media source
mediasrctype
common
<span>
inline group
common
<strike>
strike-through text, deprecated
<strong>
text with greater importance
common
<sub>
subscript
common
<sup>
superscript
common
<table>
table layout
alignbgcolorbordercellpaddingcellspacingframerulessummarywidth
common
<tbody>
table body
aligncharcharoffvalign
common
<td>
table cell
abbralignaxisbgcolorcharcharoffcolspanheadersheightnowraprowspanscopevalignwidth
common
<textarea>
text input area
accesskeyautofocuscolsdisabledformmaxlengthnameplaceholderreadonlyrequiredrowswrap
common
<tfoot>
table footer
aligncharcharoffvalign
common
<th>
table column heading
abbralignaxisbgcolorcharcharoffheightnowrapvalignwidth
common
<thead>
table heading
aligncharcharoffvalign
common
<time>
New
time and/or date
datetime
common
<tr>
table row
alignbgcolorcharcharoffvalign
common
<tt>
teletype text, deprecated
<u>
underlined text, deprecated
<ul>
unordered list
compacttype
common
<var>
variable
common
<video>
New
embedded video
autobufferautoplaycontrolsheightlooppostersrcwidth
common
<xmp>
example code using preformatted text, deprecated
Back Up: Menu