Html5 Full Cheatsheet

Published: 4 Jun, 2016

Last modified: March 27, 2019

Tags Html , Cheatsheet , Html5 , Quickreference

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.
The body element

<!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.
The article element

<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.
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>

nav

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.
The nav element

<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.
the aside element

<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.
the h1-6 elements

<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.
The header element

<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.
The footer 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 November 12th!
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 H₂O.
sup	Superscripts	The Hydrogen in heavy water is usually ²H.
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

comments powered by Disqus

Articles

Html5 Full Cheatsheet

Except as otherwise noted, the content of this page is licensed under CC BY-NC-ND 4.0 . Terms and Policy.