Back to Earthchronicle.com Homepage Chronicle Subjects (Alphabetical or ECAN Codes) I Have Something to Add! Site Index Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!

HTML Reference Page

Warning. I make no claims that this page will be useful for anyone else. I've simply gotten sick of pounding the World Wide Web looking for the same usage details on a tag that I'd looked up the week before. So I've collected all the points "I" need to remember into a reference guide here. It's handy for looking up details and attributes while you're building a page. If you're interested in learning HTML, a tutorial will probably suit you better. There are a number of good ones available on the web. I have used and recommend www.htmlgoodies.com. If you don't want a full tutorial... just some quick desgin tips, I did put all the basics for writing a webpage together. Once you're done with that there's a short tips section on how to control webpage presentation.

I'm farily conservative, and I want my pages to be as widely supported as possible. So I leave out a lot of new material because it's not as widely supported as I want. Any tags eliminated in HTML 4.0 do not appear either. However, I hope it proves useful for you. With those caveats made feel free to browse.

Also, there are a few notes that will appear...

  • (Safe, only problems on earliest browsers) Almost guaranteed to run. Its not foolproof, but you have to run something like a 1990s version of Mosaic or Internet Explorer 1.0 for it not to work.
  • (Warning, only latest browsers) I'm pretty conservative, latest in this case means they may cause problems for people running version 3 or even possibly 4 of either Netscape or Internet Explorer. There are some that are inescapable like the <body> attributes bgcolor= and text=. However, if you can find a way around them, you may open your page to some extra visitors. Features more recent than that don't appear since they will cut off significant numbers of visitors from your page.
  • (Deprecated) This is a tag that works but its functions are being replaced by something else, probably cascading style sheets (CSS). It is targeted for elimination in future versions of HTML. This may cause problems in the future, though they may be more widely accessible now.

Table of Contents
<!-- --> <!Doctype> Anchor <a> Attributes <b>
<base> <basefont> The Basics <body> Bold
Break <br> Comments Definition <dd> Definition List <dl> Definition Term <dt>
Division <div> <!Doctype> <font> <frame> Frames
<frameset> <head> Heading <h1> Horizontal Rules <hr> <html>
Images <img> Italic <i> <link> Links List Item <li>
Lists <meta> <noframes> Ordered List <ol> Paragraphs <p>
Preformatted <pre> Controlling Presentation <span> Strikethrough <s> <style>
Subscript <sub> Superscript <sup> <table> Table Data <td> Table Row <tr>
<title> Typewriter Text <tt> Underline <u> Unordered List <ul> White Space

Kudos to Laura Lemay's fabulous HTML reference for assimilating browser compatibility tables with attributes. Other references will tell you <table> is HTML 3.2 Great, that sounds safe to use. But the cool bordercolordark= attribute you included means even Netscape will now balk at your "simple" table. Ooops. Lemay's tables will save you worlds of heartache and is an excellent learning guide/expert reference to boot. And everytime you see an attribute that comes with a warning... thank Laura Lemay.

Lemay, Laura. Teach Yourself Web Publishing with HTML 4 in 21 Days. Professional Reference ed. Indianapolis: Sams Publishing, 1999. 1020-1070.

Comment <!-- -->

Comments set off text you don't want to appear on the webpage but want/need anyway.
LOCATION: As desired, anywhere in the document.
SYNTAX: <!--Text which doesn't appear.-->

TIPS: Comments are the only way to add programmers notes about changes, problems, things you want to add later. A few browsers have trouble with comments not on one line; it's a relatively minor problem, but if you can keep a comment on one line, great.

They are also handy to enclose a part of your HTML. As such comments are an important diagnostic tool to find problems. You can also use it to set off HTML that you haven't finished writing yet, but I find it easier and safer to work on a copy of the page. It doesn't matter if I screw it up, (The original version is still safe.) and I can check every change I make on the fly in my browsers.

It's also used to enclose a <style> tag in the header; this is how to include an embedded style sheet that is easily ignored by browsers that don't have CSS capabilities.

Back to Table of Contents

<!Doctype>

