Add Site or Add Page to Favorites
 

 HTML Cheat Sheet for Transition to HTML 5 

Clarify the meaning of the acronyms on your web site.

Acronym Dictionary

Acronym Finder

Get information on your favorite TV Shows at TV Series .com

Social Networking Web Sites


Printer-friendly PDF* format:

HTML Cheat Sheet for Transition to HTML 5

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.

HTML Page Structure

pagename.htmlPurposeAttributes
<?xml version="1.0" encoding="UTF-8"?>xml declaration, recommendedversion, encoding
<?xml-stylesheet type="text/xsl" href="/template.xsl"?>stylesheet processing instruction, optionaltype, href
<!DOCTYPE html>document type declaration, recommendedPUBLIC, SYSTEM
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"><html> top element tag, requiredxmlnsmanifestversioncommon
  <head>
head section, required
profilecommon
      <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
alinkbackgroundbgcolorlinkonafterprintonbeforeprintonhashchangeonmessageonofflineononlineonpopstateonredoonstorageonundotextvlinkcommon
  </body>End of body of HTML document 
</html>End of HTML document 

HTML Character Entities

Character Named EntityDecimal Hexadecimal
" - double quotes &quot; &#34; &#x22;
& - ampersand &amp; &#38; &#x26;
' - apostrophe / single quote&apos; &#39; &#x27;
< - less than sign &lt; &#60; &#x3c;
> - greater than sign&gt; &#62; &#x3e;
non-breaking space &nbsp; &#160; &#xa0;
¢ - cents sign &cent; &#162; &#xa2;
© - copyright symbol &copy; &#169; &#xa9;
® - registered trademark&reg; &#174; &#xae;
• - bullet &bull;&bullet;&#8226;&#x2022;
™ - trademark &trade;&#8482;&#x2122;

Miscellaneous

HTML TagPurposeUsage
<!--...-->commentsmust not contain "--"

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


Namespaces

Namespace URI DeclarationPurpose
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

<head> Section Tags

HTML TagPurposeAttributes
<base/>base URL for other URLs in the documenthreftarget
<basefont>base font, deprecated 
<isindex>input field to submit keyword-based query, deprecated 
<link/>reference to external resourcehrefrelcharsethreflangmediarevsizestargettitletypecommon
<meta http-equiv="..."/>HTTP header equivalenthttp-equivcontentcharset
<meta name="..."/>document metadatanamecontentcharsetschemecommon
<script>dynamic HTML scriptasynccharsetdeferlanguagesrctype
<style>style definitionsmediatypescopedtitle
<title>page titlecommon

HTML Metatags

HTML MetatagPurposeContent
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 devicescontent="true"
name="keywords"keywords 
name="rating"rating 
name="robots"robots directive 
name="verify"  
name="viewport"viewport size for small-screen / handheld devices 

Common Attributes

AttributePurposeExample
accesskey="..."single case-insensitive character to change focus, deprecated 
class="..."space-separated list of class names for CSS or dynamic selectionclass="todo high" matches .todo and .high selectors in CSS
contenteditable="..."New 
contextmenu="..."New 
data-*="..."Newauthor-defined attributes  
dir="..."  
draggable="..."New 
id="..."  
hidden="..."New 
lang="..."ISO 639-1 language code, ISO 3166-1 country code, variantlang="en"lang="en-US"
spellcheck="..."New 
style="..."inline styles separated by semicolons 
tabindex="..."  
title="..."title 
xml:lang="..."same as languse lang instead, without the "xml:" prefix

Event Attributes

AttributePurposeExample
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 

HTML Media Types and Expressions

Media TypeDescription
allfor all device types, default
auralfor speech synthesizers
braillefor braille printers
handheldfor handheld devices such as cell phones, PDAs and other mobile Internet devices
printfor printers
projectionfor projection displays
screenfor traditional computer-based web browsers
ttyfor teletypes and other media with fixed-width-character output
tvfor televisions and similar devices with limited input capability
screen,handheldcomma-separated "or"-ed list
handheld and (min-width:200px)expressions with media queries

.htaccess

DirectivePurpose
DirectoryIndex /index.htmldefault page
ErrorDocument 404 /error.htmlerror page
AddType application/xhtml+xml;charset=utf-8 htmlHTML 5 media type

<body> Tags

