Show Menu

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)
header of the website (read by webbro­wser)
body of the website (readable elements)
<!-- this is a comment on 1 or multiple line -->

Content sectioning

header of the website
main content (directly or indirectly related to the main topic)
footer of the website
self-c­ont­ained compos­ition in a document
content indirectly related to the main document's content
provides contact inform­ation for a person or an organi­sation
6 levels of section <h1> is the highest level and <h6> the lowest
navigation link
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">
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 of the website

Inline text semantics

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

Text content

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

Web components

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

image and multimedia

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

Intera­ctive elements

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

Embedded content

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


draw graphics and animations
will show if JS is turned off/not supported
add JS code

Demarc­ating edits

deleted text from a document (used when rendering "­track change­s")
added text from a document (used when rendering "­track change­s")


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

table content

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

SVG and MathML

defines a new coordinate system and viewport
top-level MathML element

others HTML5 cheat sheet

Obsolete and deprecated elements