Summary of HTML Tags

Writing HTML | About | FAQ | Alumni | Tags | Index |

/ December, 1995 / version 2.0 / version history /

Summary of HTML Tags Used in the Tutorial

NOTE: This page uses HTML tables for display (which you will learn how to do in lesson 21). If it looks like a mess, then your web browser probably does not support the <table> tags and you might want to use the "no-tables" tag summary page. We also highly recommend Kevin Werbach's Bare Bones Guide to HTML.

Web Page Structure

<html> <head>...</head> <body>...</body> </html>
HTML Structure
Basic structure for any HTML document Lesson 1

<title>...</title>
Document Title
Goes inside the <head>...</head> Lesson 1

<body bgcolor=#XXXXXX>
Solid Color Background
Color the background of the web page. Lesson 16

<body background= "filename.gif">
Texture File Background
Use a graphic image to repeatedly "tile" and fill the web browser page. Lesson 16

<body TEXT=#XXXXXX LINK=#YYYYYY VLINK=#00HH00>
Colored Text and Hyperlinks
Color all of the text or hypertext items to any color the reader desires. Lesson 16

Text Formatting

<Hn>...</Hn> <Hn align=center>...</Hn>
Heading
Section heading of variable text size, where n=1 to 6. align=center for aligning the heading in the center of the page. Lesson 3

<b>...</b> <i>...</i> <tt>...</tt>
Style
Apply bold, italic, or typewriter (monospaced font) Lesson 5

<address>...</address>
Address
Italicized and offset text for page footers Lesson 12

<blockquote>... </blockquote>
Blockquote
Indents and offsets text for long quotations Lesson 13

<pre>...</pre>
Preformatted Text
Displays in monsospaced font with all space and carriage returns preserved. Lesson 9

&xxxx;
Special Characters
Codes for special character sets and diacritical marks Lesson 10

<blink>...</blink>
Blink
Flashes text in a very annoying manner. Lesson 17

<font size=X>... </font>
Font Size
Change the size of a selection of text where X=1-7. Can also use relative size changes (-1, +2, -1, -2, etc...) to current <basefont=Z> value. Lesson 18

<big>...</big> <small>...</small>
Font Size
Change the size of a selection of to a size greater or smaller then the normal sized text. Lesson 18

<font color=#XXXXXX> ... </font>
Font Color
Change the color of a selection of text where XXXXXX is the hexadecimal code for the colors RGB values. Lesson 18

<sup>...</sup> <sub>...</sub>
Superscript/Subscript
Create superscripts (i.e. x³ + 2xy + y² = 0) or subscripts (i.e. H₂SO₄) Lesson 18

Text Breaks / Divisions

<p>
Paragraph
Forces new paragraph with one blank line separator Lesson 4

<br>
Line Break
Forces new line without blank line separator Lesson 4

<hr> <hr width=X size=X align=left|right noshade>
Hard Rule
Forces new line with solid line separator. Optional attributes width specifies the width of the line on the page, where X is absolute number of pixels or "X%" for a width relative to the browser window; size specifies the thickness of the line in pixels; align forces the line to be aligned to a side of the page rather than the center; noshade draws a solid line without 3D shading Lesson 4; Lesson 19; Lesson 20

<center>... </center> <p align=center>... </p>
Center Alignment
Aligns everything to the center of the page Lesson 20

<div align= left|center|right> ... </div>
Division
Aligns everything to left, center, or right side of page Lesson 20

<table border> ...</table> <table>...</table> <table border=X cellpadding=Y cellspacing=Z>... </table> <tr>...</tr> <td align=left|center|right valign=top|middle|bottom rowspan=X colspan=Y </tdgt;
Table
Simple table draws single pixel-width border and cell-wall divisions. Omitting the border attribute, or setting border=0 creates an invisble table. Values for border greater than 1 will create a thivker border around the table/ cellpadding is the amount of space (in pixels) between the cell contents and its walls. cellspacing determines the width of the inner cell walls. <tr> are table row defintions and <td> are table data definitions (one cell). Options for the <td> tags are for horizontal and vertical alignment within the cell. rowspan and colspan aatributes can be used to create cells that stretch across more than one other cell. Lesson 21

Lists

<ul> <ol> <li> <li> <li> <li> </ul> </ol>
Item Lists
Unordered Lists <ul> for bulleted items, ordered lists <ol> for numbered items Lesson 6

<ul type=xxxx> <li type=xxxx>
Bullets for Unordered Lists
Over-ride the default bullets:

