HTML CODES CHEAT SHEET

HTML Codes Cheat Sheet

This page contains a list of up-to-date HTML tags / codes, complete with comments and mini video tutorials - just click on the corresponding links to launch the video.

This page is a work in progress ... now 40 minutes of free of videos.

Websites you may want to check out:

   Web design basics video tutorial: Beginners Web Design

   Beginner's tutorial on web design: www.how-to-build-websites.com.
FOUNDATION TAGS
GENERAL COMMENTS: These tags are the foundation of a web page, and as such they must be included in every page. Video
     
<!DOCTYPE ... The doctype 'tells' the browser how to read and interpret the HTML (markup*) code. Video
<html> ... </html> Creates the HTML page  
<head> ... </head>    
<title> ... </title> Sets the page title  
<body> ... </body> What you see on the page falls between these tags  
About 'markup' : Web pages can be written in either HTML or XHTML ... both are 'markup' languages.  
COMMONLY USED TAGS

GENERAL COMMENTS: Keeping with the goal of 'real-world-web design', this page of HTML CODES starts with the tags that are by far the most often used.

Note: keep in mind that most tags work in pairs - that is to say, they have an opening tag and a closing tag. Ex: <p> text </p>.

  
     
<p>...</p> PARAGRAPH TAGS VIDEO 2:34
<a href="URL">...</a> HYPER LINK TAG VIDEO 6:52
<div> ... </div> DIV TAGS VIDEO 8:17
<span> ... </span> SPAN TAGS VIDEO 2:36
<h1> ... <h1> Header tag (h1 - h6) Video
comments: header tags are used to create headers (think: 'headlines' or 'titles') and can range in level of importance from 1 to 6; as in <h1> ... </h1> to <h6> ... </h6>. Where h1 is the most important and h6 is the least.  
     
<img src="..." border="0" /> Image tag Video
     
LIST TAGS    
<ol><li> ... </li></ol> HTML LIST TAGS VIDEO 4:51
<ul><li> ... </li></ul>
comments: both list types are made up of one sub-tag, called the 'list item': <li> ... </li>. List item tag pairs appear once for every item in the list.  
     
<dl><dt>...</dt> <dd>... </dd> </dl> Definition List tags Video
comments: made up of two sub-tags - the 'definition title': <dt> ... </dt> and the 'definition data': <dd> ... </dd> tags.  
TABLE TAGS
GENERAL COMMENTS: Tables should not be used for page layout; you should be using CSS. Tables should only be used to display tabular data - data (ex: a price list) that you might see in a spread sheet.  
     
<table> ... </table> The root table tag - creates the table Video
ROOT TABLE-TAG ATTRIBUTES Video
cellpadding="#" Sets amount of space between a cell's border and its contents  
cellspacing="#" Sets amount of space between table cells
width="# or %" Sets the horizontal width of the table  
   
SUB TABLE TAGS  
<tr> ... </tr> Creates a row in the table Video
<td> ... </td> Creates a cell in the table row Video
<td colspan=#> Sets number of columns a cell should span - defaults to 1  
<td rowspan=#> Sets number of rows a cell should span - defaults to 1  
<th> ... </th> Creates a cell with the text bold and centered Video
     
FORM TAGS

GENERAL COMMENTS: Forms are used to collect information from people through a series of text boxes, list and buttons. Once a form is filled in and submitted (transmitted) to the server, a script (like a PHP page) can process this information and do all kinds of things; like store the information in a database or email it to someone.

Forms do nothing more than send the information to the server. You'll need a server-side script (PHP, ASP, CGI) to actually do something with the information.

Read this article to learn more about HTML forms.

  
   
<form method="post/get" action="..." > ... </form> Video
   
SUB FORM TAGS  
<select name="..." ><option value="...">...</option></select> Video
optional element: 'multiple' - allows user to select more than one item from the select list  
   
<input type="radio" name="..." value="..."> Video
<input type="checkbox" name="..." value="..."> Video
<input type="submit"> Video
<input type="reset" value="..."> Video
<input type="text" size="..." > Video
<textarea name="..." rows="..." cols="..." > ... </textarea> Video
   
<input type="file" name="..." size="..." /> Video

Comment: allows users to select a file to upload with the form. You will still need a server-side script to process the form and 'grab' the file. I would suggest using one of the following server side scripting options: PHP, JSP, ASP, Cold Fusion, and last but not least, CGI.

About CGI: CGI was the first way to process form data on the Internet. It had its day, but its day has long passed. If you do things with CGI (usually with the PERL scripting language,) you will be jumping into into a world of pain! CGI is old, tedious, slow, and much harder to work with than any of the modern languages like PHP and JSP.

  
   
