0% found this document useful (0 votes)
53 views

HTML

This HTML cheatsheet summarizes basic HTML tags for formatting text, images, links, tables, forms, and frames in 2-3 sentences or less. It provides an overview of common tags for headings, paragraphs, lists, line breaks, bold and italics text, hyperlinks, images, text boxes, buttons, tables, frames, and form elements like checkboxes and text fields. The cheatsheet is a quick reference for HTML tags to format and structure web pages in a concise two page document.
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
53 views

HTML

This HTML cheatsheet summarizes basic HTML tags for formatting text, images, links, tables, forms, and frames in 2-3 sentences or less. It provides an overview of common tags for headings, paragraphs, lists, line breaks, bold and italics text, hyperlinks, images, text boxes, buttons, tables, frames, and form elements like checkboxes and text fields. The cheatsheet is a quick reference for HTML tags to format and structure web pages in a concise two page document.
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Cheatsheet

last updated: 2/14/08 page 1 of 2

Basic Tags Formatting


<html> </html> <p> </p>
Creates an HTML document Creates a new paragraph
<head> </head> <p align=?> </p>
Sets off the title & other info that isn't displayed Aligns a paragraph left, right, or center
<body> </body> <br />
Sets off the visible portion of the document Inserts a line break (carriage return)
<title> </title> <blockquote> </blockquote>
Puts name of the document in the title bar; when Indents text from both sides
bookmarking pages, this is what is bookmarked <div align=?> </div>
Sometimes used to format large blocks of HTML
Body attributes (align=left/right/center); also used for stylesheets
<body bgcolor=?>
Sets background color, using name or hex value Lists
<body text=?> <ul type=?> </ul>
Sets text color, using name or hex value Creates an unordered list (type=disc/square/circle)
<body link=?> <ol type=? start=?> </ol>
Sets color of links, using name or hex value Creates an ordered list (type=1/i/I/a/A; start=xx,
<body vlink=?> where xx is a counting number)
Sets color of visited links, using name or hex value <li> </li>
<body alink=?> Precedes each list item
Sets color of active links (while mouse-clicking) <dl> </dl>
Creates a definition list
Text Tags <dt>
<pre> </pre> Precedes each defintion term
Creates preformatted text <dd>
<h1> </h1> --> <h6> </h6> Precedes each defintion
Creates headlines -- H1=largest, H6=smallest
<b> </b> Graphical elements
Creates bold text (should use <strong> instead) <hr />
<i> </i> Inserts a horizontal rule
Creates italicized text (should use <em> instead) <hr size=?>
<tt> </tt> Sets size (height) of horizontal rule
Creates typewriter-style text <hr width=?>
<code> </code> Sets width of rule (as a % or absolute pixel length)
Used to define source code, usually monospace <hr noshade>
<cite> </cite> Creates a horizontal rule without a shadow
Creates a citation, usually italic <img src="URL" />
<address> </address> Adds image; it is a separate file located at the URL
Creates address section, usually processed in italics <img src="URL" align=?>
<em> </em> Aligns an image left/right/center/bottom/top/middle
Emphasizes a word (usually italics) <img src="URL" border=?>
<strong> </strong> Sets size of border surrounding image
Emphasizes a word (usually bold) <img src="URL" height=?>
<font size=?> </font> Sets height of image, in pixels
Sets size of font - 1 to 7 (should use CSS instead) <img src="URL" width=?>
<font color=?> </font> Sets width of image, in pixels
Sets font color (should use CSS instead) <img src="URL" alt=?>
<font face=?> </font> Sets the alternate text for browsers that can't
Defines the font used (should use CSS instead) process images (required by the ADA)

Links
<a href="URL">clickable text</a>
Creates a hyperlink to a Uniform Resource Locator
<a href="mailto:EMAIL_ADDRESS">clickable text</a>
Creates a hyperlink to an email address
<a name="NAME">
Creates a target location within a document
<a href="#NAME">clickable text</a>
Creates a link to that target location
HTML Cheatsheet
last updated: 2/14/08 page 2 of 2

Forms Table attributes


<form> </form> <table border=?>
Defines a form Sets the width of the border around table cells
<select multiple name=? size=?> </select> <table cellspacing=?>
Creates a scrolling menu. Size sets the number of Sets amount of space between table cells
menu items visible before user needs to scroll. <table cellpadding=?>
<select name=?> </select> Sets amount of space between a cell's border and
Creates a pulldown menu its contents
<option> <table width=?>
Sets off each menu item Sets width of the table in pixels or as a percentage
<textarea name=? cols="x" rows="y"></textarea> <tr align=?>
Creates a text box area. Columns set the width; Sets alignment for cells within the row
rows set the height. (left/center/right)
<input type="checkbox" name=? value=?> <td align=?>
Creates a checkbox. Sets alignment for cells (left/center/right)
<input type="checkbox" name=? value=? checked> <tr valign=?>
Creates a checkbox which is pre-checked. Sets vertical alignment for cells within the row
<input type="radio" name=? value=?> (top/middle/bottom)
Creates a radio button. <td valign=?>
<input type="radio" name=? value=? checked> Sets vertical alignment for cell (top/middle/bottom)
Creates a radio button which is pre-checked. <td rowspan=?>
<input type="text" name=? size=?> Sets number of rows a cell should span (default=1)
Creates a one-line text area. Size sets length, in <td colspan=?>
characters. Sets number of columns a cell should span
<input type="submit" value=?> <td nowrap>
Creates a submit button. Value sets the text in the Prevents lines within a cell from being broken to fit
submit button.
<input type="image" name=? src=? border=? alt=?>
Creates a submit button using an image. Frames
<input type="reset"> <frameset> </frameset>
Creates a reset button Creates and defines frames
<frameset rows="x,y">
Tables (use only for data layout - use CSS for page layout) Defines the rows within a frameset, using number
<table> </table> in pixel length or percentage of width (x=first
Creates a table document, y=second document)
<tr> </tr> <frameset cols="x,y">
Sets off each row in a table Defines the columns within a frameset, using
<td> </td> number in pixel length or percentage of width
Sets off each cell in a row <frame>
<th> </th> Defines a region within a frameset
Sets off the table header (a normal cell with bold, <noframes> </noframes>
centered text) Defines what will appear on browsers that don't
support frames
<frame src="URL">
Specifies which HTML document is displayed
<frame name="name">
Names the region so it may be targeted by other
frames
<frame marginwidth=?>
Defines the left and right margins for the frame;
must be equal to or greater than 1
<frame marginheight=?>
Defines the top and bottom margins for the frame;
must be equal to or greater than 1
<frame scrolling=?>
Sets whether the frame has a scrollbar
(yes/no/auto)
<frame noresize>
Prevents the user from resizing a frame

You might also like