type=circle
type=square
type=disc
Lesson 22

<ol type=X> <li type=X>
Number Styles for Ordered Lists
Use different characters for lists:

type=1 (1,2,3...)
type=A (A,B,C,...)
type=a (a,b,c,...)
type=I (I,II,III,...)
type=i (i,ii,iii,...)
Lesson 22

<ol start=i> <li value=j>
Number Values for Ordered Lists
start will begin a list with any positive number. value will renumber the list from the item and following with the new value. Lesson 22

<dl> <dt> <dd> <dt> <dd> </dl>
Descriptive Lists
Lists with text items <dt> and indented definitions <dd> Lesson 11

Graphics

<img src="file.gif"> <img src="file.gif" alt="###" align=top|middle|bottom| left|right height=x width=y>
Inline Image
Display a picture within web page. src (source) is the name, file path, or URL for the image file; alt (alternative) is a string of text displayed for non-graphic browsers or users with image loading turned off; align controls relation of image and surrounding text (top/middle/bottom will align ONE line of succeeding text; left/right will place image to side of page and wrap text around it); height and width are the dimensions of the image measured in pixels. Lesson 7a; Lesson 20

Hyper-Links

<a href="file.html"> hypertext</a>
Local Hypertext Link
Link to another document. Lesson 8a

URL
Uniform Resource Locator
Address for Internet resources Lesson 8b

<a href="URL"> hypertext</a>
Internet HyperText Link
Link to another Internet Site, specified by URL Lesson 8c

<a name="xyz"<...>
Named Anchor
Marks a section of text within a document with name "xyz" Lesson 8d

<a href="file.html#xyz"> hypertext</a>
Link to Named Anchor
Jump to a named anchor within the same or another document Lesson 8d

<a href="url"> <img scr="file.gif"> border=0</a>
Internet HyperGraphic Link
Inline image acts as hyperlink to site specified by URL. Including the border=0 attribute will suppress the display of a bounding box around the image Lesson 8e; Lesson 22

<a href="mailto: "doe@xyz.edu">... </a>
Internet Mail Link
Sets up email message to specified address Lesson 12

<img src="image.gif" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> </map>
Client-Side Image Map
Clickable image map interpreted by browser. ... can occur anywhere in this or another HTML file. Coordinates are top left and lower right corners of rectangular shaped region Lesson 23

Writing HTML Summary of HTML Tags

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tag.html

