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.

ElementPurposeExample
aHyperlinksVisit my example page.
emStress emphasisI must say I adore lemonade.
strongImportanceThis tea is very hot.
smallSide commentsThese grapes are made into wine. Alcohol is addictive.
sInaccurate textPrice: £4.50 £2.00!
citeTitles of worksThe case Hugo v. Danielle is relevant here.
qQuotationsThe judge said You can drink water from the fish tank but advised against it.
dfnDefining instanceThe term organic food refers to food produced without synthetic chemicals.
abbrAbbreviationsOrganic food in Ireland is certified by the IOFGA.
dataMachine-readable equivalentAvailable starting today! North Coast Organic Apple Cider
timeMachine-readable equivalent of date- or time-related dataAvailable starting on !
codeComputer codeThe fruitdb program can be used for tracking fruit production.
varVariablesIf there are n fruit in the bowl, at least n÷2 will be ripe.
sampComputer outputThe computer said Unknown error -3.
kbdUser inputHit F1 to continue.
subSubscriptsWater is H2O.
supSuperscriptsThe Hydrogen in heavy water is usually 2H.
iAlternative voiceLemonade consists primarily of Citrus limon.
bKeywordsTake a lemon and squeeze it with a juicer.
uAnnotationsThe mixture of apple juice and eldeflower juice is very pleasant.
markHighlightElderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
ruby , rb, rp, rt, rtcRuby annotationsOJ (Orange Juice)
bdiText directionality isolationThe recommended restaurant is My Juice Café (At The Beach).
bdoText directionality formattingThe proposal is to write English, but in reverse order. "Juice" would become "Juice"
spanOtherIn French we call it sirop de sureau.
brLine breakSimply Orange Juice Company
Apopka, FL 32703
U.S.A.
wbrLine breaking opportunitywww.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 ·