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

HTML5 Cheat Sheet (DRAFT) by

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

Syntax

<!doctype html>  <!-- indicates HTML5-->
<html>
   <head>
      <style>
         <div>...</div>
      </style>
      <title> Title </title>
      <nav> nav bar </nav>
      ...etc...
   </head>
   <body>
      <form action="inc/script.php" method="get"> <!--or "post"-->
      <input type="input-type">
      ...etc...
   </body>
</html>

Basic elements

<!D­OCT­YPE>
Declare document type, <!D­OCTYPE HTML> for HTML5
<html></html>
Entire document
<head></head>
Head of document
<title></title>
Title of document
<nav></nav>
Navigation bar
<body></body>
Body of the document
<article></article>
Article
<section></section>
Defines a section
<aside></aside>
Side block
<footer></footer>
Footer
<p></p>
Paragraph
<hr>
Horizontal rule
<span></span>
Defines a section in a document
<!-- comment -->
Insert comments

Formatting text

<h1> to <h6>
Heading levels
<br>
Line break
<b>text</b>
Bold
<strong>text</strong>
Bold, but less than <b>
<i>italic</i>
Italics
<em>italic</em>
Emphasis, italics
<blockquote></blockquote>
Quoted text
<sup>super</sup>
Supers­cript
<sub></sub>
Subscr­ipted
<small></small>
Small text
<style></style>
Style inform­ati­on--CSS
<div></div>
Defines a section
<pr­e><­/pr­e>
Prefor­matted text
UTF-8 is the default char set for HTML5.

HTML char set entities

n space tab
&ensp;
&#­8194;
m space tab
&emsp;
&#­8195;
non-br­eaking space
 
&#160;
left arrow
&larr;
&#­8592;
up arrow
&uarr;
&#­8593;
right arrow
&rarr;
&#­8594;
down arrow
&darr;
&#­8595;
black spades
&s­pades;
&#­9824;
black clubs
&c­lubs;
&#­9827;
black hearts
&h­earts;
&#­9829;
black diamonds
&d­iams;
&#­9830;
trademark
&t­rade;
&#­8482;
copyright
&copy;
&#169;
right double arrow
&r­aquo;
&#187;
1/4
&f­rac14;
&#188;
1/2
&f­rac12;
&#189;
3/4
&f­rac34;
&#190;
More character entities on Dave Child's cheat sheet and www.w3­sch­ool­s.com

Tables

<table></table>
Defines a table
<th></th>
Table header cell
<tr></tr>
Table row
<td></td>
Table data cell
<caption></caption>
Defines table caption
 
<ta­ble>

<th> first header text </t­h><­th> second header text </t­h>

<tr> <!-- first row-->

<td> first cell text </t­d><­td> second cell text </t­d>

</t­r>

<tr> <!-- second row -->

<td> first cell text </t­d><­td> second cell text </t­d>

</t­r>

</t­abl­e>

Links and media

<img src="dir/file.jpg">
defines an image
<a href="http://url/...">link</a>
hyperlink anchor
<iframe></iframe>
inline frame
<object></object>
imbeds an object
<video></video>
Insert video content
<audio></audio>
Insert audio content
<embed></embed>
Container for intera­ctive content or external applic­ation
<source></source>
Multim­edia: audio and video
 

Ordered list

<ol­></­ol>
Start and end tags
<li>
List item
type
Type of numbering
A, a, 1, i, I
start
Starting value
any number
 
<ol>
| 
<ol type="a­">
| 
<ol type="i­" start=­"­5">

<li> this

<li­>that

</o­l>

Unordered list

<ul­></­ul>
Start and end tags
<li>
List item
type
Type of bullet
disc, square, circle
 
<ul>
| 
<ul type="c­irc­le">

<li> this

<li> that

<ul>

Definition list

<dl­></­dl>
Start and end tags
<dt>
Term
<dd>
Definition
 
<dl>

<dt­>this

<dd­>define this

<dt­>that

<dd­>define that

</d­l>

Graphics and forms

 

Tags within the HEAD element

<ti­tle>
Title of the page
<me­ta>
Meta data
<li­nk>
<st­yle>
Can include CSS or a link to a CSS file
<ba­se>
<sc­rip­t>
<no­scr­ipt>

Use of attributes

TAG
ATTRIBUTES THAT MODIFY THAT TAG
<he­ad>
align, title, class, style, id
<bo­dy>
text, bgcolor, backgr­ound, class, style, id, link, alink, vlink
<p>
align, class, style, id
<hr>
align, width, size, color, noshade, class, style, id

General attributes

ATTRIBUTE
DEFINITION
VALUE
align
Horizo­ntally align
right, left, center
valign
Vertically align
top, middle, bottom
color
color
name, numeric, RGB, hex
bgcolor
Background color
name, numeric, RGB, hex
background
Background image
URL
width
Width of image, cells, or tables
numeric
height
Height of image, cells, or tables
numeric
id, class, style
Used in CSS
CSS defined
text
Color of text
name, numeric, RGB, hex
link
Color of links
name, numeric, RGB, hex
alink
Color of active links
name, numeric, RGB, hex
vlink
Color of visited links
name, numeric, RGB, hex
noshade
Removes default shading
Syntax is usually:
<tag attribute="va­lue­" /tag>, where value must be in quotes.