H TM L C S S J S

Editor Tags Cheat Sheet Characters Generators Templates Blog Links

HTML CheatSheet ➤ HTML

CS S
JS
jQ
Color Picker Ἲ ? ↖ x
⚡ AMP
CE5937 1 SEO

color: #CE5937; Text color

background­color:#CE5937; Background

border: 3px solid #CE5937; Box border

text­shadow: 1px 2px 2px #CE5937; Text shadow

box­shadow: 2px 2px 7px 1px #CE5937; Box shadow

Characters ἡ ? ↖ x
 á à â ä ã å & < > " ' ‹ › « » ☞
☔ ☕ ⛹⛄☠☢ ♠
&nbsp; &aacute;
&agrave;
&acirc; &auml; &atilde;&aring;&amp; &lt; &gt; &quot; &apos; &lsaquo;
&rsaquo;
&laquo;&raquo;
$ ¢ £ ¥ € ₹ ₽ 元 © ®
◼
¶ ☎ ☐ ☑ ☒ ✔ ✘ ☺☻
&dollar;&cent; &pound;
&yen; &euro; &copy; &reg; &spades;
♣ ♥ ♦ ▲ △ ◯◼ §
⚐ ✉ ✎ ☀ ✰ ★ ❝ ❞ ❤† ➤➧ ←↑ →
&clubs;&hearts;
&diams; &sect; &para; &phone;
♪ ♫
™@✓
&dagger; &larr; &uarr; &rarr;
↓ ↖ ↗ ↘ ↙ ℃℉ + × ÷ = ≠ ¼ ½
№⚪ ὤὠὠὡἲ
&darr; &nwarr;&nearr;&searr;&swarr;&trade;&commat;
&check; &plus; &times;&divide;&equals;&ne; &frac14;
&frac12;
¾ ⅓ ⅔ ! ? – —⅀ Ω ℹ
ἱ ἳ ἶἷ ἵ ἺἼἽ ὃὃ ὃὄ ὄὅ὆὆὇
&frac34;
&frac13;
&frac23;
&excl; &quest;&ndash;
&mdash;

Ὀ Ὁ ὊὋ Ὃ ὋὌὌ ὑὒ ὪὮ Ὥ
All Characters
How to use? Ἱ ? ↖ x

HTML Cheat Sheet - Ho…

 Tags Ἷ ? ↖ x

Div Section
<div>Block element</div>

Headings
<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Sub subheading</h3>
<h4>Quaternary heading</h4>

Paragraph with style

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

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

Links (to Our Sponsors)

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

Get your online assignment help at Copycrafter professional writing service.

Read reliable essay writing service reviews on the Omnipapers website and choose a legit company.
Get professional essay assistance at Rapidessay.
You can easily buy Instagram likes and increase your chance to be in the Explore Page!
Check BuzzVoice if you are looking to buy instagram likes with instant delivery.
Visit ScamFighter for the best essay writing services.
Do you have a ton of assignments to write? Well, I highly recommend write your papers with PapersOwl. Just sign
up, tell what paper you need, and they'll do the rest.

Image Link

HTML For Babies

<a href="https://HTMLforBabies.com/"
target="_blank" rel="external nofollow">
 <img src="/demo.jpg" alt="baby"
width="100" height="48" /><br />
HTML For Babies
</a>

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

Inner anchor (jump to ID)

<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>
 Ads ὎ ? ↖ x

Tricentis NeoLoad - Free Trial

Tricentis Open

Structures Ἵ ? ↖ x

Table
<table><caption>Phone numbers</caption>
<thead>
<tr>
<th>Name</th>
<th colspan="2">Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>577854</td>
<td>577855</td>
</tr>
<tr>
<td>Jack</td>
<td>577856</td>
<td>577857</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>&nbsp;</td>
<td>Personal</td>
<td>Office</td>
 </tr>
</tfoot>
</table>
HTMLtable.com Div Tables

Unordered list
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

Definition list
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets </dd>
</dl>

Form
<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"
<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>

