HTML Cheat Sheet
Desktop View 🖥

Characters

Copy-paste the most common special characters from here.
 
á
à
â
ä
ã
å
&
<
>
"
'
«
»
$
¢
£
¥
©
®
§
@
+
×
÷
=
¼
½
¾
!
?
🙂
😀
😊
😔
🌦
🌜
🌻
🍩
🍻
🍔
🎭
🏊
🏕
🐵
🐺
🐾
👀
👍
👎
👦
👪
👫
💀
💔
💩
💪
💰
💾
📁
📌
🔑
🔫
🚧
🛠
🛒
more...

Color Picker

Find the hex codes easily.

Red

CD5C5C
F08080
FA8072
E9967A
FFA07A
DC143C
FF0000
B22222
8B0000

Pink

FFC0CB
FFB6C1
FF69B4
FF1493
C71585
DB7093

Orange

FFA07A
FF7F50
FF6347
FF4500
FF8C00
FFA500

Yellow

FFD700
FFFF00
FFFFE0
FFFACD
FAFAD2
FFEFD5
FFE4B5
FFDAB9
EEE8AA
F0E68C
BDB76B

Purple

E6E6FA
D8BFD8
DDA0DD
EE82EE
DA70D6
FF00FF
FF00FF
BA55D3
9370DB
9966CC
8A2BE2
9400D3
9932CC
8B008B
800080
4B0082
6A5ACD
483D8B
7B68EE

Green

ADFF2F
7FFF00
7CFC00
00FF00
32CD32
98FB98
90EE90
00FA9A
00FF7F
3CB371
2E8B57
228B22
008000
006400
9ACD32
6B8E23
808000
556B2F
66CDAA
8FBC8F
20B2AA
008B8B
008080

Blue

00FFFF
00FFFF
E0FFFF
AFEEEE
7FFFD4
40E0D0
48D1CC
00CED1
5F9EA0
4682B4
B0C4DE
B0E0E6
ADD8E6
87CEEB
87CEFA
00BFFF
1E90FF
6495ED
7B68EE
4169E1
0000FF
0000CD
00008B
191970

Brown

FFF8DC
FFEBCD
FFE4C4
F5DEB3
DEB887
D2B48C
BC8F8F
F4A460
DAA520
B8860B
CD853F
D2691E
8B4513
A0522D
A52A2A
800000

White

FFFFFF
FFFAFA
F0FFF0
F5FFFA
F0FFFF
F0F8FF
F8F8FF
F5F5F5
FFF5EE
F5F5DC
FDF5E6
FFFAF0
FFFFF0
FAEBD7
FAF0E6
FFF0F5
FFE4E1

Grey

DCDCDC
D3D3D3
C0C0C0
A9A9A9
808080
696969
778899
708090
2F4F4F
000000
Color picker

Tags

Samples of the most common HTML tags.

Div Section

<div>Block element</div>

Headings

<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>

Paragraph

<p style="text-align: center;">text</p>

Image

<img src="/demo.jpg" alt="description" height="48" width="100" />

Outbound Link

<a href="https://htmlg.com/" target="_blank" rel="nofollow">Click here</a>

Mailto link

<a href="mailto:me@ruwix.com?Subject=Hi%20mate" target="_top">Send Mail</a>

Inner anchor (jump on page)

<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Footnote content

Bold text

<strong>Bold text</strong>

Italic text

<em>Italic text</em>

Underlined text

<span style="text-decoration: underline;">Underlined text</span>

Iframe

<iframe src="link.html" width="200" height="200">
</iframe> 

Abbreviation

<abbr title="Hypertext Markup Language">HTML</abbr>

Comment

<!-- HTML
Comment -->

Horizontal Line

<hr />

Line break

<br />

Quotation

<q>Success is a journey not a destination.</q>
<blockquote cite="https://ruwix.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote> 

Video

<video width="200" height="150" controls>
<source src="vid.mp4" type="video/mp4">
<source src="vid.ogg" type="video/ogg">
No video support.
</video>

Audio

<audio controls>
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.mp3" type="audio/mpeg">
  No audio support.
