This cheat sheet or HTML code quick reference - lists the common HTML
tags and their attributes, grouped into relevant sections in an easy-to-read format.
What is "html"? What are "tags"? - Perhaps Google it or check out
Codecademy for answers because that's what I did!
Basic HTML Structure
<html>
<head>
<title>website title</title>
</head>
<body>
content of website...
</body>
</html>
|
<h?> heading </h?>
|
Heading (h1 for largest to h6 for smallest)
|
|
<p> paragraph </p>
|
Paragraph of Text
|
|
<b> bold </b>
|
Make text between tags bold
|
|
<i> italic </i>
|
Make text between tags italic
|
|
<a href="url"> link name </a>
|
Create a link to another page or website
|
|
<div> ... </div>
|
Divide up page contents into sections, and applying styles
|
|
<img src="filename.jpg">
|
Show an image
|
|
<ul> <li> list </li> </ul>
|
Create a link to another page or website
|
|
<br>
|
Line break (force a new line)
|
|
<span style="color:red;"> red </span>
|
Use CSS style to change text colour
|
Text Formatting
|
<h?> ... </h?>
|
Heading (h1 for largest to h6 for smallest)
|
|
<b> ... </b>
|
Bold text
|
|
<i> ... </i>
|
Italic text
|
|
<u> ... </u>
|
Underline text
|
|
<strike> ... </strike>
|
Strikeout text
|
|
<sup> ... </sup>
|
Superscript - smaller text placed above normal text
|
|
<sub> ... </sub>
|
Subscript - smaller text placed below normal text
|
|
<small> ... </small>
|
Small - Fineprint size text
|
|
<tt> ... </tt>
|
Typewrite text
|
|
<pre> ... </pre>
|
Pre-formatted text
|
|
<blockquote> ... </blockquote>
|
Text block quote
|
|
<strong> ... </strong>
|
Strong text - shown as Bold in most browsers
|
|
<em> ... </em>
|
Emphasis text - shown as Italics in most browsers
|
Section Divisions
|
<div> ... </div>
|
Division or section of page content
|
|
<span> ... </span>
|
Section of text within other content
|
|
<p> ... </p>
|
Paragraph of text
|
|
<br>
|
Line break
|
|
<hr>
|
Basic horizontal line
|
|
<hr> Tag Attributes:
|
|
size="?"
|
Line thickness in pixels
|
|
width="?"
|
Line width in pixels
|
|
width="??%"
|
Line width as percentage
|
|
color="#?????? or name"
|
Line Color (*)
|
|
align="?"
|
Horizontal alignment: left, center, right (*)
|
|
noshade
|
No 3D cut-out
|
|
<div> Semantics:
|
|
<article> ... </article>
|
Article tag to replace <div>
|
|
<aside> ... </aside>
|
Aside tag to replace <div>
|
|
<code> ... </code>
|
Code tag to represent code text
|
|
<nav> ... </nav>
|
Navigation tag - contains navigation portion of site
|
|
<header> ... </header>
|
Header tag - contains header of site
|
|
<main> ... </main>
|
Main section tag - contains main section of site
|
|
<section> ... </section>
|
Section tag - contains section of site
|
|
<footer> ... </footer>
|
Footer tag- contains footer of site
|
|
<img src="url" alt="text">
|
Basic image
|
|
<img> Tag Attributes:
|
|
src="url"
|
URL or filename of image (required)
|
|
alt="text"
|
Alternate text (required)
|
|
align="?"
|
Image alignment within surrounding text (*)
|
|
width="??"
|
Image width (in pixels or %)
|
|
height="??"
|
Image height (in pixels or %)
|
|
border="??"
|
Border thickness (in pixels) (*)
|
|
vspace="??"
|
Space above or below the image (in pixels) (*)
|
|
hspace="??"
|
Space on left or right of image (in pixels) (*)
|
|
<video> ... </video>
|
Basic video - text within tags will be displayed if source is not included
|
|
<source src="url" type="video/type">
|
Source of video - url contains video path, type contains video type
|
|
<video> Tag Attributes:
|
|
autoplay
|
Automatically plays video, requires muted tag to work on some browsers
|
|
controls
|
Offer controls to allow the user to control video playback
|
|
loop
|
Loops video upon reaching the end
|
|
muted
|
The audio will be initially silenced
|
|
height="?"
|
Video height (in pixels)
|
|
width="?"
|
Video width (in pixels)
|
|
<a href="url"> link text </a>
|
Basic link
|
|
<a> Tag Attributes:
|
|
href="url"
|
Location (url) of page to link to.
|
|
name="??"
|
Name of link (name of anchor, or name of bookamrk)
|
|
target="?"
|
Link target location: _self, _blank, _top, _parent
|
|
href="url#bookmark"
|
Link to a bookamrk (defined with name attribute).
|
|
href="mailto:email"
|
Link which initiates an email (dependant on user's email client).
|
Lists
|
<ol> ... </ol>
|
Ordered list
|
|
<ul> ... </ul>
|
Un-ordered list
|
|
<li> ... </li>
|
List item (within ordered or unordered)
|
|
<ol type="?">
|
Ordered list type: A, a, I, i, 1
|
|
<ol start="??">
|
Ordered list starting value
|
|
<ul type="?">
|
Unordered list bullet type: disc, circle, square
|
|
<li value="??">
|
List item value (changes current and subsequent items)
|
|
<li type="??">
|
List item type (changes only current item)
|
|
<dl> ... </dl>
|
Definition list
|
|
<dt> ... </dt>
|
Term or phrase being defined
|
|
<dd> ... </dd>
|
Detailed definition of term
|
Tables
|
<table> ... </table>
|
Define a table
|
|
<table> Tag Attributes;
|
|
border="?"
|
Thickness of outside border
|
|
bordercolor="#??????"
|
Border Color
|
|
cellspacing="?"
|
Space between cells (pixels)
|
|
cellpadding="?"
|
Space between cell wall and content
|
|
align="??"
|
Horizontal alignment: left, center, right (*)
|
|
bgcolor="#??????"
|
Background Color (*)
|
|
width="??"
|
Table width (pixels or %) (*)
|
|
height="??"
|
Table height (pixels or %) (*)
|
|
<tr> ... </tr>
|
Table row within table
|
|
<th> ... </th>
|
Header cell within table row
|
|
<td> ... </td>
|
Table cell within table row
|
| <td> Tag Attributes |
|
colspan="?"
|
Number of columns the cell spans across (cell merge)
|
|
rowspan="?"
|
Number of rows the cell spans across (cell merge)
|
|
width="??"
|
Cell width (pixels or %) (*)
|
|
height="??"
|
Cell height (pixels or %) (*)
|
|
bgcolor="#??????"
|
Cell background color (*)
|
|
align="??"
|
Horizontal alignment: left, center, right (*)
|
|
valign="??"
|
Vertical alignment: top, middle, bottom (*)
|
|
nowrap
|
Force no line breaks in a particular cell
|
Frames
|
<frameset> ... </frameset>
|
Define the set of frames (no longer supported in HTML 5)
|
|
<frameset> Tag Attributes:
|
|
rows="??,??, ..."
|
Define row sizes & number of rows (size in pixels or %)
|
|
cols="??,??, ..."
|
Define column sizes & number of columns (size in pixels or %)
|
|
noresize="noresize"
|
User cannot resize any frames in frameset
|
|
<iframe> ... </iframe>
|
Define a frame within the frameset
|
|
<iframe> Tag Attributes:
|
|
src="url"
|
Location of HTML File for a frame
|
|
name="***"
|
Unique name of frame window
|
|
marginwidth="?"
|
Horizontal margin spacing inside frame (in pixels)
|
|
marginheight="?"
|
Vertical margin spacing inside frame (in pixels)
|
|
noresize="noresize"
|
Declare all frameset sizes as fixed
|
|
scrolling="***"
|
Determines scroll ability inside the frame: yes, no, auto
|
|
frameborder="?"
|
Frame border: (1=yes, 2=no)
|
|
bordercolor="#??????"
|
Border color (*)
|
|
<noframes> ... </noframes>
|
Unframed content (for browsers not supporting frames)
|
|
<form> ... </form>
|
Form input group declaration
|
|
<form> Tag Attributes:
|
|
action="url"
|
URL of Form Script
|
|
method="***"
|
Method of Form: get, post
|
|
enctype="***"
|
For file upload: enctype="multipart/form-data"
|
|
<input> ... </input>
|
Input field within form
|
|
<input> Tag Attributes:
|
|
type="***"
|
Input field type: text, password, checkbox, submit, etc.
|
|
name="***"
|
Form field name (for form processing script)
|
|
value="***"
|
Value of input field
|
|
size="***"
|
Field size
|
|
maxlength="?"
|
Maximum Length of input field data
|
|
checked
|
Mark selected field in radio button group or checkbox
|
|
<select> ... </select>
|
Select options from drop down list
|
|
<select> Tag Attributes:
|
|
name="***"
|
Drop down combo-box name (for form processing script)
|
|
size="?"
|
Number of selectable options
|
|
multiple
|
Allow multiple selections
|
|
<option> ... </option>
|
Option (item) within drop down list
|
|
<option> Tag Attributes:
|
|
value="***"
|
Option value
|
|
selected
|
Set option as default selected option
|
|
<textarea> ... </textarea>
|
Large area for text input
|
|
<textarea> Tag Attributes:
|
|
name="***"
|
Text area name (for form processing script)
|
|
rows="?"
|
Number of rows of text shown
|
|
cols="?"
|
Number of columns (characters per row)
|
|
wrap="***"
|
Word wrapping: off, hard, soft
|
Special Characters
|
<
|
< - Less-than symbol
|
|
>
|
> - Greater-than symbol
|
|
&
|
& - Ampersand, or 'and' sign
|
|
"
|
" - Quotation mark
|
|
©
|
© - Copyright symbol
|
|
™
|
™ - Trademark symbol
|
|
|
- Space (non-breaking space)
|
|
&#??;
|
ISO 8859-1 character - replace ?? with iso code
|
Miscellaneous Tags
|
<!-- ... -->
|
Comment within HTML source code
|
|
<!DOCTYPE html ...>
|
Document type definition (wiki)
|
|
<meta> ... <meta>
|
META information tag
|
|
<meta> Tag Attributes:
|
|
name="***"
|
Meta name: description, keywords, author
|
|
http-equiv="***"
|
HTTP Equivalent Info: title, etc.
|
|
content="***"
|
Information content
|
|
<link>
|
LINK content relationship tag
|
|
<link> Tag Attributes:
|
|
rel="***"
|
Type of forward relationship
|
|
http="url"
|
Location (URL) of object or file being linked
|
|
type="***"
|
Type of object or file, eg: text/css
|
|
title="***"
|
Link title (optional)k
|
(*) Important Note:
Tags marked with (*) should still work, but have been superseded by
Cascading Style Sheets (CSS), which is now
the recommended way to change the font, colour, spacing, border, or alignment
of HTML elements