Html5 Full Cheatsheet

  • Published: June 4, 2016

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
a Hyperlinks Visit my example page.
em Stress emphasis I must say I adore lemonade.
strong Importance This tea is very hot.
small Side comments These grapes are made into wine. Alcohol is addictive.
s Inaccurate text Price: £4.50 £2.00!
cite Titles of works The case Hugo v. Danielle is relevant here.
q Quotations The judge said You can drink water from the fish tank but advised against it.
dfn Defining instance The term organic food refers to food produced without synthetic chemicals.
abbr Abbreviations Organic food in Ireland is certified by the IOFGA.
data Machine-readable equivalent Available starting today! North Coast Organic Apple Cider
time Machine-readable equivalent of date- or time-related data Available starting on !
code Computer code The fruitdb program can be used for tracking fruit production.
var Variables If there are n fruit in the bowl, at least n÷2 will be ripe.
samp Computer output The computer said Unknown error -3.
kbd User input Hit F1 to continue.
sub Subscripts Water is H2O.
sup Superscripts The Hydrogen in heavy water is usually 2H.
i Alternative voice Lemonade consists primarily of Citrus limon.
b Keywords Take a lemon and squeeze it with a juicer.
u Annotations The mixture of apple juice and eldeflower juice is very pleasant.
mark Highlight Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
ruby , rb, rp, rt, rtc Ruby annotations OJ (Orange Juice)
bdi Text directionality isolation 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 "Juice"
span Other In French we call it sirop de sureau.
br Line break Simply Orange Juice Company
Apopka, FL 32703
U.S.A.
wbr Line breaking opportunity 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.
comments powered by Disqus

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

Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 ·