HTML

A Quick HTML Cheat Sheet

Basic Page Structure Tags

<html></html>
Creates an HTML document.
<head></head>
The place for the title and other information (such as meta-tags) that isn’t displayed in the page itself.
<body></body>
All the visible elements of the page (text, images, links, etc) go between the body tags. This is the “live” area—the area that will show up inside the web browser’s window.
<title></title>
Puts the name of the document in the title bar. This is what will show up as a bookmark or favorite. NOTE: this is not the same as the html file name.

Text Tags

<p></p>
Creates a new paragraph.
<pre></pre>
Creates preformatted text. In other words, the exact spacing of what you type will be preserved in the browser. Don’t just use “pre” text to space things, though.
<h1></h1>
Creates the most important headline (aka “header”).
<h2></h2>
Creates the next most important headline.
<h3, h4, h5, h6> </h3, h4, h5, h6>
Creates other headlines, in order of semantic importance (ie <h4>This is a fourth-level header</h4>).
<em></em>
Emphasizes a word (visually with italics). 
<strong></strong>
Emphasizes a word (visually with bolding). 

Links

<a href= “URL”>Your link text</a>
Creates a hyperlink.
<a href= “mailto:someone@somewhere.com”>Your link text</a>
Creates an email link.
<a href= “#top”>Your link text</a>
Links to that target location from elsewhere in the document.

For example,

<h1 id=”top”>Your Header Here</h1>

 

<a href= “#top”>Back To Top</a>

Formatting

<ol></ol>
Creates an ordered (numbered) list.
<ul></ul>
Creates an unordered (bulleted) list.
<li></li>
Precedes and follows each list item, and adds a number if in an OL or a dot if in a UL.
<dl></dl>
Creates a definition list.
<dt></dt>
Precedes and follows each definition term.
<dd></dd>
Precedes and follows each definition.
<blockquote></blockquote>
For offset quotations.
<div>
A generic block tag, much used with CSS.
<span>
A generic inline tag, much used with CSS.

Graphic Elements

<img src=”celinedion.jpg” alt = “Celine Dion Las Vegas 2007″/>
Adds an image. Includes the location: if there’s no slashes, the image is in the same folder as the html page it appears on. If there are slashes (ie “bandswhichsuck/nickelback.jpg”), it’s in a lower folder in the hierarchy.
The “alt” attribute adds an “alternate” description of an image or its function. Element required by much legislation for people with disabilities. Also used by screen reader software and search engines.
<hr />
Inserts a horizontal rule.

Tables

<table></table>
Creates a table.
<tr></tr>
Creates a table row.
<td></td>
Creates table cells. “TD” stands for “table data.”
<th></th>
Creates a table header (a normal cell with bold, centered text).

For example, the following HTML

<table><tr><td>cat</td><td>dog</td></tr></table>

will produce a table that has one row and two columns (two cells, in other words).

Table Attributes

NOTE: many of these attributes can be controlled via CSS.

<table border=#>
Sets width of border around table cells.
<table cellspacing=#>
Sets amount of space between table cells.
<table cellpadding=#>
Sets amount of space between a cell’s border and its contents.
<tr align=?> or <td align=?>
Sets alignment for cell(s) (left, center, or right).
<tr valign=?> or <td valign=?>
Sets vertical alignment for cell(s) (top, middle, or bottom).
<td colspan=#>
Sets number of columns a cell should span (go across).
<td rowspan=#>
Sets number of rows a cell should span (go across).
<td nowrap>
Prevents the lines within a cell from being broken to fit.

Forms

(For your forms to actually do anything requires server- or client-side scripts. The HTML creates the form, but the script processes the submitted data.)

<form></form>
Creates a form.
<select multiple name=”NAME” size=?></select>
Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.

<option>Sets off each menu item.<select name=”NAME”></select>Creates a pulldown menu.<option>Sets off each menu item.<textarea name= “NAME” cols=40 rows=8></textarea>Creates a text box area. Columns set the width; rows set the height.<input type=”checkbox” name= “NAME”>Creates a checkbox. Text follows tag.<input type= “radio” name= “NAME” value= “x”>Creates a radio button. Text follows tag.<input type=text name= “foo” size=20>Creates a one-line text area. Size sets length, in characters.<input type=”submit” value= “NAME”>Creates a Submit button.<input type=”image” border=0 name= “NAME” src=”name.gif”>Creates a Submit button using an image.<input type=”reset”>Creates a Reset button.

Standard