HTML Tags Chart

Tag

Name

Code Example

Browser View / Attributes

Notes

<!--

comment

(Nothing will show.)

For inserting invisible comments

You can add comments to your (X)HTML documents to remind yourself (or future editors) what you were trying to achieve with your (X)HTML tags. These comments only appear when the document is viewed in a text editor. In the browser, they are invisible to the visitors.

<a -

anchor

<a href="http://www.webdesigntoolkit.net/">
            Web Design Toolkit</a>

Web Design Toolkit

accesskey event href name tabindex target

<a name=""> </a>
For creating links and anchors

If you have more than one Web page, you will probably want to create links from one page to the next (and back again). You can also create connections to Web pages designed by other people on other servers.

<b>

bold

This is an example of <b>Bold</b> text.

This is an example of Bold text.

<b> </b>

For displaying text in boldface

<big>

big (text)

Don't forget the upcoming <big>BIG</big> event!

Don't forget the upcoming BIG event!

<big> </big>

For making text bigger than the surrounding text

<body>

body of HTML document

<body>The content of your HTML page</body>

(Contents of your web page)

alink, link, vlink background bgcolor text

<body> </body>

For enclosing the main content area of a page

<br />

line break

The White House<br />1600 Pennsylvania Avenue NW<br />Washington, DC 20500

The White House
1600 Pennsylvania Avenue NW
Washington, DC 20500

<br />

For creating a line break

HTML, XHTML & CSS For Dummies
By Ed Tittel, Jeff Noble

center

<center>This will center your contents</center>

This will center your contents

<center> </center>

For centering text, images, or other elements

The <center> tag has been deprecated, but remains well supported, and can be used with virtually any element on your page.

<dd>

definition description

<dl>

            <dt>HTML</dt>

            <dd>HyperText Markup Language</dd>

            <dt>XHTML</dt>

            <dd>Extensible Hypertext Markup Language</dd>

            <dt>CSS</dt>

            <dd>Cascading Style Sheets</dd>
						
            </dl>

HTML: HyperText Markup Language
XHTML: Extensible Hypertext Markup Language
CSS: Cascading Style Sheets

<dd> </dd>

For marking a definition in a list

See also <dl> and <dt>

<div>

division

<div>The content of a logical block or division: text, images, tables, forms, embeded objects, etc.</div>

(Contents of the division)

align class id

<div> </div>

For dividing a page into block-level sections

Breaking up your page into divisions allows you to apply styles to an entire chunk of your page at once. This is particularly useful for designing layouts with CSS.

<dl>

definition list

<dl>

            <dt>HTML</dt>

            <dd>HyperText Markup Language</dd>

            <dt>XHTML</dt>

            <dd>Extensible Hypertext Markup Language</dd>

            <dt>CSS</dt>

            <dd>Cascading Style Sheets</dd>
						
            </dl>

HTML: HyperText Markup Language
XHTML: Extensible Hypertext Markup Language
CSS: Cascading Style Sheets

<dl> </dl>

For creating a definition list

This type of list is suited to glossaries, and any list that pairs a word or phrase with a longer description.

See also <dd> and <dt>

<dt>

definition term

<dl>

            <dt>HTML</dt>

            <dd>HyperText Markup Language</dd>

            <dt>XHTML</dt>

            <dd>Extensible Hypertext Markup Language</dd>

            <dt>CSS</dt>

            <dd>Cascading Style Sheets</dd>
						
            </dl>

HTML: HyperText Markup Language
XHTML: Extensible Hypertext Markup Language
CSS: Cascading Style Sheets

<dt> </dt>

For marking a term to be defined in a list

See also <dd> and <dl>

<em>

emphasis

This is an <em>Example</em> of using the emphasis tag.

This is an Example of using the emphasis tag.

<em> </em>

For emphasizing text, usually with italics

<font>

font

<font face="Times New Roman">Example</font>

Example

<font> </font>

For changing the size, face, and color of the text

The <FONT> tag is deprecated but supported.

Register domain names for $9.95/yr at JDR-net.net

Register Domain Names: only $9.95/year at JDR-net.net

<font face="Times New Roman" size="4";>Example</font>

Example

<font face="Times New Roman" size="+3" color="#ff0000">Example</font>

Example

color face size
• HTML Color Codes

<form>

form

<form action="mailto:you@yourdomain.com"><center>

            Name: <input name="Name" value="" size="35"><br /> 

            Email: <input name="Email" value="" size="35"><br /><br />

            <input type="submit" value="Submit Query"></center>

            </form>

action enctype method

<form> </form>

For creating fill-in forms