</audio> 

Attributes

List of HTML tag attributes.

SYNTAX

<tag attributename="value" />
- lowecase attributes, quote values

Global attributes

accesskey, class, contenteditable, data-*, dir, draggable, hidden, id, lang, spellcheck, style, tabindex, title
<div id="demo" class="big" dir="ltr" lang="en" 
  style="color: red;" tabindex="0" title="Tooltip" 
  contenteditable="true" spellcheck="true" 
  data-htmlcheat="99">
    Hello World!
</div>

Internationalization: dir, lang, xml:lang

<html lang="en-US">
...
<p dir="rtl">Right to left (Arabic)</p> 
...
</html>

Link: download, href, hreflang, media, rel, target, type

<a href="https://htmlg.com/" target="_blank"
  rel="external" hreflang="en" type="text/html">
    Link
</a>

Image: src, alt, height, ismap, longdesc, src, srcset, usemap, width

<img src="/demo.jpg" alt="description" 
height="48" width="100" longdesc="desc.txt" />

All attributes

acceptform, input
accept-charsetform
accesskeyGlobal attribute
actionform
alignapplet, caption, col, colgroup, hr, iframe, img, table, tbody, td, tfoot , th, thead, tr
altapplet, area, img, input
asyncscript
autocompleteform, input
autofocusbutton, input, keygen, select, textarea
autoplayaudio, video
autosaveinput
bgcolorbody, col, colgroup, marquee, table, tbody, tfoot, td, th, tr
bufferedaudio, video
challengekeygen
charsetmeta, script
checkedcommand, input
citeblockquote, del, ins, q
classGlobal attribute
codeapplet
codebaseapplet
colorbasefont, font, hr
colstextarea
colspantd, th
contentmeta
contenteditableGlobal attribute
contextmenuGlobal attribute
controlsaudio, video
coordsarea
dataobject
data-*Global attribute
datetimedel, ins, time
defaulttrack
deferscript
dirGlobal attribute
dirnameinput, textarea
disabledbutton, command, fieldset, input, keygen, optgroup, option, select, textarea
downloada, area
draggableGlobal attribute
dropzoneGlobal attribute
enctypeform
forlabel, output
formbutton, fieldset, input, keygen, label, meter, object, output, progress, select, textarea
formactioninput, button
headerstd, th
heightcanvas, embed, iframe, img, input, object, video
hiddenGlobal attribute
highmeter
hrefa, area, base, link
hreflanga, area, link
http-equivmeta
iconcommand
idGlobal attribute
integritylink, script
ismapimg
itempropGlobal attribute
keytypekeygen
kindtrack
labeltrack
langGlobal attribute
languagescript
listinput
loopaudio, bgsound, marquee, video
lowmeter
manifesthtml
maxinput, meter, progress
maxlengthinput, textarea
mediaa, area, link, source, style
methodform
mininput, meter
multipleinput, select
mutedvideo
namebutton, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param
novalidateform
opendetails
optimummeter
patterninput
pinga, area
placeholderinput, textarea
postervideo
preloadaudio, video
radiogroupcommand
readonlyinput, textarea
rela, area, link
requiredinput, select, textarea
reversedol
rowstextarea
rowspantd, th
sandboxiframe
selectedoption
sizeinput, select
slotGlobal attribute
spancol, colgroup
spellcheckGlobal attribute
srcaudio, embed, iframe, img, input, script, source, track, video
startol
stepinput
styleGlobal attribute
tabindexGlobal attribute
targeta, area, base, form
titleGlobal attribute
typebutton, input, command, embed, object, script, source, style, menu
usemapimg, input, object
valuebutton, option, input, li, meter, progress, param
widthcanvas, embed, iframe, img, input, object, video
wraptextarea

Gibberish text

Grab the filler text from here.

Lorem ipsum dolor sit amet adipiscing bibendum sem orci tempus aliquet gravida, orci amet iaculis aptent blandit quam accumsan donec in facilisis, cursus ante curabitur aliquet condimentum tincidunt facilisis non cubilia lorem et pretium aliquam phasellus ipsum metus quisque auctor tristique donec nibh, praesent congue ultricies aenean ornare ligula sagittis proin sed vestibulum purus tempus aenean neque aliquam curae vivamus purus egestas ligula tincidunt nullam.

