DEV Community

Lam Hoang
Lam Hoang

Posted on

HTML Cheat Sheet

HTML Cheat Sheet

A reminder of HTML elements. Full HTML Cheat Sheet

Minimal page

<!DOCTYPE html>
        <meta charset="UTF-8">
        <!-- content here -->


    <base href="base-url" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        /* CSS code */
    <script src="script.js"></script>
        // Javascript code
    <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">
tag element
title page title
base base url for all links
link link to external source
style CSS inside HTML page
script Javascript code
meta metadata
meta http-equiv="refresh" content="10" auto-refresh page in 10s

Text content


<h1>Main heading</h1>
<!-- etc -->
<h6>Level-6 heading</h6>
tag element
h1 main heading
h6 least important heading


Other line.</p>
<p>Other paragraph.</p>
<p>See the line above.</p>
tag element
p paragraph
br line break
hr horizontal line


<em>Formatting</em> is <strong>important</strong> !
(a+b)<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup> + 2ab
tag element
sub subscript
sup superscript
em emphasize
strong important
mark highlighted
small small
i italic
b bold


<cite>This book</cite> was written by this author.
<q cite="url">quotation</q>
<blockquote cite="url">
Lorem ipsum<br/>
Lorem ipsum
tag element
cite title of a work
q inline quotation
blockquote quotation



<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>
tag element
a hyperlink


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


tag element
div block-level element
span inline element


Unordered list

tag element
ul unordered list
li list item

Ordored list

tag element
ol ordered list
li list item

Definition list

tag element
dl definition list
dt term
dd definition


Basic table

    <th>heading 1</th>
    <th>heading 2</th>
    <td>line 1, column 1</td>
    <td>line 1, column 2</td>
    <td>line 2, column 1</td>
    <td>line 2, column 2</td>
tag element
table table
tr table row
th table heading
td table cell

Advanced table

    <col span="2" style="..." />
    <col style="..." />
        <th>heading 1</th>
        <th>heading 2</th>
        <th>heading 3</th>
        <th>footer 1</th>
        <th>footer 2</th>
        <th>footer 3</th>
        <td>line 1, column 1</td>
        <td>line 1, column 2</td>
        <td>line 1, column 3</td>
        <td>line 2, column 1</td>
        <td>line 2, column 2</td>
        <td>line 2, column 3</td>
tag element
caption caption
colgroup defines groups of columns
col defines column's properties
thead groups headings together
tfoot groups footers together
tbody groups other rows


<form action="url" method="post">
        <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/>

    <label>Your favorite color : <select name="color">

    <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">
tag element
form form
label label for input
fieldset group inputs together
legend legend 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
select drop-down list
option drop-down list item
optgroup group of drop-down list items
datalist autocompletion list
textarea large text input

HTML5 Semantic

Page layout

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

    Hello everybody, Welcome to my website !

        My article

    Writen by me

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

Copyright notice
tag element
header header of document or section
footer footer of document or section
section section
article article, forum post, blog post, comment
aside aside content related to surrounding content
nav navigation links

New elements

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

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

Downloading progress : <progress value="53" max="100"></progress>
Disk space : <meter value="62" min="10" max="350"></meter>
tag element
figure an illustration
figcaption caption of a figure element
details details that can be shown or hidden
summary visible heading of a details element
progress progress of a task
meter display a gauge
time machine-readable time indication

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.