[go: up one dir, main page]
HTML CSS JS

HTML Cheat Sheet HTML Cheat Sheet

Color Picker🎨

Click the hex code to pick another color.
Text color
Background
Box border
Text shadow
Box shadow
 

Characters🈚

Hover the character and click to select one.
nbsp
aacute
agrave
acirc
auml
atilde
aring
amp
lt
gt
quot
apos
lsaquo
rsaquo
laquo
raquo
#9758
dollar
cent
pound
yen
euro
#x20B9
#x20BD
#x5143
copy
reg
#9748
#9749
#9977
#9924
#9760
#9762
spades
clubs
hearts
diams
#9650
#9651
#9711
#9724
sect
para
phone
#9744
#9745
#9746
#10004
#10008
#9786
#9787
#9834
#9835
#9872
#9993
#9998
#9728
#10032
#9733
#10077
#10078
#10084
dagger
#10148
#10151
larr
uarr
rarr
darr
nwarr
nearr
searr
swarr
trade
commat
check
#x2103
#x2109
plus
times
divide
equals
ne
frac14
frac12
frac34
frac13
frac23
excl
quest
ndash
mdash
#8512
#8486
#8505
#8470
#9898
#128578
#128512
#128522
#128532
#127782
#127772
#127803
#127849
#127867
#127828
#127917
#127946
#127957
#128053
#128058
#128062
#128064
#128077
#128078
#128102
#128106
#128107
#128128
#128148
#128169
#128170
#128176
#128190
#128193
#128204
#128273
#128299
#128679
#128736
#128722
All Characters

How to use?‍🎓

How to use the CSS cheat sheet?

Tags🏷

Samples of the most common tags.

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

Text Links (to Our Sponsors)

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

You can easily buy Instagram likes and increase your chance to be in the Explore Page!
Visit ScamFighter for the best essay writing services.
Buy Instagram views Insfollowpro with Instant Delivery.
Build your muscle mass with ProMuscle Bodybuilding App.
Get reliable assignment help to boost your grades and simplify your study process.

Image Link

HTML for babies
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📣

We show ads to support this free website.

Structures🏗

HTML tag structures

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

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://html6.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

Ads📣

We show ads to support this free website.

Gibberish text🈹

Select the desired format to generate the text.
  • Lorem ipsum
  • Cupcake ipsum
  • Random English
  • Chinese
  • Spanish

Create iframe🖼

Fill the form and generate and iframe tag.
URL:
Width:
Height:
Scrolling:
Border:
Generate iframe HTMLiframe.com

Create Table▦

Fill the form to generate a HTML table.
Cols:
Rows:
Border:
Border Collapse:
Width:
Cellpadding:
Generate table Div Tables

Create Link🔗

Fill the form to create an HTML anchor tag (link).
URL:
Text:
Title:
Target:
Generate link

Create Image📸

Fill the form to create an HTML image tag.
Source:
Description:
Style:
Width:
Height:
Float:
Generate image

Create List📜

Select the options to create an HTML list.
List type:
Unordered:
Ordered:
Generate list

Blank Page💭

The syntax for an empty HTML page.
<!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⚙

Force HTTPS

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

Force www

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

Force non-www

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

Custom Error Pages

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

Redirect Entire Site

Redirect 301 / https://html6.com/

Permanent Page Redirect

Redirect 301 /oldlink.html https://html6.com/help/
Redirect 301 /oldlink https://html6.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📣

We show ads to support this free website.

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 Cheat Sheet</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 Cheat Sheet" />
  <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⚗

HTML5 sectioning elements

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 Cheat Sheet</p>
  <address>
    Contact <a href="mailto:me@html6.com">me</a>
  </address>
</footer>
Free HTML Templates

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 Cheat Sheet" />
<meta property="og:video" content="https://htmlcheatsheet.com/video.swf" />

Useful Links💡

A list of other useful resources.
RGB color codes Word doc to HTML Table generators HTML cleaner HTML blog HTML editor Basic concepts HTML validator W3 schools Can I use?
↘
HTML
CSS
Apply CSS
Preview

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.

cheat sheet screenshot

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.
hcs footnote | PDF | Terms and Conditions, Privacy Policy | Mobile view
© HTMLCheatSheet.com
 
➤ ◼