!Doctype indicates what kind of HTML the document is written in.
LOCATION: It's the first tag in your HTML code and the only tag that goes in FRONT of the <html> tag.
SYNTAX: Don't worry about syntax, just cut and paste the appropriate one.

  • If you are writing for the HTML 4.01 Strict standard, use this tag. (Use this if your page is designed with Cascading Style Sheets[CSS].)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • If you are writing for the HTML 4.01 Transitional standard, use this tag. (Use this if your page uses older HTML presentation tags. You can use CSS too, but if you use Deprecated tags, you're writing Transitional.)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  • If you are writing for the HTML 4.01 Frameset standard, use this tag. Frameset is HTML 4 Transitional with the <frameset> tag added. NOT for use with content pages that appear in the frames. These will be Strict or Transitional HTML. Use only with the main frame page that defines the frame structure, and uses the <frameset> tags in place of the standard <body> tags.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Looking ahead, XHTML will eventually completely replace HTML. For those eager to build XHTML documents now, here are the corresponding !Doctype tags.
  • Use this tag, if you are writing for the XHTML 1.0 Strict standard. (Use with Cascading Style Sheets[CSS].)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • Use this tag, if you are writing for the XHTML 1.0 Transitional standard. (Use if including older, Deprecated, tags.)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • Use this tag, if you are writing for the XHTML 1.0 Frameset standard. (Use with main frame page.)
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

"The <!Doctype> Tag." W3 Schools. 2005 Aug. 10 < http://www.w3schools.com/tags/tag_doctype.asp>
 

TIPS: You can easily look up explanations for all the gunk that goes into the !Doctype in any search engine, if you really want to. The important thing to remember is that you don't need to understand it. I wasn't kidding in the syntax tag. Don't understand "why" it works. Just know that it does. Pick the one that fits your web page, copy it from below, and paste it as the first line of your HTML.

This lets you use an HTML validator to confirm that your webpage is compliant. (note this doesn't mean its well-written, just that it doesn't violate the rules for 4.0 Transitional or whatever you're writing.) While you can make many decisions that create problems for your visitors, writing compliant code makes sure you don't eliminate visitors by accident. ...Now that fancy 1 MB graphic on your homepage or the ActiveX controls you added, that's your own fault.

Back to Table of Contents

Attributes

OK, so you need to center some text, or highlight something in magenta. You know you need align="center" or background-color:#FF00FF. The problem is, it's not working. Turns out the tag you used doesn't take align, or background-color, or whatever you need. What are you gonna do!?!? Well, you're in the right place. Here's a list to "reverse engineer" the tag you need. You want to center something... here are the tags that support it. Now you have to figure out some way to stick one of those tags in there. This may be completely bass ackwards, unfortunately there's no solution for that problem. It may not be pretty, but your page will be.
 

Attribute

Tag (with syntax for use, and any notes necessary)

align Can be set to: left, center, or right. Default is left.
<div align="left"> </div>
<h1 align="left"> </h1>
<hr align="center"> (Default is center.)
<img align="left"> (Set to left and right only, text flows opposite.)
<p align="left">(optional </p>)
<table align="left"></table> (aligns table)
<td align="left"> (optional </td>) (aligns table contents)
<tr align="left"> (optional </tr>) (aligns table contents)
alt Creates "Alt Text". At first when the visitor's mouse stops over the image, nothing happens. After a second or two, a yellow rectangle pops up next to the mouse cursor that says, in this case, "Pop Up Text." In text only browsers, this is all that appears in place of the picture. Alt text disappears after a second or two, so at most you have time for a couple short sentences.
<img alt="Pop Up Text.">
background (Warning, only latest browsers, Deprecated) Sets an image to be displayed in the webpage background. If the image is not the same size as a visitor's screen it will be tiled.
<body background="mytile.jpg"> </body>
<table background="mytile.jpg"></table>
Back to Table of Contents
bgcolor (Warning, only latest browsers, Deprecated) Sets the color of the background for the webpage. Default is white. (#FFFFFF)
<body bgcolor="#FFFFFF"> </body>
<table bgcolor="#FFFFFF"></table>
<td bgcolor="#FFFFFF"> (optional </td>)
<tr bgcolor="#FFFFFF"> (optional </tr>)
border Sets the width of the table or image's border in pixels. Default is 0, ie there's no border. (And the structure of a table is invisible. This is almost always best when organizing an entire page.)
<table border="0"></table>
<img border="0">
cellpadding (Warning, only latest browsers) Sets the number of pixels between the contents of the cell and the edge of the cell. Increasing cellpadding makes the cell bigger by adding white space inside the cell. Default is 1.
<table cellpadding="1"></table>
cellspacing (Warning, only latest browsers) Sets the number of pixels between the cells. Increasing cellspacing does not make the cell bigger, rather it adds white space between cells. Default is 2.
<table cellspacing="2"></table>
color Sets the text color. Default is black "#000000".
<basefont color="#000000">
<font color="#000000"> </font>
cols (Warning, only latest browsers) Sets the number of columns and their with. 50 sets a column 50 pixels wide, 50% sets a column which takes up half the screen,* sets a column which takes up all space leftover from the other rows. To set three columns, specify the width of each separated by commas "," (e.g. rows="50,50%,*")
<frameset cols="50,200,*,5%"> </frameset>
colspan (Warning, only latest browsers) Sets how many columns the cell will take up. Default is 1.
<td colspan="1"> (optional </td>)
Back to Table of Contents
face Sets the font face, e.g. Helvetica, but there is no good reference for them. Separate several faces with commas and the first font will be used unless it's unavailable. Then the second is used. If the second is not available either, the third is used, etc. Default is defined by your visitor's browser.
<basefont face="BrowserDefault">
font-size font-size:18 is 18 pixels tall. font-size:18pt is 18-point font.
<span style='font-size:18pt;color:#00FF00'>
height (Image) (Safe, only problems on earliest browsers) Sets the height of the image in pixels. Since pictures take longer to download than the comparatively webpages, text appears first, and then the image gets thrown in the middle causing all text to jump. Indicating width and height save the space aligns text properly from the beginning. Default is the actual height of the image.
<img height="100">
height (Table cell) (Warning, only latest browsers) Sets the height of the cell. (width="100" sets a 100 pixel tall cell, width="100%" sets a cell that fills the entire page.) Default is the smallest height that will fit the largest item of each column or row.
<td height="0"> (optional </td>)
href (Default page path) (Safe, only problems on earliest browsers) Sets the default link address from which all relative link addresses are derived. Default is the folder the webpage is in.
<base href="http://www.mysite.com/">
href (Page link) Sets the path to find another file. (webpage, CSS, etc.)
<link href="mystyle.css">
<a href="../index.html"> </a>
name (Safe, only problems on earliest browsers) gives an identifying name to the frame or anchor, <a>, which lets you set targets or inpage links to it.
<frame name="MyFrame"> </frame>
<a name="Inpage1"> </a>
Back to Table of Contents
noresize (Warning, only latest browsers) prohibits visitors from changing the size of the frame, otherwise they can drag the frame divider to adjust to taste. Useful for ads that visitors will want to get rid of but which you need to have up. Otherwise, it's better to leave it out, so people can adjust it to their own taste.
<frame noresize> </frame>
noshade By default, HRs have a shading scheme. The noshade attribute turns it off for a simple solid color line.
<hr noshade>
rel Can be set to "stylesheet" which determines that the external CSS will be mandatory for visitors. By adding a title= attribute, the CSS can be set to a default style that visitors have the option to change. If rel= is set to "alternate stylesheet" your visitors will get their own default CSS, but can choose yours if they want to.
<link rel="stylesheet">
rows (Warning, only latest browsers) Sets the number of rows and their heights. 50 sets a row 50 pixels tall, 50% sets a row which takes up half the screen,* sets a row which takes up all space leftover from the other rows. To set three rows, specify the height of each separated by commas "," (e.g. rows="50,50%,*")
<frameset rows="50,200,*,5%"> </frameset>
rowspan (Warning, only latest browsers) Sets how many rows the cell will take up. Default is 1.
<td rowspan="1"> (optional </td>)
size (Font size) Sets the size of the font on a scale from 1-7. Default is 3 (though the size varies from browser to browser).
<basefont size="3"> (not recommended)
<font size="3"> </font>
size (<hr> thickness) (Deprecated) Sets the thickness of the HR in pixels. Default is 2.
<hr size="2">
src (Safe, only problems on earliest browsers) Sets the path for the webpage which a frame loads, or the path for the image that a webpage loads.
<frame src="http://www.mysite.com"> </frame>
<img src="http://www.mysite.com/images/image4.jpg">
Back to Table of Contents
start (Safe, only problems on earliest browsers) Sets the number for the first item.
<ol start="1">
style (Warning, only latest browsers, CSS) Allows you to create inline CSS.
<a style='see <span>'></a> (Beware: Changing link styles is a good way to confuse people.)
<b style='see <span>'></b>
<body style='see <span>'> </body>
<dd style='see <span>'>
<div style='see <span>'> </div>
<dl style='see <span>'> (optional </dl>)
<span style='see <span>'> </span>
<table style='see <span>'> </table>
<td style='see <span>'> (optional </td>)
<tr style='see <span>'> (optional </tr>)
<tt style='see <span>'> </tt>
<u style='see <span>'> </u>
<ul style='see <span>'> </ul>
target (Safe, only problems on earliest browsers) Sets the default target of links in the webpage. Targets can be redefined in the links. Can be set to a specified frame <frame name="ThisFrame">, _blank (opens a new browser), _parent (opens in the parent frame, if there's no parent, it opens in the same frame), _self (loads into the same frame as the link), _top (opens the link in the full window; ie stops using frames). _blank is even valid for pages that don't use frames, since it opens a completely new browser. Default is _self.
<base target="_self">
<frame target="(doesn't work)"> </frame>
<a target="_self"> </a>
text (Warning, only latest browsers, Deprecated) Sets the default font color for the page. You can change this anywhere you want with <font> or <span> tags. Default is black. (#000000)
<body text="#000000"> </body>
Back to Table of Contents
title Assigns a name to the style. If rel= is set to "stylesheet", adding title= changes the CSS from a mandatory style visitors can't change to a default style that they can.
<link rel="stylesheet" title="mystyle">
type For an ordered list:
For an ordered list (with numbers) using an <ol> tag: "1" gives numbers, "a" gives lowercase alphabet, "A" gives uppercase alphabet, "i" gives lowercase Roman numerals, "I" gives uppercase Roman numerals.
<li type="1">
<ol type="1">
For an unordered list:
For an unordered list: "disc" gives solid circle bullets, "circle" gives a circle outline, and "square" gives a square outline.
<li type="disc">
<ul type="disc">
valign (Warning, only latest browsers) Can be set to: top, middle, or bottom. Default is middle.
<td valign="middle"> (optional </td>)
<tr valign="middle"> (optional </tr>)
width (Image) (Safe, only problems on earliest browsers) Sets the width of the image in pixels. Since pictures take longer to download than the comparatively webpages, text appears first, and then the image gets thrown in the middle causing all text to jump. Indicating width and height save the space aligns text properly from the beginning. Default is the actual width of the image.
<img width="100">
width (Tables) (<hr> width= is Deprecated) Sets how long the line or table is. (width="100" sets a 100 pixel wide table or line, width="100%" sets one that fills the width of page.) Default is 100%.
<hr width="100%">
<table width="100%"> </table>
<td width="100%"> (optional </td>)

Back to Table of Contents

Bold <b>

Displays text in bold.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <b style='see <span>'> </b>

style=(Warning, only latest browsers, CSS) Sets a style sheet.

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

<Base>

Sets a default target and base URL that all links are are specified relative to.
LOCATION: Between the <head>...</head> tags, and before ANY external references are made.
SYNTAX: <base href="http://www.mysite.com/" target="_self">

href=(Safe, only problems on earliest browsers) Sets the default link address from which all relative link addresses are derived. Default is the folder the webpage is in.

target=(Safe, only problems on earliest browsers) Sets the default target of links in the webpage. Targets can be redefined in the links. Can be set to a specified frame <frame name="ThisFrame">, _blank (opens a new browser), _parent (opens in the parent frame, if there's no parent, it opens in the same frame), _self (loads into the same frame as the link), _top (opens the link in the full window; ie stops using frames). _blank is even valid for pages that don't use frames, since it opens a completely new browser. Default is _self.

TIPS: <Base> is used in two ways. It is one of the ways to set a default target for a webpage with frames. It also sets the base URL that all links are are specified relative to. If you need a different base address than the folder which the webpage will be in, this is how to set it.

Back to Table of Contents

<Basefont>

(Safe, only problems on earliest browsers, Deprecated) Sets default font properties... badly.
LOCATION: Between the <head>...</head> tags.
SYNTAX: <basefont color="#000000" face="BrowserDefault" size="3">

color= Sets the text color. Default is black "#000000".

face= Sets the font face, e.g. Helvetica, but there is no good reference for them. Separate several faces with commas and the first font will be used unless it's unavailable. Then the second is used. If the second is not available either, the third is used, etc. Default is defined by your visitor's browser.

size= Sets the size of the font on a scale from 1-7. Default is 3 (though the size varies from browser to browser).

TIPS: For more about font formatting see the <font> tag. <basefont> does not display uniformly on browsers (size= is especially variable). Even though the attributes are more recent, bgcolor= and text= attributes in the <body> tag are stable across browsers AND gives you control over the background color. Or you can use <span> tags to implement CSS. These are much better options than <basefont>.

Back to Table of Contents

The Basics

This lays out the bare structure of an HTML document.
LOCATION: This is the skeleton of HTML. Everything else happens inside it.
SYNTAX: The <html> and <head> tags take no useful attributes. The <body> and <title> tags do.

The skeleton of an HTML document looks like this...

<html>
   <head>
      <title>
         The Title goes here.
      </title>
   </head>
   <body>
      The webpage as it appears goes here.
   </body>
</html>

TIPS: The <html>...</html> tags enclose the entire document and tell the browser that your web page is written in HTML. Otherwise, the visitor's browser won't know how to read it. The <head>...</head> tags enclose the HTML header which contains information that won't appear on the web page. The most important, and possibly only item in the head is the title. (Though meta tags may also appear.) The <body>...</body> tags enclose all of what will become your webpage.

In addition there are several tags that are fairly fundamental to any webpage. Anytime you need to make notes or add comments about the webpage or the HTML, you will need to add a comment so the browser knows not to display the information. Comments are always critical, but especially while you are learning. The !Doctype tag is something you should add so that validation tools can check your page properly; a handy tool to make sure your page has proper syntax, especially while you're learning. And links are so fundamental to webpages that they should be considered part of the basic structure of any webpage. For more advanced features check out Controlling Presentation.

Back to Table of Contents

<Body>

Body is one of several basic structural tags in HTML.
LOCATION: It immediately follows the </head> tag.
SYNTAX: <body background="mytile.jpg" bgcolor="#FFFFFF" style='see <span>' text="#000000"> </body>

background=(Warning, only latest browsers, Deprecated) Sets an image to be displayed in the webpage background. If the image is not the same size as a visitor's screen it will be tiled.

bgcolor=(Warning, only latest browsers, Deprecated) Sets the color of the background for the webpage. Default is white. (#FFFFFF)

style=(Warning, only latest browsers, CSS) Sets a style sheet.

text=(Warning, only latest browsers, Deprecated) Sets the default font color for the page. You can change this anywhere you want with <font> or <span> tags. Default is black. (#000000)

TIPS: HTML manuals will tell you this is the "old" way to set default colors for background and text, with a "By the way, don't do it this way. Use style sheets." which they will somehow never quite get around to teaching you. However, even bgcolor= and text= are fairly recent tags and may not be usable by some older or less common browsers. Do your best with them and hope that they simply render your page in black and white rather than crashing these browsers. There is no decent alternative to setting default font colors for the page, unless you learn to use CSS.

Oh, yes. You can easily figure out how to change link colors in <body> using a google search, but I don't go into the syntax here because... well, it's psychotically stupid. There is no faster way to confuse your visitors... and to be perfectly honest, yourself.

Back to Table of Contents

Break <br>

Sets the end of a line.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <br>

TIPS: Whatever appears after the <br> tag, is displayed on the next line down. There is no white space, between the lines however. You can even use multiple <br>s and you still don't get white space. However, if you use <br> inside the cell of a table, <td>, that's exactly what it will do; one <br> drops to the next line, two <br>s give you a line of white space, three <br>s give you two lines of white space, etc.

Back to Table of Contents

Definition <dd>

Sets the indented portion of a definition list, e.g. a block of text with a left margin indented 0.5 inches.
LOCATION: As desired, between the <dl>...</dl> tags.
SYNTAX: <dd style='see <span>'>

style=(Warning, only latest browsers, CSS) Sets a style sheet.

TIPS: See also the sections on definition lists and unindented definition term.

Back to Table of Contents

Division <div>

Sets a section of text aside so it can be modified from the surrounding HTML. Works but clunky.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <div align="left" style='see <span>'> </div>

align= Can be set to: left, center, or right. Default is left.

style=(Warning, only latest browsers, CSS) Sets a style sheet.

TIPS: Tables can also be used to center text or insert CSS. Tables are more flexible and give you more control over your layout than division which by default makes no change to standard HTML formatting at all. Therefore, there's nothing wrong with division, but it's been rendered almost obsolete by other tags.

Back to Table of Contents

Definition List <dl>

Sets the boundaries for a definition list structure.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <dl style='see <span>'> (optional </dl>)

style=(Warning, only latest browsers, CSS) Sets style sheet info.

TIPS: The Lists section has important basics on list use, or view the other list styles, ordered lists and unordered lists. See also the sections on the other definition list tags, indented definitions and the definition term. You don't have to follow the alternating <dt> <dd> structure that you see in most examples, you can repeat the same tag...

With Multiple <dt> tags...
The indented definition tag, <dd>, looks like this.
The First <dt> tag looks like this.
The Second <dt> tag looks like this.
The Third <dt> tag looks like this.
The indented definition tag, <dd>, looks like this. So you can do this as much as you want.
With Multiple <dd> tags you get the opposite effect...
The definition term, <dt>, tag looks like this.
The First <dd> tag looks like this.
The Second <dd> tag looks like this.
The Third <dd> tag looks like this.
The definition term looks like this. and you can do this as much as you want.

Note that the first example even uses a <dd> tag first which you won't find in any example. Obviously, however, it's perfectly permissible.

Back to Table of Contents

Definition List Term <dt>

Sets the unindented "heading" portion of a definition list.
LOCATION: As desired, between the <dl>...</dl> tags.
SYNTAX: <dt>

TIPS: See also the sections on definition lists and the indented definition tag.

Back to Table of Contents

<Font>

Font sets... font information. You'd never have guessed.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <font(Safe, only problems on earliest browsers, Deprecated) color="#000000" size="3"> </font>

color= Sets the text color. Default is black "#000000".

size= Sets the size of the font on a scale from 1-7. Default is 3 (though the size varies from browser to browser).

TIPS: Note that <font> doesn't change much, but there are a number of associated font control tags that together are very powerful. The critical font styles are Bold, Italic, and Underline. Other font tags that are relevant are <Basefont> (which we don't recommend), Strikethrough, Subscript, Superscript, and Typewriter Text.

When using <font>, size is handled on an awkward 1-7 scale that displays very differently from browser to browser. I usually break down and use CSS (Cascading Style Sheets) to change font size, like the <span> tag. For color changes font is handy, though CSS can do this too. The advantage of CSS is that it's so powerful, you can set all this and more besides. The downside is that some older browsers don't handle it well, and more importantly, you have to spend a little time learning it. If you just want it done, font tags are the easiest way to do it. If you want to use CSS but don't have time to learn, get the quick and dirty scoop on how to use the span tag and you should be able to do 90% of what you want. If you want to learn CSS, you can go all the way and check out our CSS Reference.

Back to Table of Contents

<Frame>

Describes how a particular frame looks and works.
LOCATION: Immediately after the <frameset> tag.
SYNTAX: <frame name="MyFrame" noresize src="http://www.mysite.com" target="see Below"> </frame>

name=(Safe, only problems on earliest browsers) gives an identifying name to the frame which lets you set targets to it.

noresize(Warning, only latest browsers) prohibits visitors from changing the size of the frame, otherwise they can drag the frame divider to adjust to taste. Useful for ads that visitors will want to get rid of but which you need to have up. Otherwise, it's better to leave it out, so people can adjust it to their own taste.

src=(Safe, only problems on earliest browsers) Sets the webpage which loads into the frame by default.

target= It's SUPPOSED to set the frame that links selected in this frame open in, but I could not get it to work at all in IE 6.0. I've given up on it and am using the target= attribute in <Base> instead. It works like a charm.

TIPS: You need one <frame> tag for each frame defined in <frameset>. Just like the cells in a <Table>, The first <frame> defines the frame in the top left corner, the second the frame to its right, etc. When the first row is finished, the next <frame> specifies the far left frame of row two. The main section on Frames has a more info. The other key tags for building a page with frames are are <Frameset> and <Noframes>.

Back to Table of Contents

Frames

The key tags for building a page with frames are <frame>, <frameset>, and <noframes>. A frames page is difficult to put together, and may not be visible to everyone. Even current browsers can have trouble with very basic frames. So there are some important things to remember.

  • Keep the page as simple as possible, you want as few frames as you can get away with and the main viewing frame should be as large as possible.
  • Frames cut into the visual space for your webpages, because each page now shares space on the screen with one or more of your other webpages. If you stick a normal page in a frame, it may look scrunched and awful. Design your pages to fit into the smaller framed space, they usually look fine as a full page for your non-frame users.
  • In addition to these normal pages you've designed for frames you'll also have one main frame page written in HTML 4.0 Frameset; this page sets the structure for your frames. The best way to handle it is to have your main homepage normal with a link to this main frame page which creates the frame structure.
Frame Links: A link in a frame will automatically load into the same frame. If you want to load into a different frame, you have three different ways.
  • Use a <frame target="FrameName"> tag on the main frame page. That frame now has a default frame where all links inside it will appear.
  • Use the <base target="FrameName"> tag in the header section of a content page. This sets a default target for all links on that content page. (If the main frame page specifies a target as above, this will override it.)
  • Use the link itself, <a href= target="FrameName">. This tag overrides all other default targets. If you don't have a default target for any link it automatically loads into its own frame.
Remember, there are several special targets you can specify besides a frame name: target="_self" loads into the same frame, target="_blank" loads into a new browser window, and target="_top" loads into the full window; ie it stops using frames.

Back to Table of Contents

<Frameset>

Describes the structure for the main frame page; written in HTML 4.0 Frameset.
LOCATION: Replaces the <body> tags. (though <body> shows up elsewhere, just not in its usual spot. See below.)
SYNTAX: <frameset(Safe, only problems on earliest browsers) cols="50,200,*,5%" rows="10%,*,5%,10%"></frameset>

cols=(Warning, only latest browsers) Sets the number of columns and their widths. 50 sets a column 50 pixels wide, 50% sets a column which takes up half the screen,* sets a column which takes up all space leftover from the other columns. To set three columns, specify the width of each separated by commas "," (e.g. cols="50,50%,*")

rows=(Warning, only latest browsers) Works just like columns above. To set three rows, specify the height of each separated by commas "," (e.g. rows="50,50%,*")

APPLICATION: The main frame page is the webpage which sets the structure of the frames. Note every webpage your visitors will see are NORMAL, only the one main frame page which sets the structure of the frames uses this structure. The <body> tag is replaced by the <frameset> tag. A frame page has a different HTML skeleton from the basic structure of a normal webpage.

Your HTML skeleton for the main frame page will look like...

<html>
   <head>
      <title>
      </title>
   </head>
   <frameset>
      <frame> One for each frame.
      <noframes>
         <body>
           .
           .
           .
         </body>
      </noframes>
   </frameset>
</html>

Note: The <noframes> tags define the more normal <body> structure that someone will see if their browser does not handle frames. ALWAYS include <noframes> tags. It's a simple way to make your frames site accessible to the most number of people.

TIPS: The main section on Frames has a more info. The other key tags for building a page with frames are <Frame> and <Noframes>.

Back to Table of Contents

Heading <h1>

Displays text as a heading. (It stands out and is set apart.)
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <h1 align="left"> </h1>

align=(Deprecated) Can be set to: left, center, or right. Default is Left.

TIPS: Syntax is the same for headings h2 through h6. h1 is the largest, h6 the smallest. Headings always get a little white space and you can center them in their own tag, so they're really useful.

Back to Table of Contents

Horizontal Rules <hr>

Creates a Horizontal Line.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX (with defaults): <hr align="center" noshade size="2" width="100%">

align= Can be set to: left, center, or right. Default is center.

noshade By default, HRs have a shading scheme. The noshade attribute turns it off for a simple solid color line.

size=(Deprecated) Sets the thickness of the HR in pixels. Default is 2.

width=(Deprecated) Sets how long the line is. Default is 100%. (width=100 sets a line 100 pixels long.)

TIPS: Horizontal rules help with white space as well as providing visual boundaries in your webpage. Play with different options; the border= attribute in <table> also creates borders. Depending how much you have in your table this can look very busy. Horizontal rules look relatively plain and simple. Depending on how you want your page to look, either is perfectly acceptable.

Back to Table of Contents

Italic <i>

Displays text in italics.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <i> </i>

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

Images <Img>

Allows you to insert images into your document.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <img align="left" alt="Pop Up Text." border="0" height="0" width="0" src="http://www.mysite.com/images/image4.jpg">

align= Can be set to: left or right. Text before the image will end at the top of the image. If the image is aligned to the left, then all text following the image will start at the top right corner and flow nicely down the right hand side. If aligned right, the image is to the right and text flows down the left side of the image. Default is for one line of text to appear lined up with the very bottom of an image, which looks awful. See the Aligning Images section after Tips for better options.

alt= creates "Alt Text". At first when the visitor's mouse stops over the image, nothing happens. After a second or two, a yellow rectangle pops up next to the mouse cursor that says, in this case, "Pop Up Text." In text only browsers, this is all that appears in place of the picture, so you can actually be fairly descriptive or just use a couple words. Alt text disappears after a second or two, so at most you have time for a couple short sentences. Rest your mouse cursor here to see alt text in action.

border=(Warning, only latest browsers) Sets the width in pixels of a black border that goes around the image. Default is zero, 0, ie no border.

height=(Safe, only problems on earliest browsers) Sets the height of the image in pixels. Since pictures take longer to download than webpages, text appears first and the picture is thrown into the middle of it, causing all text to jump. Since your visitor was probably already reading it, this causes them to lose their place Indicating width and height save the space for the picture so that text is aligned properly and the image then just fills the gap. You can even stretch or compress an image, though it's better to alter the image so that you don't have to use HTML for it. Default is 0.

width=(Safe, only problems on earliest browsers) Sets the width of the image in pixels. Important for the same reason as height above. You can even stretch or compress an image, though it's better to alter the image so that you don't have to use HTML for it. Default is 0.

src= Sets the path of the image which the webpage will load.

TIPS: Note that there is no closing tag, just drop <img> in at the spot the image should appear. One wrinkle is that alt= picks up formatting in your HTML document. This is incredibly annoying since by this time you've untrained yourself from this. NO other part of HTML does this. Therefore, you have to write the entire alt= attribute on one line no matter how long it is.

Aligning Images

Text before an image will appear above it, unaffected by the image below. If you do...

Nothing. Then the text following the image appears at the bottom right corner and then wraps underneath the image. This looks AWFUL!

Place a paragraph tag, <p>, before and/or after the image. Then the image has a line of white space before and/or after it. Text after the image (and <p> tag) begin after the line of white space.

Use the image attribute align="left". Then the text following the image appears at the top right corner of the image, and flows nicely down the right side of the image before wrapping underneath. align="right" lets text flow down the left side of the image.

Place the image in its own row of a table. The image appears with no text next to it. Text flows down to the top, and picks up underneath, just like using a paragraph, <p>, tag. If you're using table to set up your whole page this may be easiest and <tr> or <td> is the ONLY way to use align="center". You can put cells to the left and or right of an image for any reason, but if you're trying to flow text down the sides of an image, I recommend using the align=left,right of the image tag. It's MUCH better and so much easier.

Back to Table of Contents

<Link>

Used to call an external CSS.
LOCATION: Between the <head>...</head> tags.
SYNTAX: <link href="mystyle.css" rel="stylesheet" title="mystyle">

href= Sets where to find an external script or CSS file for the webpage.

rel= Can be set to "stylesheet" or "alternate stylesheet". See Tips for an explanation.

title= Assigns a name to the style, but also controls whether visitors can use their own style settings.

TIPS: For inline CSS see <span>, or for details refer to the CSS Reference page. Default styles are usually preferred because disabled or senior citizens frequently NEED special style settings to view your webpage (giant font sizes are one common change). The three styles and how to set them are...

  • Persistent styles: Your visitor gets your style and cannot change it.
    Set rel="stylesheet".
  • Default styles: Your visitor gets your style and can change it if they want to.
    Set rel="stylesheet" but add a title, like title="mytitle".
  • Alternate styles: The visitor has your style available, but they must specifically select it.
    Set rel="alternate stylesheet".

Lemay, Laura. Teach Yourself Web Publishing with HTML 4 in 21 Days. Professional Reference ed. Indianapolis: Sams Publishing, 1999. 278.

When creating the CSS file, the syntax looks like...

BODY { background-color:#000000; color:#00CC00; font-size:14pt }
P { color:#FF0000, margin-left:0.5in; text-indent:-0.5in }
P.largeprint { font-size:20pt }

This sets the body of the page to a black background and green text in 14 point font. If you use a <p> tag you get red text (by default in 14 point) with a half inch left margin and the first line indented a half inch to the left. (because there's a (-) minus sign in front.) However, if you use the tag <p class=largeprint> you get 20 point font (by default in green) with normal margins. You won't find any other references to the class= attribute because it can create problems with some pretty recent browsers, but it is a really cool trick.

Back to Table of Contents

Links <a>

A link allows your visitor to move easily and directly to related information.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <a href="../index.html" name="Inpage1" style='see <span>' target="_self"> </a>

href= sets a link. The text between the <a href=>...</a> tags will become the link and anyone who clicks on it will be taken to, in this case, http://www.EarthChronicle.com. Further, if EarthChronicle has an inpage link with name=Inpage2, you can make this link go directly to that point on the webpage by using, href="http://www.EarthChronicle.com#Inpage2"

name= Gives this spot in the HTML document a name for an inpage link to use. See the In-Page links below.

style=(Warning, only latest browsers, CSS) Sets style sheet info.

target=(Safe, only problems on earliest browsers) Sets the target for the link. A default target for all links can be set using <base>. Can be set to a specified frame, on webpages with frames. <frame name="ThisFrame">. The other options are _blank (opens a new browser), _parent (opens in the parent frame, if there's no parent, it opens in the same frame), _self (loads into the same frame as the link), _top (opens the link in the full window; ie stops using the frames). _blank can even be used on non-framed pages. Default is _self.

TIPS: You can set a name= and an href= attributes in the same tag if you need to. You won't see it much, since it names a link so you can link to it; in which case you probably just want to link to the final destination. There are three kinds of links...

  • External link - An external link takes your visitor to a different website.
  • Internal link - An internal link takes your visitor to a different page on your own website. This is one of the most important tools of website design.
  • Inpage link - Very handy for navigating a complicated page like this one. The link doesn't go to a different webpage, it goes to text or an image on the same webpage. Inpage links allow visitors to "flip" directly to the info they need elsewhere on the page. This page would be impossible without inpage links. So would our Bibliography.
    1. The spot you want someone to go to is marked by an anchor that you give a name to:
      <a name="ThisSpot">...</a>.
    2. The link that takes you to this spot simply adds the number sign (#), to the name:
      <a href="#ThisSpot">...</a>.
    3. One last trick is to link directly to the inpage link from a different webpage. The link that takes you adds the #anchor name to the end of the normal web address:
      <a href="http://...mypage.html#ThisSpot>)...</a>.

Smith, Bud and Arthur Bebak. Creating Web Pages for Dummies. 6th ed. New York: Hungry Minds, Inc., 2002. 150-157.

Back to Table of Contents

Lists

Lists provide one of the most consistent ways that your information will actually appear on your visitor's browser.

APPLICATION: There are three kinds of lists...

  • Ordered lists are enclosed by <ol>...</ol> tags and each list item begins with a <li> tag. The list items appear numbered.
  • Unordered lists are enclosed by <ul>...</ul> tags and each list item begins with a <li> tag. An unordered list is identical to an ordered list except that the list items are bulleted.
  • Definition lists are enclosed by <dl>...</dl> tags. Each list item is either unindented, marked by a <dt> tag, or has the entire left margin indented by 0.5 inches, marked by a <dd> tag.

The list structure is written like this...

A standard list is written as...   

<ol>
   <li>
   <li>
   <li>
</ol>
 You can use a list inside a list; "nested" lists are written as...   

<ol>
   <li>Carbohydrates
      <ul>
         <li>Bread
         <li>Pasta
         <li>Sugar
      </ul>
   <li>Fats
   <li>Proteins
</ol>
 And this is what you get...

  1. Carbohydrates
    • Bread
    • Pasta
    • Sugar
  2. Fats
  3. Proteins

Smith, Bud, and Arthur Bebak. Creating Web Pages for Dummies. 6th ed. New York: Hungry Minds, Inc., 2002. 302.

TIPS: Lists are one of the most important ways to organize information, along with Tables and Paragraphs. Definition lists are rarely needed for definitions, but it's another text formatting trick you can use.

White Space in Lists

This is a trick I taught myself. Lists have no white space between list items (see the example above), and only one line of white space above and below the list. If you want white space between each list item, then make each item the sole list item in a list. You'll have a whole group of lists each giving the one line of white space you wanted between the list items.

No space between list items
<ul>
   <li>
   <li>
   <li>
</ul>
 One line of space between list items
<ul>
   <li>
</ul>
<ul>
   <li>
</ul>
<ul>
   <li>
</ul>

Obviously, this trick doesn't work easily with an ordered list, unless you want each list item numbered 1. You can get around this by using the <li> attribute start=, and you can get much the same effect with a definition list, if you enter the numbers manually on the <dt> lines. For specifics on each list style see definition lists, ordered lists, and unordered lists.

Back to Table of Contents

List Item <li>

Sets one item in a list.
LOCATION: Between <ol>...</ol> tags in an ordered list, or <ul>...</ul> tags in an unordered list.
SYNTAX: For an ordered list: <li type="1"> For an unordered list: <li type="disc">.

type= For an ordered list (with numbers) using an <ol> tag: "1" gives numbers, "a" gives lowercase alphabet, "A" gives uppercase alphabet, "i" gives lowercase Roman numerals, "I" gives uppercase Roman numerals.
For an unordered list: "disc" gives solid circle bullets, "circle" gives a circle outline, and "square" gives a square outline.

TIPS: The Lists section has important basics on list use.

Back to Table of Contents

<Meta>

Meta tags provide information about the webpage. They do not appear in your web page, itself.
LOCATION: Can only be used between the <head>...</head> tags.
SYNTAX: see below

Meta tags are one of the trickiest topics to handle. Its attributes are not stable, they don't fulfill the same purpose from one usage to the next. However, here are some interesting ways to use meta tags for particular features.

Dynamic Page: Loads a new page after a certain amount of time.

<meta http-equiv=”refresh” content=”15; url=mypage2.html”>
In this example, after about 15 seconds, the browser will automatically load the page, mypage2.html.

Comments Tag: The oft abused use of meta tags, but it is handy for those search engines that still use it.

<meta name=”keywords” content=”keyword, keywords, meta tag, meta tags, meta, tag, tags”>
<meta name=”description” content=”This is a description that may show up in a search engine when your site is a search result”>

Preventing Cached Page Use: Tricks your visitor’s browser into thinking a cached page is expired and outdated. It then reloads the page from your site.

<meta http-equiv=”expires” content=”Mon, 01 Jan 2005 00:00:00 GMT”>

Kentie, Peter. Web Design: Tools and Techniques. 2nd edition. Berkeley, CA: Peachpit Press, 2002. 95-98.

Back to Table of Contents

<Noframes>

Sets aside the HTML for how a frame page should appear on browsers that can't handle frames.
LOCATION: Between the <frameset>...</frameset> tags, immediately after the last <frame> tag.
SYNTAX: <noframes(Safe, only problems on earliest browsers)> </noframes>

TIPS: <Noframes> sets aside the HTML used by browsers that don't use frames... hopefully. More importantly, browsers that can handle frames know that everything between the <noframes> tags should be ignored. The <body> tags of a main frame page go inside the <noframes> tags, and the page as you want it appear without frames goes inside the <body> tags just like normal.

The main section on Frames has a more info. The other key tags for building a page with frames are are <Frame> and <Frameset>.

Back to Table of Contents

Ordered List <ol>

Sets the boundaries for a sequential list. Only items with <li> tags are allowed in between.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <ol start="1" type="1">

start=(Safe, only problems on earliest browsers) Sets the number for the first item.

type=(Safe, only problems on earliest browsers) For an ordered list (with numbers) using an <ol> tag: "1" gives numbers, "a" gives lowercase alphabet, "A" gives uppercase alphabet, "i" gives lowercase Roman numerals, "I" gives uppercase Roman numerals. You can override this setting using type= in in the <li> tag.

TIPS: The Lists section has important basics on list use, or view the other list styles, definition lists and unordered lists. The list item tag is the other half of building an ordered list.

Back to Table of Contents

Paragraphs <p>

Allows paragraph structure with the default HTML presentation rules.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <p align="left">(optional </p>)

align=(Deprecated)Can be set to: left, center, or right. Default is Left.

TIPS: Paragraphs are among the three most important organizational tools, along with Lists and Tables. Paragraphs are important because they don't break the default flow of text in HTML. If you resize a browser the text automatically moves to fit in the window, it autowraps. You can even insert a paragraph into a list or a table cell, so they're very versatile. If you use a table and want to preserve this powerful tool, do not use the width= attribute of table, or if you need to specify it as a percentage. If on the other hand, you want to disable autowrap, set width= as an absolute, e.g. pixels, inches, etc. This will force the browser to display the table cell at a certain size even it that requires scroll bars, and then you can fit your text to taste inside.

More importantly, in the on going battle to make HTML give you white space, paragraphs are golden. If you don't use paragraphs, the result will typically have no white space in between. Even using <br> tags does not necessarily fix the problem since many browsers don't register multiple breaks (unless you are inside a table cell, <td>), and at the very least this causes inconsistency in the way your page appears in different browsers. A paragraph automatically inserts a line of white space before and after. (Though it's not cumulative, if you have two paragraphs next to each other there is only one line between them not two.) Many HTML programmers complain about the overuse of paragraphs, but your webpages tend to look cramped otherwise. (This is the EXACT same reason lists and tables are nice. They are also structures that give you some ability to add white space.)

Back to Table of Contents

Preformatted <pre>

Displays text as typed in the HTML document. (It lifts HTML reading conventions.)
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <pre> </pre>

TIPS: Preformatted text can be a little tricky to handle, especially if you've gotten used to the way that HTML pays no attention to your formatting, but it is useful in in certain applications.

Back to Table of Contents

Controlling Presentation

Presentation is how you control the Style and Structure of a webpage, ie how is looks.

Style is how text, images, colors, and backgrounds appear on the webpage. There are two main tools for managing the style of your webpage...

Font tags, including not only <font>, but host of other tags for underlining, bold, etc. create all kinds of quick styles that are easy to use, and are widely accessible. Some tags are being phased out (marked Deprecated) and may be a problem in the future.

The second is CSS (Cascading Style Sheets); you can check out our CSS reference for detailed information. These are slightly newer, and can cause problems for some of your visitors, but most people shouldn't have any real trouble with it. External style sheets are a very powerful way to control the look of your webpages, you can create one CSS file that is used by every webpage. This makes it easy to give all your webpages a consistent look, which is key to identifying your website, ie helping your visitors know when they click a link if they are at your website or if they've left. It also allows you to change the look of your website by changing one file, instead of every webpage on your site. Inline styles are the most powerful tool for customizing the look of individual pages. For information on setting inline CSS, see the <span> tag.

Structure is where the text, images, etc. appear on the webpage and how they are organized. There are three main tools for webpage structure...

Paragraphs <p>, are the first critical tool. They allow you to write in the standard format that your visitors are used to reading in books. It also provides some white space between paragraphs which is so important to the visual look of your page.

Lists are the second tool for creating structure on your page. They are perfectly adapted for giving directions, or outlining points. While you may not typically use an outline in your regular writing, it happens a lot more in webpages where you really don't have much space to write before your visitor is having to scroll over and over again... something you want to avoid at all costs. (This is why we make copious use of inpage links to make a long page like this manageable.) Using an outline format forces you to be brief, which is exactly what you need to do in webpages. Like paragraphs, the structure it gives to a page is invaluable for helping your visitors find their way around.

Tables are the most complex, but also the most powerful tool for creating structure on your webpages. A basic table is not hard to set up, and yet the world's biggest company's frequently use them to organize their most complex pages. Almost any structure you want for your website can be set with tables, they are enormously flexible. Almost all our webpages at EarthChronicle.com are organized using tables.

It is a critical advantage of these structures that you can nest them inside each other or even inside themselves. e.g. You can put paragraphs, lists, or tables inside of a larger table. Another important concept to master is how to use white space in HTML. Otherwise, your page can become so overrun with text that it is difficult to locate information. Important tags for controlling white space include the break <br> (very handy when used in tables), headings, e.g. <h1>, and horizontal rules, <hr>, which provide white space and a bit of border on your pages. The most advanced presentation tag mentioned here is the image <img> tag, which adds graphics to your webpage. You need to have the image file saved on your website and know where it is located. Then use the image tag to tell your webpage where to find the file and where it goes on your webpage. (Tables are great for this.)

Back to Table of Contents

<Span>

Allows you to set CSS between the <body> tags of a webpage.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <span style='see Tips'></span>

style=(Warning, only latest browsers, CSS) Allows you to create inline CSS.

TIPS: Span allows you to make inline changes to the style sheet, ie it adds style information directly to text that is enclosed by the span tag. The two other CSS techniques collect information elsewhere, embedded CSS using the <style> tags and external CSS using the <link> tag to call a *.css file. Inline CSS is also the last added which makes <span> the most powerful CSS technique; any style "rule" you set using external and embedded style sheets can be broken by applying the inline style sheet. (See our CSS Reference for more information.) Use the style= attribute to set a style element, or you can reset multiple elements. Just be sure to separate each one with a semi-colon, ";" For non-CSS font formatting see the <font> tag. These are some CSS highlights...

  • color: This resets the font color.
  • background-color: This highlights the text, i.e. it resets the background color.
  • font-size: This sets the font size. (font-size:14 sets the font 14 pixels tall. font-size:14pt sets 14-point font.)
  • margin-left: This resets the left margin. (margin-left:50% sets the middle of the screen. margin-left:1.0in sets 1 inch margin.)
  • text-indent: This resets the indent of the first line of text. (text-indent:50% sets the middle of the screen. text-indent:1.0in sets 1 inch indent.)

This is how to set bold, italic, and underline using CSS. (This meets the HTML 4.0 Strict standard.)

  • font-weight: This resets the font thickness, (esp. bold).
  • font-style: This resets the look of font, (esp. italic).
  • text-decoration: This adds lines, (esp. underline).

The syntax looks like... <span style='color:#000000; background-color:#FFFFFF; font-size:14pt; font-weight:bold; font-style:italic; text-decoration:underline'>Here is text spanned with this tag.</span> and here is the result...
Here is text spanned with this tag.

There are many tags that can also use the style= attribute. Check out our attribute tables for more information. For example, when setting margins for a paragraph, you can add the style= attribute to the <p> tag. Our citations use a paragraph tag with margins adjusted to match the MLA citation format. <p style="margin-left:0.5in; text-indent:-0.5in"> and here is the result...

Lemay, Laura. Teach Yourself Web Publishing with HTML 4 in 21 Days. Professional Reference ed. Indianapolis: Sams Publishing, 1999. 1020-1070. And more text to make sure it displays on multiple lines. And more text to make sure it displays on multiple lines. And more text to make sure it displays on multiple lines. And more text to make sure it displays on multiple lines.

Back to Table of Contents

Strikethrough <s>

Displays text in strikethrough. (Appears with a line through the middle.)
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <s> </s>

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

<Style>

Applies embedded CSS to a webpage.
LOCATION: Between the <head>...</head> tags.
SYNTAX: <style(Safe, only problems on earliest browsers)> </style>

TIPS: Allows you to create embedded CSS. One of the reasons CSS can cause problems, is that this tag requires a type= attribute that Netscape doesn't like very much. A better choice may be an external style sheet by using the <link> tag, and the easier technique is inline CSS using the <span> tag.

Back to Table of Contents

Subscript <sub>

Displays text in subscript. (It appears lower on the line.)
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <sub> </sub>

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

Superscript <sup>

Displays text in superscript. (It appears higher on the line.)
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <sup> </sup>

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

<Table>

Sets a table structure for a table of data, or for an entire webpage.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <table align="left" background="mytile.jpg" bgcolor="#FFFFFF" border="0" cellpadding="1" cellspacing="2" style='see <span>' width="100%"></table>

align= Can be set to: left, center, or right. Sets the alignment for where the table appears on the page. Default is left.

background=(Warning, only latest browsers) Sets a image for the background of the table, as much of it will be displayed as possible, or if the image is smaller it will be tiled. If you set background= and bgcolor=, background wins. You'll see the image as the background, however, using bgcolor= for the table row <tr>, or data cell <td>, will override backround for that row or cell.

bgcolor=(Warning, only latest browsers) Sets the color of the background for the table. Default is white. (#FFFFFF)

border= sets the width of the table's border in pixels. Default is 0, ie there's no border and the structure of the table is invisible. This is almost always best when organizing an entire page.

cellpadding=(Warning, only latest browsers) sets the number of pixels between the contents of the cell and the edge of the cell. Increasing cellpadding makes the cell bigger by adding white space inside the cell. Default is 1.

cellspacing=(Warning, only latest browsers) sets the number of pixels between the cells. Increasing cellspacing does not make the cell bigger, rather it adds white space between cells. Default is 2.

style=(Warning, only latest browsers, CSS) Sets style sheet info.

width=(Warning, only latest browsers, Netscape?) sets the width of the table across the page. It usually comes out nicest, done as a percentage. (width="100" sets a 100 pixel wide table, width="100%" sets a table that fills the width of page.) Default is either 100% or the smallest table that will fit the largest item of each column or row.

TIPS: Table sets up a structure, visible or not for ANY data to appear. It can be used specifically for a standard "table"-looking set of data. However, it can also be an invisible grid that organizes where all the text and images on your page appear. As such it provides an incredibly powerful and flexible way to organize your entire web page, especially when combined with all the features below. Many of the big multinational corporate websites, with all the money in the world to spend, are still designed using tables to organize the content; they're that powerful. (As of 2005/10/04 the homepages of Microsoft, Ford, and Google, are designed using nothing more than tables to organize the page and scripts to provide visual interest.) You can place all the other tools, lists, paragraphs, etc. inside it. See the other relevant tags for <td>, table data cells, and <tr>, table rows.

Tables are far and away the best tool for keeping your webpage organized. However, spacing and white space don't respond exactly the same in Netscape and Internet Explorer, so the more complicated your table, the more likely that you'll have cross-browser problems. One fairly consistent behavior is the desire to conform to the table content. If you can force the table to do what you want by changing the text that's organized inside the table structure that's the best course. If you have to, fall back on width= and height= and test everything out before you upload it to your website. If you just need vertical white space between two sections, height= responds just fine. Since this is probably the most common reason you'd need it, you should be ok. Be careful that ALL heighths and widths make sense, not just in <table>, but the <tr> tags, and the <td> tags. If there are conflicts, different browsers may adjust to them differently. (e.g. you can have problems if two cells in the same row have a different specified height, or if a <table> has width="300", but the <td> tags have widths that add up to more than that.)

Tables can be nested. Just drop the nested table right into it's own cell in the larger table. This is an easy way to get borders around one part of a table. More importantly, say you've built a whole table, especially a complicated one. If suddenly you need to add something to it that doesn't fit the row and column structure, you can simply nest the odd part. This will save you from inserting (or changing) lots of colspan= attributes. It also means you can use a table to organize your entire page, and just drop an actual table into the middle of it, or drop in a table structure to have sections that have different numbers of rows and columns. This last is very difficult if you're trying to struggle with <table>, but EASY if you drop a nested table in.

Back to Table of Contents

Table Data <td>

Sets the data to go inside a cell in the table.
LOCATION: As desired, between the <tr>...</tr> tags.
SYNTAX: <td align="left" bgcolor="#FFFFFF" colspan="1" rowspan="1" style='see <span>' valign="middle" width="100" height="100"> (optional </td>)

align=(Warning, only latest browsers) Can be set to: left, center, or right. Sets where the contents appear inside the cell. Default is left.

bgcolor=(Warning, only latest browsers) Sets the color of the background for the table. Default is white. (#FFFFFF)

colspan=(Warning, only latest browsers) Sets how many columns the cell will take up. Default is 1.

height=(Warning, only latest browsers) sets the height of the cell. (height="100" sets a 100 pixel tall cell, height="100%" sets a cell that fills the entire page.) Default is either 100% or the smallest table that will fit the largest item of each column or row.

rowspan=(Warning, only latest browsers) Sets how many rows the cell will take up. Default is 1.

style=(Warning, only latest browsers, CSS) Sets style sheet info.

valign=(Warning, only latest browsers) Can be set to: top, middle, or bottom. Default is middle.

width=(Warning, only latest browsers) sets the width of the cell across the page. It usually comes out nicest, done as a percentage. (width="100" sets a 100 pixel wide table, width="100%" sets a cell that fills the width of page.) Default is either 100% or the smallest table that will fit the largest item of each column or row.

TIPS: The main <table> section has more information. See also <tr>, the table rows tag. Table cells are not controlled well with width= and height= attributes, a better choice is to adjust the content inside the cell to force the cell to take on the dimensions you want. However, for an empty cell (without content) you have almost no alternative, which makes especially height important. Width is too, but is often constrained by your columns, height for a particular row is much more flexible and can be used to create any amount of white space.

Back to Table of Contents

Table Row <tr>

Sets of the information which will appear on the same row of a table.
LOCATION: As desired, between the <table>...</table> tags.
SYNTAX: <tr align="left" bgcolor="#FFFFFF" style='see <span>' valign="middle"> (optional </tr>)

align=(Warning, only latest browsers) Can be set to: left, center, or right. Sets where the contents appear inside the cells of the row. Default is left.

bgcolor=(Warning, only latest browsers) Sets the color of the background for the table. Default is white. (#FFFFFF)

style=(Warning, only latest browsers, CSS) Sets a style sheet.

valign=(Warning, only latest browsers) Can be set to: top, middle, or bottom. valign= has no effect if the row is the minimum size possible. This is sneaky, since it will frequently look like there's extra room when it's the minimum white space possible. Default is middle.

TIPS: The main <table> section has more information. See also <td>, the table data cells tag.

Back to Table of Contents

<Title>

Title sets the text that appears in the title bar, the top bar of the browser window.
LOCATION: Between the <head>...</head> tags.
SYNTAX: <title> </title>

TIPS: It is one of several basic structural tags in HTML.

Back to Table of Contents

Typewriter Text <tt>

Displays text as monospaced, typewriter text.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <tt style='see <span>'> </tt>

style=(Warning, only latest browsers, CSS) Sets style sheet info.

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

Underline <u>

Displays text underlined.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <u style='see <span>'> </u>

style=(Warning, only latest browsers, CSS) Sets a style sheet.

TIPS: For more about font formatting see the <font> tag.

Back to Table of Contents

Unordered List <ul>

Sets the boundaries for a bulleted list. Only items with <li> tags are allowed in between.
LOCATION: As desired, between the <body>...</body> tags.
SYNTAX: <ul style='see <span>'> </ul>

style=(Warning, only latest browsers, CSS) Sets style sheet info.

TIPS: The lists section has important basics on list use, or view the other list styles, definition lists and ordered lists. List item, <li>, is only other tag needed to build an unordered list.

Back to Table of Contents

Adding White Space

The heading tags, e.g. <h1>, create a little white space above and below the heading.

The horizontal rule tag, <hr>, creates a little white space above and below the line as well as providing a boundary between two sections of the webpage.

The preformatting tag, <pre>, let's you set up text EXACTLY the way it will be displayed, so any white space you include will be there.

The paragraph tag, <p>, is much maligned considering that you can use it to create a line of white space above and below just about anything. And it's such a simple tag, that even in the middle of table which gives you much more sophistacated controls, a paragraph is frequently the easiest way to insert the white space you want.

The <br> tag is one means of adding white space to your document. If used by itself, all the <br> tag can do is break the end of a line and start the next line below without white space. Multiple <br> tags are ignored, just like HTML ignores multiple spaces. However, if you use <br> inside the cell of a table, <td>, that's exactly what it will do; each <br> drops to the next line, two <br>s give you a line of white space, three <br>s give you two lines of white space, etc.

Lists typically have no white space between list items and only one line of white space above and below the list. However, if you want white space between each list item, then make each item the sole item in a list. For more details, see the Lists section.

Tables allow you to manually control white space, though this is not always handled the same way in different browsers. As long as one or more tables cells, <td>, in a row have the height you want, you can use empty cells, <td></td>, to create white space horizontally in the row. The colspan= attribute is nice for this, since <td colspan="6"></td> will leave 6 blank cells in a row. They have to be adjacent however, if you wanted an image in the third cell of the row you'd have to write...
<td colspan="2"></td>
<td><img blahblahblah></td>
<td colspan="3"></td>

To create vertical white space in a table, ie an empty row, you only need one cell in the row and specify it's height in pixels. (e.g. <td height="100"></td>)

Back to Table of Contents
Author: chroniclemaster1 Date Received: 2005/09/07
Editor: chroniclemaster1 First Date Posted: 2005/09/07
Proofreader: chroniclemaster1 Last Date Revised: 2005/11/10
Researcher(s): chroniclemaster1
Subjects:
Back to Earthchronicle.com Homepage Chronicle Subjects (Alphabetical or ECAN Codes) I Have Something to Add! Site Index Reader's Guide
Have a Question? Ask Us! Have an update, suggestion, or found an error? Email Us!