Home

Awesome

HTML Cheat Sheet

A reminder of HTML elements.

Table of Contents

Minimal page

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <!-- content here -->
    </body>
</html>

Head

<head>
    <title>Title</title>
    <base href="base-url" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /* CSS code */
    </style>
    <script src="script.js"></script>
    <script>
        // Javascript code
    </script>
    <meta charset="UTF-8">
    <meta name="keywords" content="keywords">
    <meta name="description" content="description">
    <meta name="author" content="name">
    <meta http-equiv="refresh" content="10">
</head>
tagelement
titlepage title
basebase url for all links
linklink to external source
styleCSS inside HTML page
scriptJavascript code
metametadata
meta http-equiv="refresh" content="10"auto-refresh page in 10s

Text content

Headings

<h1>Main heading</h1>
<!-- etc -->
<h6>Level-6 heading</h6>
tagelement
h1main heading
h6least important heading

Paragraphs

<p>Paragraph.<br/>
Other line.</p>
<p>Other paragraph.</p>
<hr/>
<p>See the line above.</p>
tagelement
pparagraph
brline break
hrhorizontal line

Formatting

<em>Formatting</em> is <strong>important</strong> !
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab
tagelement
subsubscript
supsuperscript
ememphasize
strongimportant
markhighlighted
smallsmall
iitalic
bbold

Quotes

<cite>This book</cite> was written by this author.
<q cite="url">quotation</q>
<blockquote cite="url">
Lorem ipsum<br/>
Lorem ipsum
</blockquote>
tagelement
citetitle of a work
qinline quotation
blockquotequotation

Content

Links

<a href="url">link</a>
<a href="url" target=_blank>open in a new window</a>

<a href="#comments">watch comments</a>
<h2 id="comments">comments</h2>
tagelement
ahyperlink

Images

<img src="image.png" alt="description" width="300" height="200" />
tagelement
imgimage

Blocks

<div>block</div>
<span>inline</span>
tagelement
divblock-level element
spaninline element

Lists

Unordered list

<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
tagelement
ulunordered list
lilist item

Ordored list

<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ol>
tagelement
olordered list
lilist item

Definition list

<dl>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
    <dt>term</dt><dd>definition</dd>
</dl>
tagelement
dldefinition list
dtterm
dddefinition

Tables

Basic table

<table>
<tr>
    <th>heading 1</th>
    <th>heading 2</th>
</tr>
<tr>
    <td>line 1, column 1</td>
    <td>line 1, column 2</td>
</tr>
<tr>
    <td>line 2, column 1</td>
    <td>line 2, column 2</td>
</tr>
</table>
tagelement
tabletable
trtable row
thtable heading
tdtable cell

Advanced table

<table>
<caption>caption</caption>
<colgroup>
    <col span="2" style="..." />
    <col style="..." />
</colgroup>
<thead>
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
        <th>heading 3</th>
    </tr>
</thead>
<tfoot>
    <tr>
        <th>footer 1</th>
        <th>footer 2</th>
        <th>footer 3</th>
    </tr>
</tfoot>
<tbody>
    <tr>
        <td>line 1, column 1</td>
        <td>line 1, column 2</td>
        <td>line 1, column 3</td>
    </tr>
    <tr>
        <td>line 2, column 1</td>
        <td>line 2, column 2</td>
        <td>line 2, column 3</td>
    </tr>
</tbody>
</table>
tagelement
captioncaption
colgroupdefines groups of columns
coldefines column's properties
theadgroups headings together
tfootgroups footers together
tbodygroups other rows

Forms

<form action="url" method="post">
    <fieldset>
        <legend>Who are you ?</legend>
        <label>Login :<input type="text" name="login" /></label><br/>
        <label for="pswd">Password :</label><input type="password" name="password" id="pswd" /><br/>
        <input type="radio" name="sex" value="male" />Male<br/>
        <input type="radio" name="sex" value="female" />Female<br/>
    </fieldset>
    
    <label>Your favorite color : <select name="color">
        <option>red</option>
        <option>green</option>
        <option>blue</option>
    </select></label>
    
    <input type="checkbox" name="available" value="monday" />Monday<br/>
    <input type="checkbox" name="available" value="tuesday" />Tuesday<br/>
    
    <textarea name="comments" rows="10" cols="30" placeholder="Write your comments here"><textarea/>
    
    <input type="submit" value="Button text">
</form>
tagelement
formform
labellabel for input
fieldsetgroup inputs together
legendlegend for fieldset
input type="text"text input
input type="password"password input
input type="radio"radio button
input type="checkbox"checkbox
input type="submit"send form
selectdrop-down list
optiondrop-down list item
optgroupgroup of drop-down list items
datalistautocompletion list
textarealarge text input

HTML5 Semantic

Page layout

<header>My website</header>
<nav>
    <a href="page1">Page 1</a>
    <a href="page2">Page 2</a>
    <a href="page3">Page 3</a>
</nav>

<section>
    Hello everybody, Welcome to my website !
</section>

<article>
    <header>
        <h2>Title</h2>
    </header>
    <p>
        My article
    </p>
</article>

<aside>
    Writen by me
</aside>

<section id="comments">
    <article>Comment 1</article>
    <article>Comment 2</article>
</section>

<footer>
Copyright notice
</footer>
tagelement
headerheader of document or section
footerfooter of document or section
sectionsection
articlearticle, forum post, blog post, comment
asideaside content related to surrounding content
navnavigation links

New elements

<figure>
    <img src="image.png" alt="figure 1" />
    <figcaption>Figure 1</figcaption>
</figure>

<details>
    <summary>Declaration of M. X on <time datetime="2013-12-25">Christmas day</time></summary>
    <p>M. X said...</p>
</details>

Downloading progress : <progress value="53" max="100"></progress>
Disk space : <meter value="62" min="10" max="350"></meter>
tagelement
figurean illustration
figcaptioncaption of a figure element
detailsdetails that can be shown or hidden
summaryvisible heading of a details element
progressprogress of a task
meterdisplay a gauge
timemachine-readable time indication