Show Menu
Cheatography

HTML5 cheat sheet with most of the available elements

This is a draft cheat sheet. It is a work in progress and is not finished yet.

basic elements

<!d­octype html>
explain the file format (HTML)
<head>
</head>
header of the website (read by webbro­wser)
<body>
</body>
body of the website (readable elements)
<!-- this is a comment on 1 or multiple line -->
comment

Content sectioning

<header>
</header>
header of the website
<main>
</main>
main content (directly or indirectly related to the main topic)
<footer>
</footer>
footer of the website
<article>
</article>
self-c­ont­ained compos­ition in a document
<aside>
</aside>
content indirectly related to the main document's content
<address>
</address>
provides contact inform­ation for a person or an organi­sation
<h1></h1>
to
<h6></h6>
6 levels of section <h1> is the highest level and <h6> the lowest
<nav>
</nav>
navigation link
<section>
</section>
generic section of a readable element

head part (Document metadata)

<link rel="st­yle­she­et" href="s­tyl­e.c­ss">
link external CSS file
<script src="myscripts.js">
</script>
link external JS* file
<meta charse­t="U­TF-­8">
define the character
<meta name="v­iew­por­t" conten­t="w­idt­h=d­evi­ce-­width, initia­l-s­cal­e=1.0">
set the viewport on every devices
<me­ta>more info
HTML elements that cannot be repres­ented by others HTML elements
<base href="h­ttp­s:/­/ww­w.m­yUR­L.c­om/­" target­="_b­lan­k">
Base URL of a page
<title>
</title>
title of the website

Inline text semantics

<a href="URL">
</a>
create an hyperlink
<abbr>
</abbr>
represents an abbrev­iation or acronym
<b>
</b>
draw the reader's attention to the element's content
<bdi>
</bdi>
element tells the browser's bidire­ctional algorithm to treat the text it contains in isolation from its surrou­nding text
<bdo>
</bdo>
element overrides the current direct­ion­ality of text, so that the text within is rendered in a different direction.
<br>
line break
<cite>
</cite>
a quote
<code>
</code>
show some code
<data>
</data>
show a content with a machin­e-r­eadable transl­ation
<dfn>
</dfn>
indicate the term being defined within the context of a sentence
<em>
</em>
marks text that has stress emphasis (important text)
<i>
</i>
range of text that is set off from the normal text
<kbd>
</kbd>
inline text denoting textual user input
<mark>
</mark>
marked or highli­ghted a text
<q>
</q>
short quotations that don't require paragraph breaks
<rp>
</rp>
provide fall-back parent­heses for browsers that do not support display of ruby annota­tions using the <ru­by> element
<rt>
</rt>
ruby text component of a ruby annotation
<ruby>
</ruby>
small rendered annota­tions
<s>
</s>
format for element no longer relevant
<samp>
</samp>
quote output from a program
<small>
</small>
change element size
<span>
</span>
generic container for phrasing content
<strong>
</strong>
elements with strong importance
<sub>
</sub>
text which should be displayed as subscript for solely typogr­aphical reasons
<sup>
</sup>
text which is to be displayed as supers­cript for solely typogr­aphical reasons
<time>
</time>
indicate a specific period in time
<u>
</u>
mark text as having some form of non-te­xtual annotation applied.
<var>
</var>
name of a variable in a mathem­atical expression or a progra­mming context
<wb­r>
represents a word break opport­unity
 

Text content

<div>
</div>
generic container for flow content
<bl­ock­quote cite="URL">
</blockquote>
external quotation
<hr>
thematic break between paragr­aph­-el­ements
<p>
</p>
a paragraph
<pre>
</pre>
represents prefor­matted text exactly as written in the HTML file
<li>
</li>
represent an item in a list, used with <ol> or <ul>
<ol>
</ol>
render a list of items as a numbered list
<ul>
</ul>
render a list of items as a bulleted list
<menu>
</menu>
altern­ative to <ul> for intera­ctive list of items
<fi­gur­e><­/fi­gur­e>
self-c­ont­ained content
<figcaption>
</figcaption>
caption or legend describing a parent element <fi­gur­e>
<dl>
</dl>
a descri­ption list, used with <dt> <dd>
<dt>
</dt>
"­hea­d" of the descri­ption, what will be describe
<dd>
</dd>
"­bod­y" of the descri­ption, the descri­ption

