Full HTML 5 cheatsheet. Quick reference for sections and elements
summary, with short explanations and usage examples.

Overview

This is a table of all the elements of HTML 5, based in the summaries provided in the official HTML 5 W3C Recommendation.

HTML5 SECTIONS

Quick reference based in HTML5 Sections

body

The body element represents the content of the document.

<!DOCTYPE HTML>
<html>
 <head> <title>Steve Hill's Home Page</title> </head>
 <body> <p>Hard Trance is My Life.</p> </body>
</html>

article

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

<article>
 <img src="/tumblr_masqy2s5yn1rzfqbpo1_500.jpg" alt="Yellow smiley face with the caption 'masif'">
 <p>My fave Masif tee so far!</p>
 <footer>Posted 2 days ago</footer>
</article>
<article>
 <img src="/tumblr_m9tf6wSr6W1rzfqbpo1_500.jpg" alt="">
 <p>Happy 2nd birthday Masif Saturdays!!!</p>
 <footer>Posted 3 weeks ago</footer>
</article>

section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

<h1>Biography</h1>
<section>
 <h1>The facts</h1>
 <p>1500+ shows, 14+ countries</p>
</section>
<section>
 <h1>2010/2011 figures per year</h1>
 <p>100+ shows, 8+ countries</p>
</section>

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<nav>
 <ul>
  <li><a href="/">Home</a>
  <li><a href="/biog.html">Bio</a>
  <li><a href="/discog.html">Discog</a>
 </ul>
</nav>

aside

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

<h1>Music</h1>
<p>As any burner can tell you, the event has a lot of trance.</p>
<aside>You can buy the music we played at our <a href="buy.html">playlist page</a>.</aside>
<p>This year we played a kind of trance that originated in Belgium, Germany, and the Netherlands in the mid 90s.</p>

h1–h6 A section heading

These elements represent headings for their sections.

<h1>The Guide To Music On The Playa</h1>
<h2>The Main Stage</h2>
<p>If you want to play on a stage, you should bring one.</p>
<h2>Amplified Music</h2>
<p>Amplifiers up to 300W or 90dB are welcome.</p>

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.

<article>
 <header>
  <h1>Hard Trance is My Life</h1>
  <p>By DJ Steve Hill and Technikal</p>
 </header>
 <p>The album with the amusing punctuation has red artwork.</p>
</article>

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.

<article>
 <h1>Hard Trance is My Life</h1>
 <p>The album with the amusing punctuation has red artwork.</p>
 <footer>
  <p>Artists: DJ Steve Hill and Technikal</p>
 </footer>
</article>

TEXT LEVEL SEMANTICS

Quick reference based in HTML 5 text level semantics.

Element Purpose Example Output
a Hyperlinks Visit my <a href="http://example.com">example</a> page. Visit my example page.
em Stress emphasis I must say I <em>adore</em> lemonade. I must say I adore lemonade.
strong Importance This tea is <strong>very hot</strong>. This tea is very hot.
small Side comments These grapes are made into wine. <small>Alcohol is addictive.</small> These grapes are made into wine. Alcohol is addictive.
s Inaccurate text Price: <s>£4.50</s> £2.00! Price: £4.50 £2.00!
cite Titles of works The case <cite>Hugo v. Danielle</cite> is relevant here. The case Hugo v. Danielle is relevant here.
q Quotations The judge said <q>You can drink water from the fish tank</q> but advised against it. The judge said You can drink water from the fish tank but advised against it.
dfn Defining instance The term <dfn>organic food</dfn> refers to food produced without synthetic chemicals. The term organic food refers to food produced without synthetic chemicals.
abbr Abbreviations Organic food in Ireland is certified by the <abbr title="Irish Organic Farmers and Growers Association">IOFGA</abbr>. Organic food in Ireland is certified by the IOFGA.
data Machine-readable equivalent Available starting today! <data value="UPC:022014640201">North Coast Organic Apple Cider</data> Available starting today! North Coast Organic Apple Cider
time Machine-readable equivalent of date- or time-related data Available starting on <time datetime="2011-11-12">November 12th</time>! Available starting on !
code Computer code The <code>fruitdb</code> program can be used for tracking fruit production. The fruitdb program can be used for tracking fruit production.
var Variables If there are <var>n</var> fruit in the bowl, at least <var>n</var>÷2 will be ripe. If there are n fruit in the bowl, at least n÷2 will be ripe.
samp Computer output The computer said <samp>Unknown error -3</samp>. The computer said Unknown error -3.
kbd User input Hit <kbd>F1</kbd> to continue. Hit F1 to continue.
sub Subscripts Water is H<sub>2</sub>O. Water is H2O.
sup Superscripts The Hydrogen in heavy water is usually <sup>2</sup>H. The Hydrogen in heavy water is usually 2H.
i Alternative voice Lemonade consists primarily of <i>Citrus limon</i>. Lemonade consists primarily of Citrus limon.
b Keywords Take a <b>lemon</b> and squeeze it with a <b>juicer</b>. Take a lemon and squeeze it with a juicer.
u Annotations The mixture of apple juice and <u class="spelling">eldeflower</u> juice is very pleasant. The mixture of apple juice and eldeflower juice is very pleasant.
mark Highlight Elderflower cordial, with one <mark>part</mark> cordial to ten <mark>part</mark>s water, stands a<mark>part</mark> from the rest. Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
ruby , rb, rp, rt, rtc Ruby annotations <ruby> <rb>OJ <rp>(<rtc><rt>Orange Juice</rtc><rp>)</ruby> OJ (Orange Juice</rtc>)</ruby>
bdi Text directionality isolation The recommended restaurant is <bdi lang="">My Juice Café (At The Beach)</bdi>. The recommended restaurant is My Juice Café (At The Beach).
bdo Text directionality formatting The proposal is to write English, but in reverse order. "Juice" would become "<bdo dir=rtl>Juice</bdo>" The proposal is to write English, but in reverse order. “Juice” would become “<bdo dir=rtl>Juice</bdo>”
span Other In French we call it <span lang="fr">sirop de sureau</span>. In French we call it sirop de sureau.
br Line break Simply Orange Juice Company<br>Apopka, FL 32703<br>U.S.A. Simply Orange Juice Company
Apopka, FL 32703
U.S.A.
wbr Line breaking opportunity www.simply<wbr>orange<wbr>juice.com www.simplyorangejuice.com
Uruguay
Marcelo Canina
I'm Marcelo Canina, a developer from Uruguay. I build websites and web-based applications from the ground up and share what I learn here.