<input type="hidden" name="..." value="..." /> Video
Comment: used to hide information in a form  
   
<input type="image" src="..." name="..." alt="..." /> Video
Comment: using an image to submit a form  
   
<fieldset><legend align="left" > ...</legend> ... </fieldset> Video
Comment: used to group form elements  
   
FORM TAG OPTIONS  
tabindex="#" - sets the tab order of form elements Video
accesskey="..." - lets users select items using their keyboard Video
disabled="disabled" - used to disable form elements Video
readonly="readonly" - keeps form elements from being changed Video
MISC. TAGS
GENERAL COMMENTS: What can I say, these are just cool tags that are pretty sweet ... sweet like candy!  
     
<iframe src="page.html" >...</iframe> Inline frame tag Video
options: width, height, name    
     
<sup> ... </sup> superscript tag Video
<sub> ... </sub> subscript tag Video
<a href="mailto:emailAddress?subject=..."> ... </a> Video

Comment: creates a link that causes the browser to launch the user's default email program.

About the 'subject' option: used to automatically fill in the 'subject' field in the email program.

  
     
<a name="NAME"></a> creates target location Video
<a href="#NAME"></a> links to target location Video
<br /> inserts a line break  
CSS CHEAT SHEET - much more to come!
GENERAL COMMENTS: CSS is now the way to style and layout your pages. If you are not familiar with CSS, then you should visit my CSS tutorial website.  
     
class="..." assigns a class to a tag Video
Comments: a css class can be applied to many tags on a page.  
     
id=" ... " assigns an ID to a tag Video
Comments: a css ID can be applied to only one tag on the page - it is meant to be a unique identifier on the page. Use to 'tag' tags with an ID if you want to uniquely identify it.  
   
cursor: Video
ex: <a href=”helpPage.html” style="cursor: help"> Help </a>
     

cursor: auto;

N/A

Returns control to the User Agent

cursor: crosshair;

Crosshairs, usually used for precision placement

cursor: default;

The system's default cursor, usually an arrow

cursor: pointer;

A hand, used to indicate a clickable object

cursor: move;

Indicates a moveable object

cursor: text;

Selectable or editable text

cursor: wait;

An hourglass, used to show the system is busy and the user should wait

cursor: help;

A help question mark, to indicate help information

cursor: e-resize;

Resize right

cursor: ne-resize;

Resize up and right

cursor: n-resize;

Resize up

cursor: nw-resize;

Resize up and left

cursor: w-resize;

Resize left

cursor: sw-resize;

Resize left and down

cursor: s-resize;

Resize down

cursor: se-resize;

Resize down and right

Comments: css has a bunch of propeties that can do some nifty things - like change the mouse cursor when someone moves their mouse over a tag.  
COMMON HTML TAGS THAT SHOULD NOT BE USED
GENERAL COMMENTS: The following is a short list of commonly used tags that should not be used. Most of these tags can be replaced with CSS. Do yourself a favor if you still use these tags, stop using them and learn CSS!  
     
<b>...</b> Bold tag Video
<i> ... </i> Italic tag  
<font> ... </font> Font tag  
<center> ... </center>    
<applet> ... </applet>

Used to insert Java applets - mini programs written in Java. Today you should use the <object> tag.

Java applets are just a pain in the neck anyway because of Java runtime compatibility issues ... use Flash MX instead.
<u> ... </u> Underlined text  
<frameset> <frame src="..." /> </frameset>  
Comments: framesets were largely used to format pages due to the limitations of HTML - limitations that no longer exist. Use CSS and iframes and forget about frames!  

COMMENTS

If you’ve read any of my web design articles, you probably picked up on the fact that there are quite a few tags in HTML that need to be forgotten.

You see, HTML and web design was put together on a ‘nerd to use’ (need to use) basis. Basically, when the powers that be (a bunch of nerds) figured we needed to do something in our web pages (like give text color for example,) they came up with a new tag.

Now this approach of creating new tags along the way worked for a while, but it quickly created a big mess that we called HTML. This big mess of tags made web design tedious and time-consuming.

Unfortunately, most web designers still use (and web design courses teach) this ‘bear skins and stone knives’ method of web design … I don’t and so the tags list reflects that.

Thanks,

Stefan Mischook

Top
© 1996 -
Fatal error: Uncaught Error: Undefined constant "Y" in /home/killersi/public_html/HTML_CODES/index.php:914 Stack trace: #0 {main} thrown in /home/killersi/public_html/HTML_CODES/index.php on line 914