Web components

<slot>
</slot>
a placeh­older inside a web component that you can fill with your own markup
<template>
</template>
make the element render after a page load with JS code

image and multimedia

<im­g>
import a picture
<video>
</video>
create a video media control
<audio>
</audio>
create an audio media control
<tr­ack>
child of <au­dio> and <vi­deo>
<map>
</map>
define a clickable map, use with <ar­ea> for each clickable area
<ar­ea>
clickable areas inside a <ma­p> element

Intera­ctive elements

<di­alo­g>
represents a dialog box or other intera­ctive component
<details>
</details>
create a widget with (open/­close) state
a <su­mma­ry> is mandatory
<summary>
</summary>
summary of caption or legend for <de­tai­ls>

Embedded content

<em­bed>
embeds external content
<iframe>
</iframe>
embedding another HTML page into the current one
<object>
</object>
represents an external resource
<portal>
</portal>
enables the embedding of another HTML page into the current one for the purposes of allowing smoother navigation into new pages.
<so­urc­e>
specify the source of a media element, used with <au­dio> <vi­deo> <pi­ctu­re>
<picture>
</picture>
import a picture

Scripting

<canvas>
</canvas>
draw graphics and animations
<noscript>
</noscript>
will show if JS is turned off/not supported
<script>
</script>
add JS code

Demarc­ating edits

<del>
</del>
deleted text from a document (used when rendering "­track change­s")
<ins>
</ins>
added text from a document (used when rendering "­track change­s")
 

Forms

<form>
</form>
create a form
<button>
</button>
a button
<meter>
</meter>
meter of a scalar value
<output>
</output>
output result of a program
<progress>
</progress>
an indicator showing the completion progress of a task
<textarea>
</textarea>
when users need to input a sizeable amount of text
<in­put>
get an input from the user
<label>
</label>
caption for an <in­put>
<datalist>
</datalist>
a list containing multiple <op­tio­n> to choose
from (can chose a given option)
<select>
</select>
a selection of multiples options
(must chose a given option)
<optgroup>
</optgroup>
a grouping of options within <se­lec­t>/­<da­tal­ist>
<option>
</option>
an option inside a <se­lec­t>/­<da­tal­ist>
<fieldset>
</fieldset>
a set of several controls
<legend>
</legend>
captio­n(t­itle) for a <fi­eld­set>

table content

<table>
</table>
create a table
<thead>
</thead>
head of a table
<tbody>
</tbody>
body of a table
<tfoot>
</tfoot>
foot of a table
<caption>
</caption>
caption (or) title of a table
<colgroup>
</colgroup>
defines a group of columns within a table
parent of <co­l>
<co­l>
column within a table
<tr>
</tr>
row of cells in a table, parent of <td> <th>
<td>
</td>
"­hea­d" of a cell table
<th>
</th>
"­bod­y" of a cell table

SVG and MathML

<dv­g>
defines a new coordinate system and viewport
<math>
</math>
top-level MathML element

others HTML5 cheat sheet

Obsolete and deprecated elements

<ac­ron­ym>
<ap­ple­t>
<bg­sou­nd>
<bi­g>
<bl­ink>
<ce­nte­r>
<co­nte­nt>
<di­r>
<fo­nt>
<fr­ame>
<fr­ame­set>
<im­age>
<ke­yge­n>
<ma­rqu­ee>
<me­nui­tem>
<no­br>
<no­emb­ed>
<no­fra­mes>
<pa­ram>
<pl­ain­tex­t>
<rb>
<rt­c>
<sh­ado­w>
<sp­ace­r>
<st­rik­e>
<tt>
<xm­p>