Attributes Ὀ ? ↖ x

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
accept form, input
accept­charset form
accesskey Global attribute
action form
align applet, caption, col, colgroup, hr, iframe,
img, table, tbody, td, tfoot , th, thead, tr
alt applet, area, img, input
async script
autocomplete form, input
autofocus button, input, keygen, select, textarea
autoplay audio, video
autosave input
bgcolor body, col, colgroup, marquee, table, tbody,
tfoot, td, th, tr
buffered audio, video
challenge keygen
charset meta, script
checked command, input
cite blockquote, del, ins, q
class Global attribute
code applet
Ads ὎ ? ↖ x

Gibberish text ἣ ? ↖ x

Lorem ipsum Cupcake ipsum Random English Chinese

Spanish
 Create iframe Ὓ ? ↖ x

URL: https://
Width: 100 % Height: 100 px

Scrolling: Hidden Border: No

Generate iframe

Create Table ▦ ? ↖ x

Cols: 3 Rows: 3

Border: 0 Border Collapse: Not specified

Width: 0 % Cellpadding: 0

Generate table Div Tables

Create Link ὑ ? ↖ x

URL: https://
Text:
Title:
Target: Same tab

Generate link

Create Image ὏ ? ↖ x

Source: https://
Description:
Style:
Width: % Height: px

Float: None

Generate image

Create List Ὅ ? ↖ x

List type: Unordered list

Unordered: disc Ordered: 1. 2. 3.

Generate list

Blank Page Ὂ ? ↖ x

<!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>
HTML Boilerplate

.htaccess ⚙ ? ↖ x

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

Ads ὎ ? ↖ x
 Robots.txt ᾑ ? ↖ x

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

Ban all robots

User‐agent: *
Disallow: /

Head Tags ὆ ? ↖ x

<!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>

HTML5 Page Structure ⚗ ? ↖ x

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>
Free HTML Templates
 Open Graph Ὄ ? ↖ x

<!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" />

Useful Links Ὂ ? ↖ x

RGB color codes Word doc to HTML Div tables HTML cleaner
HTML blog HTML editor Basic concepts HTML validator
W3 schools Can I use? Web Hosting Secret Revealed
HTML Preview
1

p


Online Interactive 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!

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!

Color picker – Choose a color in the input field to get its Hex and RGB
code and a code snippet to use for styling.
Characters – Retreive the most common character codes or look
around in the full list of thousands of characters organized in
categories.
Tags – The most common HTML tags presented with examples.
Structures – Block of codes consisting of more tags which are always
used together: table, list, definition list and form.
Attributes – HTML tag attributes provide additional information about
the elements.
Gibberish text – Lorem ipsum and other filler text generator to fill
pages with content.
Iframe generator – Set the URL to be accessed, the dimmensions and
other attributes to get the iframe HTML code.
Table generator – Specify the dimmensions of the grid and other
attributes to generate the HTML table.
Link generator – Create an anchor tag setting where to point, what
text and tooltip to display. You can optionally set it to open the link in
new tab.
Image generator – Create an HTML image tag, setting the link to the
image and some style properties.
List generator – HTML list generator creates a demo list containing
two items, based on the selected list type.
.htaccess – The most common htaccess codes to force https, for
 redirect, for link rewrite and blocking IP addresses.
Robots.txt – Small robots text file example to allow or ban web
crawlers on your website.
Head tags – Make sure you don't miss anything important from the
head section of the website.
Open graph – Complete the head section with the Open Graph
protocol to help social media sites understand the page.
HTML5 page structure – A demo page built using the HTML5
elements.

HTML Cheat Sheet PDF

Save the .pdf version of this interactive page to keep it on your desktop or
print it and hang it on the wall and always sneak a peek while coding,
composing an article or designing a website. A PDF file is available for every
cheat sheet on this website: CSS, JavaScript and others.

The pdf version is not interactive but you can still copy the most commonly
used HTML tags, page strucutes and markups. It works perfectly for
Dummies, W3School users and even Stanford University graduates. The
page was created in 2020 with the latest HTML5 rules and will be updated
regularly so make sure to save this link.

Bookmark this page with Ctrl + D.

HTML Cheat Sheet is using cookies to collect anonymous visitor analytics. | PDF | Terms and Conditions, Privacy
Policy | Mobile view
© HTMLCheatSheet.com