A form has three important parts: the <form> tag, which includes the URL of the script that will process the form, the form elements, like fields and menus, and the submit button which sends the data to the script on the server.

See also <input>

heading 1
heading 2
heading 3
heading 4
heading 5
heading 6

<h1>Heading 1 Example</h1>

            <h2>Heading 2 Example</h2>

            <h3>Heading 3 Example</h3>

            <h4>Heading 4 Example</h4>

            <h5>Heading 5 Example</h5>

            <h6>Heading 6 Example</h6>

Heading 1 Example

Heading 2 Example

Heading 3 Example

Heading 4 Example

Heading 5 Example

Heading 6 Example

<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>

For creating headlines

(X)HTML provides for up to six levels of headers in your Web page for separating your page into manageable chunks.

<head>

heading of HTML document

<head>Contains elements describing the document, i.e., TITLE and META elements, etc.</head>

(Typically, nothing will show)

<head> </head>

For creating the head section, which contains information about the page, including the title, author, keywords, style sheets, and scripts

<hr />

horizontal rule

Upper content
<hr />
Lower content

Upper content

Lower content

<hr />

For creating horizontal rules

One graphic element that is completely supported by the majority of the browsers is the horizontal rule. There are several attributes you can use to jazz up horizontal rules, although they have all been deprecated in favor of styles.

More info: Head First HTML with CSS & XHTML

Upper content
<hr width="50%" size="3" />
Lower content

Upper content

Lower content

Upper content
<hr width="50%" size="3" noshade />
Lower content

Upper content

Lower content

Upper content
<hr width="75%" color="#ff0000" size="4" />
Lower content

Upper content

Lower content

Upper content
<hr width="25%" color="#6699ff" size="6" />
Lower content

Upper content

Lower content

align noshade size width
• HTML Color Codes

<html>

hypertext markup language

<html>

            <head>

            <meta>

            <title>Title of your web page</title>

            </head>

            <body>(Contents of your Web page)

            </body>

            </html>

(Contents of your Web page)

<html> </html>

For identifying a text document as an (X)HTML document

<i>

italic

<i>Example</i>

Example

<i> </i>

For displaying text in italics

<img />

image

<img src="image_sign.png" width="50" height="40" border="0" alt="image sign (image)" />

align alt border hspace vspace src usemap width height

<img />

For inserting images on a page

<input>

input field

Example 1:

<form method=post action="/cgi-bin/example.cgi">

            <input type="text" size="10" maxlength="30">

            <input type="Submit" value="Submit">

            </form>

<input>
For creating form elements

Example 1: A simple form to input and submit text
You can change the size of your INPUT box simply by changing the SIZE value. In addition, you can change the amount of text input by changing the MAXLENGTH value.
Example 2: Set the style
You can change the font, text color, text size and the background color, by changing the STYLE attributes.
Example 3: Spice it up with tables and images
You can use a graphic image in place of the submit button to spice up your page. This example is set up in a table with the TD background color set to #E7E7E7.
Example 4: Include a text area
You can change the size of your text box by changing the number of ROWS and COLS (columns).
Example 5: Set default inputs
You can create a default selection in your OPTION list by adding the word selectedright after the word OPTION between the lesser than and greater than symbols. In this example, option 2 is the default selection.
Example 6: Radio buttons and check boxes
You can create a default selection in your RADIO and CHECKED list by adding the word CHECKED right after the OPTION elements between the lesser than and greater than symbols. In this example, option 2 and selection 2 are the default selections.

Example 2:

<form method=post action="/cgi-bin/example.cgi">

            <input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #e7e7e7;" size="10" maxlength="30">

            <input type="Submit" value="Submit">

            </form>

Example 3:

<form method=post action="/cgi-bin/example.cgi">

            <table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#e7e7e7"><input type="text" size="10" maxlength="30"></td><td bgcolor="#e7e7e7" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table>

            </form>

Example 4:

<form method=post action="/cgi-bin/example.cgi">

            Enter Your Comments:<br>

            <textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br>

            <input type="Submit" value="Submit">

            <input type="Reset" value="Clear">

            </form>

<input>

input field

Example 5:

<form method=post action="/cgi-bin/example.cgi">

            <center>

            Select an option:

            <select>

            <option >option 1</option>

            <option selected>option 2</option>

            <option>option 3</option>

            <option>option 4</option>

            <option>option 5</option>

            <option>option 6</option>

            </select><br>

            <input type="Submit" value="Submit"></center>

            </form>

Example 6:

<form method=post action="/cgi-bin/example.cgi">

            Select an option:<br>

            <input type="radio" name="option"> Option 1

            <input type="radio" name="option" checked> Option 2

            <input type="radio" name="option"> Option 3

            <br>

            <br>

            Select an option:<br>

            <input type="checkbox" name="selection"> Selection 1

            <input type="checkbox" name="selection" checked> Selection 2

            <input type="checkbox" name="selection"> Selection 3

            <input type="Submit" value="Submit">

            </form>

accesskey align checked disabled event maxlength name size src readonly tabindex type value

<li>

list item

Example 1:

<ul>

            <li type="disc">List item 1</li>

            <li type="circle">List item 2</li>

            <li type="square">List item 3</li>

            </ul>

Example 2:

<ol type="i">

            <li>List item 1</li>

            <li>List item 2</li>

            <li>List item 3</li>

            <li>List item 4</li>

            </ol>

Example 1:

List item 1
List item 2
List item 3

Example 2:

List item 1
List item 2
List item 3
List item 4

type value

<li> </li>

For creating a list item

You can change your bullet types by adding TYPE= disc, circle or square attribute.

In an ordered list you can set the type to i and the numerical list will display as Roman numerials.

See also <ol> (ordered list) and <ul> (unordered list)

<link>

link

<head>

            <link rel="stylesheet" type="text/css" href="style.css" />

            </head>

(Nothing will show)

href media title type rel

<meta>

meta

<meta name="Description" content="Description of your site">

            <meta name="keywords" content="keywords describing your site">

(Nothing will show)

content http-equiv name

• Tips for composing Search Engine–Friendly <META> Tags

<meta>

The META description and keyword tags are used to enable search engines to properly index your website.

The META refresh tag is used to automatically redirect your visitor to another web address. This tag is generally used when a website moves and needs to have traffic redirected to the new location.

The META no-cache tag is used to prevent the user's browser from storing a copy of your Web page in its cache file.

The META rating tag is used to enable you to rate your website with the search engines. A general rating means that your webpage contains no adult content and is safe for all ages.

The META robots content all tag is used to direct the search engines to index all of your Web page content.

The META robots noindex tag is used to tell the search engines not to index a Web page.

<meta http-equiv="Refresh" content="4;url=http://www.yourdomain.com/">

<meta http-equiv="Pragma" content="no-cache">

<meta name="rating" content="General">

<meta name="robots" content="all">

<meta name="robots" content="noindex,follow">

ordered list

ordered list

Numbered

<ol>

            <li>List item 1</li>

            <li>List item 2</li>

            <li>List item 3</li>

            <li>List item 4</li>

            </ol>

Numbered Special Start

<ol start="5">

            <li>List item 1</li>

            <li>List item 2</li>

            <li>List item 3</li>

            <li>List item 4</li>

            </ol>

Lowercase Letters

<ol type="a"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Capital Letters

<ol type="A"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Capital Letters Special Start

<ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Lowercase Roman Numerals

<ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Capital Roman Numerals

<ol type="I"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Capital Roman Numerals Special Start

<ol type="I" start="7"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol>

Numbered

List item 1
List item 2
List item 3
List item 4

Numbered Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters

List item 1
List item 2
List item 3
List item 4

Capital Letters Special Start

List item 1
List item 2
List item 3
List item 4

Lowercase Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals

List item 1
List item 2
List item 3
List item 4

Capital Roman Numerals Special Start

List item 1
List item 2
List item 3
List item 4

type start

<ol> </ol>

For creating ordered lists

The ordered list is perfect for providing step-by-step instructions on how to complete a particular task or for creating an outline (complete with links to corresponding sections, if desired) of a larger document. You may create an ordered list anywhere in the body section of your HTML document.

listbox option

<form method=post action="/cgi-bin/example.cgi">

            <center>

            Select an option:

            <select>

            <option>option 1</option>

            <option selected>option 2</option>

            <option>option 3</option>

            <option>option 4</option>

            <option>option 5</option>

            <option>option 6</option>

            </select><br />

            </center>

            </form>

disabled label selected value

<option> </option>

For creating the individual options in a form menu

You can create a default selection in your OPTION list by adding the word selected right after the word OPTION between the lesser than and greater than symbols. In this example, option 2 is the default selection.

<p>

paragraph


            <p align="left">
						
            Example 1:<br />

            <br />

            This is an example<br />

            displaying the use<br />

            of the paragraph tag. 

            </p>

            <p align="right">
						
            Example 2:<br />

            <br />

            This is an example<br />

            displaying the use<br />

            of the paragraph tag. 

            </p>

	          <p align="center">
					
            Example 3:<br />

            <br />

            This is an example<br />

            displaying the use<br />

            of the paragraph tag.

						</p>

Example 1:

This is an example
displaying the use
of the paragraph tag.

Example 2:

This is an example
displaying the use
of the paragraph tag.

Example 3:

This is an example
displaying the use
of the paragraph tag.

<p> </p>

For creating new paragraphs

The closing </p> tag is required in XHTML and when applying styles to a paragraph. So it is recommended that it always be used to end a paragraph. Never-the-less, in HTML, the closing </p> tag is optional.

<small>

small (text)

<small><small>Example</small></small>

Example

<small> </small>

For decreasing the size of text

deleted text

<strike>Example</strike>

~~Example~~

<strike> </strike>

also <s> </s>

For displaying text with a line through it

strong emphasis

<strong>Example</strong>

Example

<strong> </strong>

For emphasizing text logically, usually in boldface

<table>

table

Example 1:


            <table border="4" cellpadding="2" cellspacing="2" width="100%">

            <tr>

            <td>Column 1</td>

            <td>Column 2</td>

            </tr>

            </table>

Example 2:


            

            <table border="3" bordercolor="red" cellpadding="2" cellspacing="2" width="100%">

            <tr>

            <td>Column 1</td>

            <td>Column 2</td>

            </tr>

            </table>

Example 3:


            

            <table cellpadding="2" cellspacing="2" width="100%">

            <tr>

            <td bgcolor="#cccccc">Column 1</td>

            <td bgcolor="#cccccc">Column 2</td>

            </tr>

            <tr>

            <td bgcolor="#ffffff">Row 2</td>

            <td bgcolor="#ffffff">Row 2</td>

            </tr>

            </table>

HTML Tables 101 · Learn the basics

How to turn a simple list into an HTML table · Markup a list with HTML to create a simple table.

Example 1:

Column 1

Column 2

Example 2:

Column 1

Column 2

Example 3:

Column 1	Column 2
Row 2	Row 2

align bgcolor border bordercolor cellpadding cellspacing frame rules width
• HTML Color Codes

<table> </table>

For creating tables

The </table> tag is NOT optional. Some browsers won't display tables without a closing tag.

What is a table?

A table is a rectangular arrangement of rows and columns on your screen.

<tr> row: a single "line" of data that runs across the table
column: a single vertical section of data
<td> cell: the intersection of a row and a column
<caption> caption: text that appears (usually) above the table and is used to describe the contents of the table
<th> headers: the first row of the table (optional)
borders: optional lines that surround the table and each cell

<td>

table data

<table border="2" cellpadding="2" cellspacing="2" width="100%">

            <tr>

            <td>Column 1</td>

            <td>Column 2</td>

            </tr>

            </table>

Column 1

Column 2

<td> </td>

For creating cells in a table

<th>

table header

<div align="center">

            <table>

            <tr>

            <th>Column 1</th>

            <th>Column 2</th>

            <th>Column 3</th>

            </tr>

            <tr>

            <td style="background-color:#ffffff;">Row 2</td>

            <td style="background-color:#ffffff;">Row 2</td>

            <td style="background-color:#ffffff;">Row 2</td>

            </tr>

            <tr>

            <td style="background-color:#ffffff;">Row 3</td>

            <td style="background-color:#ffffff;">Row 3</td>

            <td style="background-color:#ffffff;">Row 3</td>

            </tr>

            <tr>

            <td style="background-color:#ffffff;">Row 4</td>

            <td style="background-color:#ffffff;">Row 4</td>

            <td style="background-color:#ffffff;">Row 4</td>

            </tr>

            </table>

            </div>

Column 1	Column 2	Column 3
Row 2	Row 2	Row 2
Row 3	Row 3	Row 3
Row 4	Row 4	Row 4

<th> </th>

For creating column headers in a table

<title>

document title

<title>Title of your HTML page</title>

(Title of your web page will be viewable in the title bar.)

<title> </title>

For creating the title of the page in the browser's title bar area

Required

<tr>

table row

<table border="2" cellpadding="2" cellspacing="2" width="100%">

            <tr>

            <td>Column 1</td>

            <td>Column 2</td>

            </tr>

            </table>

Column 1

Column 2

<tr> </tr>

For creating rows in a table

<tt>

teletype

<tt>Example</tt>

Example

<tt> </tt>

For displaying text in a monospaced font

<u>

underline

<u>Example</u>

Example

<u> </u>

For displaying text with a line underneath it

<ul>

unordered list

Example 1:<br />

            <br />

            <ul>

            <li>List item 1</li>

            <li>List item 2</li>

            </ul>

            <br />

            Example 2:<br />

            <ul type="disc">

            <li>List item 1</li>

            <li>List item 2</li>

            <ul type="circle">

            <li>List item 3</li>

            <li>List item 4</li>

            </ul>

            </ul>