Add Site or Add Page to Favorites
  

 HTML Cheat Sheet for Transition to HTML 5 
 
HomeTutorialHTML5 TagsAttributesCSS StylesMetatagsCheat SheetExamplesDefinitionsDifferencesAvoidHTML5 FAQsRSS FeedsHelp

    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

    Page StructureChar. CodesMisc.Tags & AttributesNamespaces<head> TagsMetatagsAttributesMedia 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.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 

    back to top

    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.