Dolor id fringilla ut lacinia sem ut pretium ante, luctus hendrerit porttitor etiam malesuada eleifend vel suscipit fusce molestie posuere venenatis pellentesque fusce eros, etiam amet est netus nostra suspendisse condimentum, nulla felis inceptos id quam velit integer orci pretium placerat maecenas ante congue purus enim sociosqu odio erat eleifend vestibulum euismod, quam convallis posuere habitasse odio vitae quisque faucibus vulputate primis integer tellus fusce.

Suscipit conubia volutpat potenti eu nostra eleifend hac neque tellus nisl, curae nunc porta turpis aptent donec litora velit elit sagittis, dolor non dapibus luctus gravida donec ultrices leo scelerisque risus eleifend vehicula morbi orci ultrices lacinia platea consectetur, dictum curabitur habitant turpis dapibus volutpat metus mollis habitasse, eget venenatis arcu congue potenti imperdiet varius.

Forms

Contact form with input fields.
<form action="/action.php" method="post">
  Name: <input name="name" type="text" /> <br /> 
  Age: <input max="99" min="1" name="age" step="1" type="number" value="18" /> <br />
  <select name="gender">
    <option selected="selected" value="male">Male</option>
    <option value="female">Female</option>
  </select><br /> 
  <input checked="checked" name="newsletter" type="radio" value="daily" /> Daily 
  <input name="newsletter" type="radio" value="weekly" /> Weekly<br />
  <textarea cols="20" name="comments" rows="5">Comment</textarea><br />
  <label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
  <input type="submit" value="Submit" />
</form>

iframe

Embed external pages with iframes.
<iframe style="width: 100%; height: 100px; overflow: hidden;" 
	src="https://htmlg.com" width="100" height="100" scrolling="no">
</iframe>

Table

Example table grid.
<table>
  <caption>Car manufacturers</caption>
  <colgroup>
    <col style="background: #EFA692;" />
    <col style="background: #D0E0D2;" span="2" />
  </colgroup>
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Office</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>BMW</td>
      <td>Germany</td>
      <td>Berlin</td>
    </tr>
    <tr>
      <td>Dacia</td>
      <td colspan="2">Pitesti, RO</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Name</td>
      <td colspan="2">Address</td>
    </tr>
  </tfoot>
</table>
Car manufacturers
Name Country Office
BMW Germany Berlin
Dacia Pitesti, RO
Name Address
Table Generator

Link

HTML anchor tag (link) examples.
<p>This is <a href="https://wwweeebbb.com/">a link</a> in a paragraph.</p>

This is a link in a paragraph.

A relative link to <a href="/">our home page</a>!
A relative link to our home page!
<a href="https://badhtml.com/" 
   target="_blank" rel="external nofollow" 
   hreflang="en" title="Bad HTML practices">
     External link opens in new tab
</a>  
Link Generator

Image

Display pictures on the page with the <img /> tag.
<img src="/demo.jpg" alt="description" height="48" width="100" />

Using AMP HTML:

<amp-img src="/demo.jpg" alt="description" height="48" width="100"></amp-img>
Image Maker

List

<ul> - unordered and <ol> ordered list
<ol style="list-style-type: upper-roman;">
  <li><a href="/">HTML</a></li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>
  1. HTML
  2. CSS
  3. JavaScript
<ul style="list-style-type: square;">
  <li>HTML</li>
  <li><a href="/css/">CSS</a></li>
  <li>JavaScript</li>
</ul>
  • HTML
  • CSS
  • JavaScript
List maker

Blank Page

An empty HTML page syntax.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <meta name="description" content="Roughly 155 characters">
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <!-- Content -->
  </body>
</html>
Templates

.htaccess

Force HTTPS

RewriteEngine on
RewriteCond %{HTTPS} !on
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

Force www

RewriteEngine on
RewriteCond %{HTTP_HOST} ^htmlg\.com [NC]
RewriteRule ^(.*)$ http://www.htmlg.com/$1 [L,R=301,NC]