HTML TagPurposeAttributes
<a href="..." ...>hypertext link href accesskeycharsetcoordshreflangmediapingrelrevshapetargettype
<a id="..."/>../definitions/placemark link(anchor) id name
<abbr>acronym or abbreviationclearcommon
<acronym>acronyms, deprecated 
<address>contact information for ancestor <article> or <body>common
<applet>Java applets, deprecated 
<area/>area inside image mapsaccesskeyaltcoordshrefhreflangmedianohrefpingrelshapetargettypecommon
<article>Newsectioning tag for main article pubdatecommon
<aside>Newsectioning tag for sidebar common
<audio>New embedded audio content autobufferautoplaycontrolsloopsrccommon
<b>bold keywords or other text with no extra importancecommon
<bb>Newtypecommon
<bdo>bi-directional text overridedircommon
<bgsound>background sound, deprecated 
<big>larger text, deprecated 
<blockquote>block of quoted textcitecommon
<br/>line breakcommon
<button>standalone pushbuttonaccesskeyautofocusdisabledformformactionformenctypeformmethodformnovalidateformtargetnametypevaluecommon
<canvas>Newheightwidthcommon
<caption>table captionaligncommon
<center>centered blocks, deprecated 
<cite>citationcommon
<code>program codecommon
<col/>table columnaligncharcharoffspanvalignwidthcommon
<colgroup>group of table columnsaligncharcharoffspanvalignwidthcommon
<command/>Newaccesskeycheckeddefaultdisabledhiddeniconlabelradiogrouptypecommon
<datagrid>Newdisabledcommon
<datalist>Newcommon
<dd>definition descriptioncommon
<del>deleted textcitedatetimecommon
<details>Newopencommon
<dialog>Newcommon
<dir>directory listing, deprecated 
<div>divisionaligncommon
<dfn>inline defined termtitle="defined term"title="definition"common
<dl>definition listcompactcommon
<dt>term defined in listcommon
<em>emphasized textcommon
<embed/>Newheightsrctypewidthcommon
<fieldset> disabledformnamecommon
<figure>Newcommon
<fn>footnotes, deprecated 
<font>font, deprecated 
<footer>New footer section common
<form>formacceptaccept-charsetactiondataenctypemethodreplacetargetcommon
<frame>frames, deprecated 
<frameset>top level element for a web page with frames, deprecated 
<h1><h2><h3><h4><h5><h6>heading levels 1-6aligncommon
<header>New header section  
<hgroup>New group of headings for section common
<hr/>horizontal rule for a thematic breakalignnoshadesizewidthcommon
<i>italics for technical terms, phrases in other languages, etc.common
<iframe>inline framealignframeborderheightlongdescmarginheightmarginwidthnamesandboxseamlessscrollingsrcwidthcommon
<img/>imagealignaltborderheighthspaceismaplongdescnamesrcusemapvspacewidthcommon
<input/>input field or controlacceptaccesskeyalignaltautocompleteautofocuscheckeddisabledformformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminmultiplenamepatternplaceholderreadonlyrequiredsizesrcsteptypevaluewidthcommon
<ins>inserted textcitedatetimecommon
<kbd>keyboard inputcommon
<label>label for form controlforcommon
<legend> accesskeyaligncommon
<li>list itemtypevalue (<ol> only) common
<mark>New mark selected text common
<map>image mapnamecommon
<menu>menu listcompactlabeltypecommon
<meter>New meter or gauge highlowmaxminoptimumvaluecommon
<nav>New navigation section common
<noembed>Alternate content to be displayed when the <embed/> tag is not supported, deprecatedNo replacement needed since the embed tag has been standardized in HTML 5
<noframes>Alternate content to be displayed when frames are not supported, deprecatedNo replacement needed since frames have been removed from the HTML 5 standard
<noscript>fallback content when scripting is disabledcommon
<object>embedded objectalignarchiveborderclassidcodebasecodetypedatadeclareheighthspaceobjectstandbytypeusemapvspacewidthcommon
<ol>ordered listcompactreversedstarttypecommon
<optgroup>option groupdisabledlabelcommon
<option>option in selection listdisabledlabelselectedvaluecommon
<output>Newformcommon
<p>paragraphaligncommon
<param/>parameter for objectnametypevaluevaluetypecommon
<pre>preformatted textwidthcommon
<progress>New progress bar maxvaluecommon
<q>quotationcitecommon
<rp>Newparenthesized ruby text common
<rt>Newruby text common
<ruby>Newruby annotation common
<s>strike-through text, deprecated 
<samp>sample program codecommon
<section>New section citecommon
<select>selection listautofocusdatadisabledformmultiplenamecommon
<small>smaller text for comments and legalesecommon
<source/>New external media source mediasrctypecommon
<span>inline groupcommon
<strike>strike-through text, deprecated 
<strong>text with greater importancecommon
<sub>subscriptcommon
<sup>superscriptcommon
<table>table layoutalignbgcolorbordercellpaddingcellspacingframerulessummarywidthcommon
<tbody>table bodyaligncharcharoffvaligncommon
<td>table cellabbralignaxisbgcolorcharcharoffcolspanheadersheightnowraprowspanscopevalignwidthcommon
<textarea>text input areaaccesskeyautofocuscolsdisabledformmaxlengthnameplaceholderreadonlyrequiredrowswrapcommon
<tfoot>table footeraligncharcharoffvaligncommon
<th>table column headingabbralignaxisbgcolorcharcharoffheightnowrapvalignwidthcommon
<thead>table headingaligncharcharoffvaligncommon
<time>New time and/or date datetimecommon
<tr>table rowalignbgcolorcharcharoffvaligncommon
<tt>teletype text, deprecated 
<u>underlined text, deprecated 
<ul>unordered listcompacttypecommon
<var>variablecommon
<video>New embedded video autobufferautoplaycontrolsheightlooppostersrcwidthcommon
<xmp>example code using preformatted text, deprecated 

Last updated Sunday September 19, 2010

You are currently viewing this page in HTML 5 non-XML* format (* see Clicklets for more infomation). This document is also available in XHTML 1 Style Sheet*XHTML 1* XML*HTML 5 Style Sheet*HTML 5 XML*HTML 4* XHTML Mobile* WML Mobile* and printer-friendly PDF* formats. This is accomplished with Single Source Publishing, a content management system that uses templates in XSLT style sheets provided by XML Styles .com to transform the source content for various content delivery channels. There is also RDF* metadata that describes the content of this document.


Copyright © 2010 Accilent® Corp. Alteration of content, including addition of any function such as hypertext links or pop-up advertising, or interference with the hypertext links or other functions of this site is expressly prohibited.

DISCLAIMER: All information, links, forms, applications and other items on this site or obtained from it are provided AS IS, WITHOUT WARRANTY OF ANY KIND EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.