`Web Page Structure`
<html> <head>...</head> <body>...</body> </html>	HTML Structure Basic structure for any HTML document	Lesson 1
<title>...</title>	Document Title Goes inside the `<head>...</head>`	Lesson 1
<body bgcolor=#XXXXXX>	Solid Color Background Color the background of the web page.	Lesson 16
<body background= "filename.gif">	Texture File Background Use a graphic image to repeatedly "tile" and fill the web browser page.	Lesson 16
<body TEXT=#XXXXXX LINK=#YYYYYY VLINK=#00HH00>	Colored Text and Hyperlinks Color all of the text or hypertext items to any color the reader desires.	Lesson 16
`Text Formatting`
<Hn>...</Hn> <Hn align=center>...</Hn>	Heading Section heading of variable text size, where n=1 to 6. `align=center` for aligning the heading in the center of the page.	Lesson 3
<b>...</b> <i>...</i> <tt>...</tt>	Style Apply bold, italic, or `typewriter` (monospaced font)	Lesson 5
<address>...</address>	Address Italicized and offset text for page footers	Lesson 12
<blockquote>... </blockquote>	Blockquote Indents and offsets text for long quotations	Lesson 13
<pre>...</pre>	Preformatted Text Displays in monsospaced font with all space and carriage returns preserved.	Lesson 9
&xxxx;	Special Characters Codes for special character sets and diacritical marks	Lesson 10
<blink>...</blink>	Blink Flashes text in a very annoying manner.	Lesson 17
<font size=X>... </font>	Font Size Change the size of a selection of text where X=1-7. Can also use relative size changes (`-1, +2, -1, -2,` etc...) to current `<basefont=Z>` value.	Lesson 18
<big>...</big> <small>...</small>	Font Size Change the size of a selection of to a size greater or smaller then the normal sized text.	Lesson 18
<font color=#XXXXXX> ... </font>	Font Color Change the color of a selection of text where XXXXXX is the hexadecimal code for the colors RGB values.	Lesson 18
<sup>...</sup> <sub>...</sub>	Superscript/Subscript Create superscripts (i.e. x³ + 2xy + y² = 0) or subscripts (i.e. H₂SO₄)	Lesson 18
`Text Breaks / Divisions`
<p>	Paragraph Forces new paragraph with one blank line separator	Lesson 4
<br>	Line Break Forces new line without blank line separator	Lesson 4
<hr> <hr width=X size=X align=left\|right noshade>	Hard Rule Forces new line with solid line separator. Optional attributes `width` specifies the width of the line on the page, where X is absolute number of pixels or "X%" for a width relative to the browser window; `size` specifies the thickness of the line in pixels; `align` forces the line to be aligned to a side of the page rather than the center; `noshade` draws a solid line without 3D shading	Lesson 4; Lesson 19; Lesson 20
<center>... </center> <p align=center>... </p>	Center Alignment Aligns everything to the center of the page	Lesson 20
<div align= left\|center\|right> ... </div>	Division Aligns everything to left, center, or right side of page	Lesson 20
<table border> ...</table> <table>...</table> <table border=X cellpadding=Y cellspacing=Z>... </table> <tr>...</tr> <td align=left\|center\|right valign=top\|middle\|bottom rowspan=X colspan=Y </tdgt;	Table Simple table draws single pixel-width border and cell-wall divisions. Omitting the `border` attribute, or setting `border=0` creates an invisble table. Values for `border` greater than 1 will create a thivker border around the table/ `cellpadding` is the amount of space (in pixels) between the cell contents and its walls. `cellspacing` determines the width of the inner cell walls. `<tr>` are table row defintions and `<td>` are table data definitions (one cell). Options for the `<td>` tags are for horizontal and vertical alignment within the cell. `rowspan` and `colspan` aatributes can be used to create cells that stretch across more than one other cell.	Lesson 21
`Lists`
<ul> <ol> <li> <li> <li> <li> </ul> </ol>	Item Lists Unordered Lists `<ul>` for bulleted items, ordered lists `<ol>` for numbered items	Lesson 6
<ul type=xxxx> <li type=xxxx>	Bullets for Unordered Lists Over-ride the default bullets: `type=circle` `type=square` `type=disc`	Lesson 22
<ol type=X> <li type=X>	Number Styles for Ordered Lists Use different characters for lists: `type=1` (1,2,3...) `type=A` (A,B,C,...) `type=a` (a,b,c,...) `type=I` (I,II,III,...) `type=i` (i,ii,iii,...)	Lesson 22
<ol start=i> <li value=j>	Number Values for Ordered Lists `start` will begin a list with any positive number. `value` will renumber the list from the item and following with the new value.	Lesson 22
<dl> <dt> <dd> <dt> <dd> </dl>	Descriptive Lists Lists with text items `<dt>` and indented definitions `<dd>`	Lesson 11
`Graphics`
<img src="file.gif"> <img src="file.gif" alt="###" align=top\|middle\|bottom\| left\|right height=x width=y>	Inline Image Display a picture within web page. `src` (source) is the name, file path, or URL for the image file; `alt` (alternative) is a string of text displayed for non-graphic browsers or users with image loading turned off; `align` controls relation of image and surrounding text (`top/middle/bottom` will align ONE line of succeeding text; `left/right` will place image to side of page and wrap text around it); `height` and `width` are the dimensions of the image measured in pixels.	Lesson 7a; Lesson 20
`Hyper-Links`
<a href="file.html"> hypertext</a>	Local Hypertext Link Link to another document.	Lesson 8a
URL	Uniform Resource Locator Address for Internet resources	Lesson 8b
<a href="URL"> hypertext</a>	Internet HyperText Link Link to another Internet Site, specified by URL	Lesson 8c
<a name="xyz"<...>	Named Anchor Marks a section of text within a document with name `"xyz"`	Lesson 8d
<a href="file.html#xyz"> hypertext</a>	Link to Named Anchor Jump to a named anchor within the same or another document	Lesson 8d
<a href="url"> <img scr="file.gif"> border=0</a>	Internet HyperGraphic Link Inline image acts as hyperlink to site specified by URL. Including the `border=0` attribute will suppress the display of a bounding box around the image	Lesson 8e; Lesson 22
<a href="mailto: "doe@xyz.edu">... </a>	Internet Mail Link Sets up email message to specified address	Lesson 12
<img src="image.gif" usemap="#map_name"> <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL> </map>	Client-Side Image Map Clickable image map interpreted by browser. ... can occur anywhere in this or another HTML file. Coordinates are top left and lower right corners of rectangular shaped region	Lesson 23