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

HTML Cheat Sheet (DRAFT) by

HTML

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

HTML structure

<!DOCTYPE html>
<!-- comments -->
<html>
.. <head>
.... <title>...</­tit­le>
.. </h­ead>
.. <body>
.. </b­ody>
</h­tml>

HTML head

Title
<ti­tle>text</t­itl­e>
CSS stylesheet link
<link href="U­RL.c­ss­" type="t­ext­/cs­s" rel="st­yle­she­et" />
Page icon
<link href="U­RL.i­co­" type="i­mag­e/i­co" rel="sh­ortcut icon" />
JavaScript link
<script src="UR­L.j­s" type="t­ext­/ja­vas­cri­pt">­</s­cri­pt> (not self-c­losing)
Metadata
<meta attrib­ute­="va­lue­" ... />

HTML block elements

<p>
Paragraph text
<h1>, <h2>, ...<h6>
Heading 1 to 6
<hr />
Horizontal rule
<blockquote>
Blockquote
<pre>
Prefor­matted text
<form>
Form
<fieldset>
Fieldset
<address>
Contact info
<div>
Content block
Additional HTML5 content tags: <au­dio­>, <ca­nva­s>, <vi­deo>

HTML body - inline elements

<a href="U­RL">
Hyperlink
<img src="UR­L" alt="..." />
Image
<br />
Line break
<em>
Emphasis (italic)
<strong>
Strong (bold)
<q>
Quotation
<code>
Code (monos­pace)
<abbr title=­"­tex­t">
Abbrev­iation
<del>
Deleted (strik­eth­rough)
<ins>
Inserted (under­line)
<sub>
Subscript
<sup>
Supers­cript
<span>
Span
 

HTML lists (block elements)

<ol>
Ordered list
<ul>
Unordered list
<li>
List item
<dl>
Definition list
<dt>
Definition term
<dd>
Definition descri­ption
Nested list:
<ol>
.. <li> content </l­i>
.. <li> content </l­i>
.. <li>
.... <ul>
...... <li> nested item </l­i>
...... <li> nested item </l­i>
.... </u­l>
.. </l­i>
</o­l>

Definition list:
<dl>
.. <dt> term 1 </d­t>
.. <dd> descri­ption 1 </d­d>
.. <dt> term 2 </d­t>
.. <dd> descri­ption 2 </d­d>
</d­l>

HTML tables (block elements)

<table>
Table
<colgroup span="cols">
Column group
<col attributes />
Column
<caption>
Caption
<tr>
Table row
<th>
Table heading
<td>
Table cell
<thead>, <tfoot>, <tbody>
Containers (opt)
<table>
.. <caption> text </c­apt­ion>
.. <col attributes />
.. <colgroup>
....<col attributes /> <col attributes />
.. </c­olg­rou­p>
.. <tr>
.... <th> heading 1 </t­h>
.... <th> heading 2 </t­h>
.. </t­r>
.. <tr>
.... <td> cell 1 </t­d>
.... <td> cell 2 </t­d>
.. </t­r>
</t­abl­e>

Alternate (no inner col tags):
<co­lgroup attributes span="3 ></­col­gro­up>
  

HTML characters

<
&lt;
>
&gr;
&
&amp;
"
&quot;
(c)
&copy;

HTML URL format

Relative (same directory)
"­fil­ena­me"
Relative (subdi­rec­tory)
"­sub­fol­der­/fi­len­ame­"
Relative (parent)
"../­fil­ena­me"
Relative (root)
"­/pa­th/­fil­ena­me"
Absolute
"­htt­p:/­/do­mai­n/p­ath­/fi­le"