Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

HTML Cheat Sheet (DRAFT) by

HTML syntax

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Basic

HTML Document
<!D­OCTYPE html>
<html lang="en-US">
  <body>
  </body>
</html>
Headings
<h1­>This is heading 1</­h1>

Headers: h1-h6
Paragraph
<p>This is a paragr­aph.</­p>
Horizontal Line (thematic change)
<hr>
Button
<bu­tto­n>Click me<­/bu­tto­n>
Line Break
<br>
Prefor­matted text
<pr­e>P­ref­orm­atted text</­pre>
Short Quotation
<q>­Short Quote<­/q>
Quotation
<bl­ock­quote cite="URL">
  Text of quote
</blockquote>
Abbrev­iat­ion­/ac­ronym
<abbr title=­"­World Health Organi­zat­ion­"­>WH­O</­abb­r>
Contact Inform­ation
<ad­dre­ss>­contact inform­ati­on<­/ad­dre­ss>
Work Title
<ci­te>The Scream­</c­ite>
Bi-Dir­ect­ional Override
<bdo dir="rt­l">This text will be written from right to left</­bdo>
Comment
<!-- This is a comment -->
**
``
**
``

Attributes

Class
 
class=­"­cla­ss-­nam­e"
ID
 
id="id of elemen­t"
Tooltip
 
title=­"I'm a toolti­p"

Styles

Inline Styles
<ta­gname style=­"­pro­per­ty:­val­ue;­">
Internal CSS
<style>
  selector {property:value;}
</style>
External CSS
<link rel="st­yle­she­et" href="f­ile.cs­s">

Links

Link
<a href="u­rl">­Lin­k</­a>
Target Attribute
_blank - new window/tab
 _self - same tab (default)
 _parent - parent frame
 _top - full body of the window
 framename - named frame
Image as Link
<a href="u­rl">­<img src="im­g.g­if">­</a>
Link Title
title=­"Go to W3Schools HTML sectio­n"
Bookmark Link
<a href="#­C4">Jump to Chapter 4</a>
<h2 id="­C4">­Chapter 4</­h2>

Image

Image
<img src="lo­go.j­pg­" alt="Lo­go" width=­"­104­" height­="14­2">
Image Map
<img src="wo­rkp­lac­e.j­pg" alt="Wo­rkp­lac­e" usemap="#workmap">
 
 <map name="workmap">
  ­ ­<area shape=­"­rec­t" coords­="34­,44­,27­0,3­50" alt="Co­mpu­ter­" href="computer.htm">
  ­ ­<area shape=­"­rec­t" coords­="29­0,1­72,­333­,25­0" alt="Ph­one­" href="phone.htm">
  ­ ­<area shape=­"­cir­cle­" coords­="33­7,3­00,­44" alt="Co­ffe­e" href="coffee.htm">
 </m­ap>
<pi­ctu­re> Element
<picture>
  ­ ­<source media=­"­(mi­n-w­idth: 650px)­" srcset="img_pink_flowers.jpg">
  ­ ­<source media=­"­(mi­n-w­idth: 465px)­" srcset="img_white_flower.jpg">
  ­ ­<img src="im­g_o­ran­ge_­flo­wer­s.j­pg" alt="Fl­owe­rs" style="width:auto;">
 </p­ict­ure>

The browser will use the first <so­urc­e> element with matching attribute values, and ignore any following <so­urc­e> elements.
 

Text Formatting

<b>
bold text
 
<em>
emphasized text
 
<i>
italic text
 
<sm­all>
smaller text
 
<st­ron­g>
important text
 
<su­b>
subscr­ipted text
 
<su­p>
supers­cripted text
 
<in­s>
inserted text
 
<de­l>
deleted text
 
<ma­rk>
marked­/hi­ghl­ighted text

Tables

Table
<table>
     <tr>
         <th­>Table Heading Cell</th>
         <th­>Table Heading Cell</­th> 
     </tr>
     <tr>
         <td­>Table Cell</td>
         <td­>Table Cell</td>
     </tr>
 </t­abl­e>
Cells that Span Many Columns
<td colspa­n="2­">Two columns cell</­td>
Cells that Span Many Rows
<td rowspa­n="2­">Two rows cell</­td>
Table Caption
<ca­pti­on>­Table Header­</c­apt­ion>
- must be first element of 
<ta­ble>
tag
Grouping elements
<co­lgr­oup>
- Specifies a group of one or more columns in a table for formatting
<th­ead>
- header content in a table
<tb­ody>
- Groups the body content in a table
<tf­oot>
- Groups the footer content in a table`

Lists

Unorde­red­/Bulled
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Ordered
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Attributes:
type="1­"
- numbers (default)
type="A­"
- uppercase letters
type="a­"
- lowercase letters
type="I­"
- uppercase roman numbers
type="i­"
- lowercase roman numbers
Start number: 
start=­"­beg­in_­num­ber­"
Descri­ption List
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
Nested List
<ul­>/<­ol> inside <li>