Force non-www

RewriteEngine on
RewriteCond %{HTTP_HOST} ^www\.htmlg\.com [NC]
RewriteRule ^(.*)$ http://htmlg.com/$1 [L,R=301]

Custom Error Pages

ErrorDocument 500 "Sorry, something went wrong!"
ErrorDocument 401 https://htmlg.com/404/
ErrorDocument 404 404error.html

Redirect Entire Site

Redirect 301 / https://htmlg.com/

Permanent Page Redirect

Redirect 301 /oldlink.html https://htmlg.com/help/
Redirect 301 /oldlink https://htmlg.com/about/

Alias Directory

RewriteEngine On
RewriteRule ^source_directory/(.*) target_directory/$1

Remove .php Extension

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([^.]+)$ $1.php [NC,L]

Block IP Address

Order deny,allow
Allow from all
Deny from 123.123.123.123
Deny from 123.123.123.123

Allow Access From Only One IP

# Require all denied
# Require ip 123.123.123.123

Robots.txt

Place the content in the robots.txt file in the root of a website.

Example

User-agent: *
Disallow: /dont-index-this-folder/
Sitemap: https://htmlcheatsheet.com/sitemap.xml

Ban all robots

User-agent: *
Disallow: /

Head Tags

Recommended tags for the header section,
including open graph.
<!doctype html>
<html lang="en" class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="canonical" href="https://htmlcheatsheet.com/" />
  <title>HTML CheatSheet</title>
  <meta name="description" content="A brief page description">
  <meta name="keywords" content="html,cheatsheet" />
  <meta property="fb:admins" content="YourFacebookUsername" />
  <meta property="og:title" content="HTML CheatSheet" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://htmlcheatsheet.com/" />
  <meta property="og:image" content="https://htmlcheatsheet.com/images/html-cheatsheet.jpg" />
  <meta property="og:description" content="A brief page description" />
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="alternate" hreflang="es" href="https://htmlcheatsheet.com/spanish/" />
  <link rel="stylesheet" href="/styles.css">
  <script src="/script.js"></script>
</head>

Open Graph

Social media header tags.
<!doctype html>
<html xmlns:og="http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="Cheat Sheet" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://htmlcheatsheet.com/" />
<meta property="og:image" content="https://htmlcheatsheet.com/demo.jpg" />

Optional

<meta property="og:audio" content="https://htmlcheatsheet.com/track.mp3" />
<meta property="og:description" content="A brief description" />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="HTML CheatSheet" />
<meta property="og:video" content="https://htmlcheatsheet.com/video.swf" />

HTML5 Page Structure

header, nav, main, article, section, aside, footer, address
<header>
  <div id="logo">HTML</div>
  <nav>  
    <ul>
      <li><a href="/">Home</a>
      <li><a href="/link">Page</a>
    </ul>
  </nav>
</header>
<main role="main">
  <article>
    <h2>Title 1</h2>
    <p>Content 1</p>
  </article>
  <article>
    <h2>Title 2</h2>
    <p>Content 2</p>
  </article>
</main>
<section>
  A group of related content
</section>
<aside>
  Sidebar
</aside>
<footer>
  <p>&copy; HTML CheatSheet</p>
  <address>
    Contact <a href="mailto:me@htmlg.com">me</a>
  </address>
</footer>

HTML Cheat Sheet

HTML Cheat Sheet contains useful code examples and web developer tools, markup generators and more on a single page. Switch to other web developer sheets, like CSS or JavaScript. These pages were created as a quick guide for those who already know how to work with these languages. 
Make sure you bookmark this site for a quick and easy access! This one will serve you much better than a pdf file.

The HTML editor on the bottom of the page gives you a live preview as you edit your HTML and CSS code.

We have listed the most common code generators. Set up your preferences and easily generate HTML code for iframe, table, link (anchor), list or image.

The operation of the site is really intuitive, just highlight a code snippet and copy-paste it in your project. Interact with the panels of the website, try the buttons, sliders or look around in the useful links section!

Desktop View