Add Site or Add Page to Favorites
   

 HTML Cheat Sheet for Transition to HTML 5 
 
Home Tutorial HTML5 Tags Attributes CSS Styles Metatags Cheat Sheet Examples Definitions Differences Avoid HTML5 FAQs RSS Feeds Help

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.

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 xmlns manifest version 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 		alink background bgcolor link onafterprint onbeforeprint onhashchange onmessage onoffline ononline onpopstate onredo onstorage onundo text vlink common
  </body> End of body of HTML document  
</html> End of HTML document  

HTML Character Entities

Character Named Entity Decimal 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 Tag Purpose Usage
<!--...--> comments must 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 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

<head> Section Tags

HTML Tag Purpose Attributes
<base/> base URL for other URLs in the document href target
<basefont> base font, deprecated  
<isindex> input field to submit keyword-based query, deprecated  
<link/> reference to external resource href rel charset hreflang media rev sizes target title type common
<meta http-equiv="..."/> HTTP header equivalent http-equiv content charset
<meta name="..."/> document metadata name content charset scheme common
<script> dynamic HTML script async charset defer language src type
<style> style definitions media type scoped title
<title> page title common

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

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:" prefix

Event 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  

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

.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

<body> Tags

HTML Tag Purpose Attributes
<a href="..." ...> hypertext link href accesskey charset coords hreflang media ping rel rev shape target type
<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 accesskey alt coords href hreflang media nohref ping rel shape target type common
<article> New sectioning tag for main article pubdate common
<aside> New sectioning tag for sidebar common
<audio> New embedded audio content autobuffer autoplay controls loop src 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 accesskey autofocus disabled form formaction formenctype formmethod formnovalidate formtarget name type value common
<canvas> New height width common
<caption> table caption align common
<center> centered blocks, deprecated  
<cite> citation common
<code> program code common
<col/> table column align char charoff span valign width common
<colgroup> group of table columns align char charoff span valign width common
<command/> New accesskey checked default disabled hidden icon label radiogroup type common
<datagrid> New disabled common
<datalist> New common
<dd> definition description common
<del> deleted text cite datetime 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 height src type width common
<fieldset>   disabled form name common
<figure> New common
<fn> footnotes, deprecated  
<font> font, deprecated  
<footer> New footer section common
<form> form accept accept-charset action data enctype method replace target 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 align noshade size width common
<i> italics for technical terms, phrases in other languages, etc. common
<iframe> inline frame align frameborder height longdesc marginheight marginwidth name sandbox seamless scrolling src width common
<img/> image align alt border height hspace ismap longdesc name src usemap vspace width common
<input/> input field or control accept accesskey align alt autocomplete autofocus checked disabled form formaction formenctype formmethod formnovalidate formtarget height list max maxlength min multiple name pattern placeholder readonly required size src step type value width common
<ins> inserted text cite datetime common
<kbd> keyboard input common
<label> label for form control for common
<legend>   accesskey align common
<li> list item type value (<ol> only) common
<mark> New mark selected text common
<map> image map name common
<menu> menu list compact label type common
<meter> New meter or gauge high low max min optimum value 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 align archive border classid codebase codetype data declare height hspace object standby type usemap vspace width common
<ol> ordered list compact reversed start type common
<optgroup> option group disabled label common
<option> option in selection list disabled label selected value common
<output> New form common
<p> paragraph align common
<param/> parameter for object name type value valuetype common
<pre> preformatted text width common
<progress> New progress bar max value 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 autofocus data disabled form multiple name common
<small> smaller text for comments and legalese common
<source/> New external media source media src type 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 align bgcolor border cellpadding cellspacing frame rules summary width common
<tbody> table body align char charoff valign common
<td> table cell abbr align axis bgcolor char charoff colspan headers height nowrap rowspan scope valign width common
<textarea> text input area accesskey autofocus cols disabled form maxlength name placeholder readonly required rows wrap common
<tfoot> table footer align char charoff valign common
<th> table column heading abbr align axis bgcolor char charoff height nowrap valign width common
<thead> table heading align char charoff valign common
<time> New time and/or date datetime common
<tr> table row align bgcolor char charoff valign common
<tt> teletype text, deprecated  
<u> underlined text, deprecated  
<ul> unordered list compact type common
<var> variable common
<video> New embedded video autobuffer autoplay controls height loop poster src width common
<xmp> example code using preformatted text, deprecated  

back to top

Last updated Sunday September 19, 2010

You are currently viewing this page in HTML 5 XML* format (* see Clicklets for more infomation). This document is also available in XML* HTML 5 non-XML*XHTML 1 Style Sheet*HTML 5 Style Sheet* XHTML 1* 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.