[logo]

Website Provider: Outflux.net
URL: http://jnocook.net/web/tags.htm

[logo]

(Tags overview) [Page design] [File organization] [Tools]


[logo]

What to expect from HTML tags

(Up 17 Nov 97, last modified 12 Feb 03) This page covers the minimum set of HTML tags needed for a web page, and List and Table constructions. Comments are included on how different browsers behave. Maps, Forms, and Frames so easily screw up a browser, that I have not covered them.

I hate tutorials, and have no patience with them at all. So think of this as an annotated list of definitions, organized by topics, some of which will dissolve into how-to's.

Jump to topics below: [The Overall Document] [Some Notes on the Tags] [Block Tags] [The Body Tags] [Header Tags] [Paragraph tags] [Block Quotes] [PRE-formatted text] [Tags You Can Do Without] [Some Useful Markups] [The Font tags] [Horizontal Rule] [Line Break] [Images] [Hyperlink Tags] [Lists] [Table construction] [Character Entities]

The definitive source on tags for HTML 3.2 is found at the W3 site at [http://www.w3.org]. I suggest you use HTML3.2 as a base, for not all browsers are implementing HTML4 yet. But look up (while at www.w3.org) which tags have been deprecated. Stop using those. Well - use some good sense: some tags are so-called deprecated for the sake of promoting the use of CSS - which is without a doubt the worst idea yet for public HTML pages.

The Overall Document

Ok, if you started life with WIN-95, you should know that HTML files are just text files, there is no magic in them, it is not 'code', it is simply a markup language similar to Word Perfect or Word -- which means you can just type these files up, like in a text editor, even in Windows "Notepad."

To allow formatting by a browser to a particular screen, a few "tags" are added (the tags are the 'markup'). The tags are enclosed in left and right angle brackets (that is '<' and '>'). Generally opening and closing tags are used to define what is to be done with a section of text between these tags. The opening tags look like <TAG> and the closing tags look like </TAG> (of course the tag won't say "TAG").

The text file is divided up into a HEAD section and a BODY section. The BODY section will contain the readable text. The HEAD and the BODY section will each be enclosed with <HEAD> and </HEAD> and with <BODY> and </BODY> tags. Both are enclosed within the tags <HTML> and </HTML> like this:

<HTML>
<HEAD>
<TITLE> The Title goes here.. </TITLE>
</HEAD>
<BODY>
<H3>My Webpage</H3>
<P>The text goes here.. OK, I don't have much text yet
<P>And this would be the second paragraph
<P>And this would be the third, bla bla bla
</BODY>
</HTML>

I should note that neither the HTML, HEAD, or BODY tags are required. A public document is identified as to what it is by the server (as "text/html") which will be the clue for a browser as to what to do with the file. The above would be rendered as follows on a web page...

My Webpage

The text goes here.. OK, I don't have any text yet

And this would be the second paragraph

And this would be the third, bla bla bla

At the minimum the HEAD section should contain a title (enclosed in <TITLE> and </TITLE> tags). If you do not use a title your page might end up being bookmarked under a blank. Worse than not having a title is to use something like, "Welcome to my site." This tells the viewer nothing at all if she ever looked through her bookmarks.

Or, which I have seen all too frequently, the webmaster forget to change the title in some html editor, so that all her page titles read, "Untitled Document." Would you like to have your website show up at Alta Vista as "Untitled Document?"

The other HEAD options you can discover on your own.

The division of text in the BODY section is through the use of the HEADER tags (H1, H2, H3, etc) and the paragraph tag (P).

These are block tags, that is, they contain text, images, other stuff between an opening tag and a closing tag. The tag with the slash is the closing tag. For the P tag there is no required closing tag (although sometimes it makes sense to use one), and thus <P> is most often used to indicate only the start of a new paragraph.

Some Notes on the Tags

Block Tags

Block tags apply formatting to a word, a few words, a whole paragraph, or whatever text lies between the tags. You can get through life using only a few HEADERs tags (H1, H2, H3), Paragraphs tags (P), Block Quote tags (BLOCKQUOTE), and preformatted Text tags (PRE) and a few others.

The Body Tags

The BODY Tags, as outlined above, enclose all of the viewer readable text. There are some interesting attributes:

You can specify that an image is used as a background, sort of like wallpaper. The image will repeated endlessly for the whole page. You ought to keep it small. The attribute reads...

<BODY background="URL">

where the URL specifies the location (in the file system) of the particular image you will use. If you select a small gif called bg.gif, located in your normal directory, the tag might read..

<BODY background="bg.gif">

More about URLs below.

Similarly the Background Color (BGCOLOR=), the Text Color (TEXT=), and the colors of the hot links (LINK=), Visited links (VLINK=) and Selected links (ALINK=) may be specified.

The colors are specified as, for example,

<BODY BGCOLOR="#rrggbb">

where rr, gg, and bb are the hex values of Red, Green, and Blue. FF is equivalent to 256, thus the full value, that is, the brightest.

Thus to have a black background you would specify BGCOLOR=#000000. This would set the Red, Green, and Blue to zero value each. Conversely for a white background, BGCOLOR="#FFFFFF". For Red text, TEXT="#FF0000". Etc.

Without specifying the colors, defaults will be used by the browser. The defaults are to have the text in black, the hot links in blue, visited links are red, although the out-of-the-box defaults on later browser versions often use a purple-blue for links. Older Netscape and Mosaic used gray as a background color.

Generally you are better off using defaults, since most people have learned to navigate with default colors. Or select something bright in your body tags. Many users turn off 'default colors' (if for no other reason than to make pages easier to read), and your page will be seen either in the browser default colors or the colors selected by the user.

You should also be aware that some colors combinations are not available to Netscape (or other browsers). If you progressively increase one of the colors, from 00 to FF, you may find only every third cipher gives a change in color, that is, the browsers will default to a higher or lower value. Colors based on the numbers and letters 0, 3, 6, 9, C, and F should work all the time. Subtle shades of color are not to be seen. This is just as well, since no two monitors in the world are set the the same color adjustments, brightness, and contrast.

All the tags described below may appear in the BODY section -- the actual text of the HTML document which the viewers will be seeing and reading.

Header Tags

There are six levels of paragraph HEADER tags, H1 through H6, where H1 is the largest title, and H6 is the smallest. The H tags take the form

<H1> .... </H1>

where the paragraph title goes where the dots are. You can line up the header to the left, center, or right of the page with the attribute ALIGN. For centering the title, this would read

<H1 ALIGN="center"> .... </H1>

The same centering could also be accomplished with the CENTER tag..

<center><H1> .... </H1></center>

It is supposed to be bad to jump directly from one level to another without using the HEADER levels in between.

Most browsers do a variety of things with HEADER tags. Netscape just makes the type face progressively smaller, even though the text size remains the same. Makes for some funny looking titles by the time you get to H6. Lynx moves HEADER tags to the left of the main text. Some browsers indent differently for different levels, some change the text of some of the HEADER levels to all caps or whatever they think is appropriate. There is just no way to tell what might happen.

I suggest at the very least, use the H1 tag only once in a document at the top, use H2 and H3 everywhere else. You can often distinguishing much better between important headings and headings of lesser importance with the use of titles of all caps and titles of leading caps. Forget about level 4 or smaller, they are going to disappear with most browsers.

It is the browser version which determines what size the H tags will be with respect to the size of the normal text, and what size relationship they have to each other. The Opera browser allows you to set the relative sizes of all the H and regular text. All other browsers (except Lynx) allow setting the size and font of regular text, and assume you want the same font for the H tags.

Paragraph tags

This is of the form

<P>...</P>

On reading the leading P tag, the browser will start a new paragraph, that is, it will skip a line, and attempt to place the next character on the left of the screen. This is almost universal, and can be mostly be counted on, except that it will fail with some browsers if there is an 'uncompleted' block of other text or images.

Note that a P tag is not needed after a H (HEADER) tag or a HR (Horizontal Rule) tag, or many of the other block tags (FORM, TABLE) since a paragraph break is implied. P tags will also not indent the first line for you, nice as this would otherwise be.

The closing P tag (</P>) is generally not required, but I recommend it in some instances, like within FORM, and anytime you have forced the paragraph to be left and right aligned, or have included images within the paragraph. A few browser will also not skip a line to place a Horizontal Rule (HR) all the way accross a page unless a closing paragraph tag (/P) has been seen,

P tags can be used inside BLOCKQUOTE, and conversely. But generally not within PRE tags (below), because it would defeat the idea behind PRE-formatted text, which is what "PRE" stands for, more on PRE below.

Block Quotes

Of the form

<blockquote>...</blockquote>

These may contain paragraphs tags and other structural markup tags, otherwise it will just run on. Block Quotes are generally indented, sometimes in italics, at times each line carries a ">" on the left -- as if it were quoted e-mail. One browser removes quotation marks if they are used to enclose the text. I would suggest using quotations anyway at the beginning and end of the text, for with a text browser large blocks of quoted material may not be at all obvious. Or set off the quoted or indented text with I (italics) tags.

PRE-formatted text

Of the form

<PRE>...</PRE>

PREformatted text is presented as fixed-width characters; even the blank lines are reproduced exactly. It may contain in-line markup, but not all are guaranteed to work.

Be careful not to include long lines, for the browser window may either fold the text on the far right, thus breaking the PRE-format, or just make it disappear. Since the PRE format sets the width of the browser window (and thus the text window), some browsers will expand all text on the same page to occupy the same width. This can make for some difficult reading.

Also, you must substitute the codes for < and > and the & (ampersand). See "Characters" (entities) below.

The PRE tags are generally used for presenting code segments, tables, data, or can be used to include all of a resume without having to prepare thousands of formatting tags. But it is often more trouble than it is worth, for a few P and BR tags inserted in the original quoted document will make things a lot more readable.

Tags You Can Do Without

The remaining block tags are mostly useless. Remember that HTML grew out of a system of presenting scientific papers. Hence all these doctoral theses tags. You may decide some of these are just great. All require the browser to treat a section of text in a special manner. Not all browsers respond, many just turn every tag set below (except the obvious BOLD) into italics.

<ADDRESS>...</ADDRESS>
ADDRESS information

<CITE>...</CITE>
Citations, such as literary references or product names.

<CODE>...</CODE>
Fragments of computer CODE

<EM>...</EM>
Emphasis, often rendered in italics, which is why I prefer to use BOLD.

<KBD>...</KBD>
Specific keyboard input

<SAMP>...</SAMP>
Samples of literal characters (such as user input)

<STRONG>...</STRONG>
Strong emphasis, usually rendered in bold, at times as italic.

<VAR>...</VAR>
Computer or other variable names

<TT>...</TT>
Typewriter type

<U>...</U>
Underlined, but very few browsers actually do this.

Some Useful Markups

<B>...</B>

Bold type -- this is actually of some use as emphasized text. A number of browsers (Internet Explorer for one) assume a space for the closing tag, so that punctuation which follows a few words in bold will be spaced away from the last word which was rendered in bold. Better to include the punctuation within the bold tags, rather than outside. Thus, get in a habit of doing this ..

<B>Do it this way:</B>

.. rather than this ..

<B>Don't do it this way</B>:

This holds for the I (italicised) tag also.

It is often recommended to use the STRONG or EM (emphasis) tags, but since browsers will make up their own mind on how to do this, I am more comfortable with B.

<I>...</I>

Italic type - There are a great many places where this could be used, but with the wrong font in use by the viewer it could look like shit. Lynx turns this into highlighted text.

<CENTER>...</CENTER>

This will center anything between these tags, images, text (might look very broken as a result), and Tables (see below). You would expect ALIGN="center" tags to be available for all other block tags, but they are not. So to center a H tag you could use ..

<CENTER><H2> ...</H2></CENTER>

Or for an image (see below)..

<CENTER><IMG SCR="URL"></CENTER>

The Font tags

Some folks play with this endlessly, in efforts to have your screen look like their screen. It screws up more things than can be imagined, especially if you are dealing with blind readers, or older readers, or even with people who use a 1024 screen, and who have set the default font of the browser large enough to be able to read without eye squinting efforts. It also bulks up the page, thus slowing down transmission. Not a problem at 3am, but it is when the traffic on the internet is heavy.

The form is ..

<FONT> ... </FONT>

To do something specific to a section of text you will use the SIZE and COLOR attributes, as follows..

SIZE="n"

Here the n is an absolute size, ranging from 1 to 7, or an incremental change from the last font size, signified with +1, +2, etc, for a larger font, and -1, -2, etc, for size reductions.

Note that some browsers do not recognize the +n or -n.

Using a SIZE attribute within a HEADER tag, or emulating HEADER sizes with SIZE tags is just stupid, and might void the ability of robots to find and index your web pages, since they will often not look beyond FONT tags.

And all too often my browser will show GIANT characters for a page, or tiny ones, which were not really intended by the author. Then I turn off font colors and sizes again for that particular browser, or switch to Opera which defaults to a terminal font of my own design and is always easy to read.

COLOR="#rrggbb"

Where the colors are selected as above (see the BODY tags).

There are a number of problems: Selecting a color is neat, but will be very confusing if the reader relies on default colors to navigate, or depends on high contrast to be able to read the page at all. Additionally, most browsers which support the FONT tags do not let users disable it (MS Explorer does allow this). But the background and text colors (BODY attributes) can be disabled. This can results in invisible text blocks.

It also happens frequently with TABLE columns, where, for example, white text of the first column spills out into the white background of the second column, and just disappears. I have seen this all too often on "professionally prepared" web pages of large corporations. More under TABLES below.

And lastly, it has become vogue to suggest a font style to the viewer's browser. When first introduced this resulted in some strange browser behavior, because Mac users didn't have Windows fonts, or the reverse. The current usage is to specify just about every font imagineable. As a result you will find FONT attributes like ..

FACE="Verdana, Arial, Helvetica, sans-serif"

This last attribute suggests or forces the browser to use one of the named fonts. If they exist. A major objection, again, is that it just stuffs the web page full of things which are not needed. "Not needed" because the whole purpose of a browser is to format the incoming file to properly fit the window size, selected font, and selected colors of the user.

SINGLE ELEMENTS

These are used as terminations of text blocks and text lines, and like H tags often presume the start of a new paragraph and may skip a line, but there is no guarantee how a browser might handle it.

Horizontal Rule

This is of the form

<HR>

It simply draws a horizontal line from left to right, generally starting on the next line. The whole mechanism is somewhat unpredictable: Lynx starts from an indent, Netscape does not. Often the rule will only cross the screen from a presumed series of indents due to the existence of a list or list elements (You can use <BR CLEAR="ALL"> to fix that), or from a left or right aligned image. But it is a great way to indicate what would be a page break in a printed document.

An interesting and confusing attribute is SIZE. You can specify the actual width in pixels (SIZE=640, for example), or the percentage of the page which will be occupied by the line (with SIZE="nn%" - note the quotes). Since the ALIGN="center" attribute is also available, a short dash can be placed in the center. How elegant.

If you specify the absolute size of the rule it will screw up the viewer's page if it is set to a width different from what you are using. Some browsers simply fold the extra length of the rule to the next line. Netscape swallows it, but then formats all the text to the width indicated by the HR SIZE attribute. Within TABLES, a SIZE'd HR can wreak havoc. Don't use SIZE.

On the other hand, I usually set SIZE to 600 for the first or second horizontal rule, so I can adjust my browser window when I am testing a html file locally to see how it fits the most common screen size (which is under 640 pixels).

You may also specify the location (ALIGN=), and shading, where NOSHADE implies a line without a shadow. Most of these are of little use. The default generally is "center" but not with all browsers.

Line Break

Of the form

<BR>

This will start a new line only, without providing a blank line like the P or H or HR tags (and many others) do.

You would expect a series of line breaks to create blank space, but many browsers ignore repeated line breaks. Netscape swallows additional BR tags in some locations (within lists), and not in others. Useful for short lists, however, as when you want the second part of a street address to start on the next line.

The attribute CLEAR will specify how far to the left of any implied indents (which are largely determined by your browser) the line will jump to start a new line. Try CLEAR="all" if you are in the middle of a LIST, or have just done something weird like centering a paragraph of text following a left aligned image.

Images

Images are specified as follows. Note that there is no closing tag. Note that the SRC= attribute is required.

<IMG src="URL">

There are optional size and alignment attributes.

If the image is inserted in the middle of text, it will be placed by default on the baseline of the text where it has been included. This can cause some strange looking text blocks, but there are fortunately lots of attributes to control what actually will happen.

The attributes you should know follow:

The image file source (SRC=) location

src="http://www.domain/directory/image.ext" ... or whatever is required to find the image. This can be on the same machine as the current HTML directory, or could be a different machine (I used to do that when I had web pages spread over two locations). If definitely on the same machine and directory, you could use.. src="image.ext" where "image.ext" would be the image file name, like "flower.gif." If kept on the same machine, but in a subdirectory, it might be

src="images/image.ext"
or
src="./images/image.ext"

You can do what you want. If your notation would make sense to a human who was familiar with Unix file systems, then you can get away with this minimal definition. On a Unix file system (and similarly in DOS/Windows) "." means "here", (that is, relative to the directory of the current file) and ".." means "one directory back". Thus "../../" means "two directories back from here". If the first name is followed by a slash (or is not a file, it is assumed to be a directory. Example:

src="images/"
or
src="images"

.. will get you a server generated directory listing (with all the files clickable). There are uses for this.

The ALT="blabla" tag

This selects text which will show up if the image doesn't, as with a text browser, or if the image cannot be found, as when a Netscape user has turned off image loading. These also show up on a "mouse-over" -- sometimes to completely clutter up whatever else you may be attempting to read.

ALT tags may be more helpful in text browsers, but some will drop the ALT text into the middle of wherever it occurs, which just adds some strange words to the text, others will bracket it, other will display [IMAGE] or [INLINE] if you do not use the ALT attribute, others will show [].

You could use the ALT attribute to identify what the image actually is, like ALT="picture of a flower" or use it to indicate the size, like ALT="348K Bytes". If images are used for links (see LINKS below), the ALT tags can be used to indicate where the viewer will be going if the link is followed. Or use it to mark the author, or applicable copyrights.

My choice is to use very few ALT tags or keep them short. It depends on the application. You do not need to ALT anything more than "logo" for icons; it is helpfull to use "[link]" for clickable icons, and appropriate to use "Photograph by Gretchen Buck" -- if that is what the image represents.

There have been suggestions to use ALT="" to suppress image tags in text browsers, but this is almost never true -- most browsers insist on supplying something.

The ALIGN="blabla" tag

The ALIGN tag places the image with respect to adjacent type. ALIGN="left" places the image at the left margin, and the text will start near the top right of the image and flow down the right side and then underneath. ALIGN="right" does this to the right margin.

ALIGN="top" and "bottom" and "middle" specifies which edge of the image will line up with the baseline of the text it is included with. It is not clear how various browsers handle the second line of text. Most seem to place a second line below the image. These three attributes are basically designed for short bursts of text. The default behavior is to have the bottom of the image line up with the baseline of the surrounding text (ALIGN="bottom").

ALIGN="center" will start the line of text (or the next image) at the center of the right edge of the image (or have the center of the left edge lined up with the previous text or image). All browsers will then place the next line of text below the image.

To start new text below an image, use <BR CLEAR="all"> to clear the indents caused by the image.

The Height="blabla" and Width="blabla" tags

Read the warnings below. These two tags allow browsers to set aside space for images, and if need be will resize the image to fit. Note that the text is obtained first from the server, so that all of the text could be placed on the viewer's screen if the browser had some idea of where to place the included images. But see my caveats below.

If the Height/Width are not given, the browser will send a request for the image file, as the text of a html page is being received and read, so that it can be inspected as soon as possible by the browser for the encoded size. (Browsers transfer information via the ftp protocol, and any number of these can be in simultaneous transmission. The TCP/IP layer will keep track of which incoming packets are destined for each file request.)

A very few browsers will stop scrolling text to the screen at each point where an image occurs, and wait for the image to download. Most will just reserve a small space and continue, readjusting the page layout after the header of the image has been received.

If you are using small icon size images early in the text, not using Height and Width will actually speed up the look of the opening screen of the html page on many of the earlier browsers. Note that although you may have the lastest version of Netscape or Explorer, most folks will only reluctantly update browsers.

The dimensions of Height and Width are in pixels. If you really want to set the dimensions of an image, at least use the actual dimensions. Any of the Windows paint programs will tell what they are. Otherwise more CPU time will be used by the browser to recalculate where every pixel goes in the new size for the image.

WARNINGS:

But, there is a problem with the idea of supplying image dimensions. For one, earlier Netscape versions will actually upload all of the html text file, before placing any of the images. If it is a large html file, this will cause the text to appear, and the first screen, but no images, followed by whatever delay due to uploading the remainder of the html file. Explorer behaves somewhat similarly. This strange behavior will most likely vary with different versions of these two browsers. Mosaic used to wait to write any text to the screen until all of the images had been fetched -- now that was really stupid.

I noticed this with Netscape 2.02, a stable Windows 16 bit version. I discovered it only because I had misspelled the word "height" consistently throughout all of the files. When I corrected the misspelling, the image delays started.

The Height and Width may also be used to resize an image to a specific dimension. It is often used to create empty space. This is done by having (for example) a 1 by 1 pixel image of the same color as the background, and expanding it to whatever blank space may be required on a line. As an example, you might use, Height=1 Width=40 to indent paragraphs 40 pixels (not spaces, though).

If you absolutely need to resize an image with HEIGHT and WIDTH tags (maybe because you do not have the time at hand to do so in a image editor), just supply only one of the two tags. Most browsers will calculate the corresponding ratio of the two dimensions correctly. You, on the other hand, could easily get one dimension wrong, and end up with squashed images.

Of course the most inept thing to do is to present a "thumbnail" image by resizing some giant image file to a much smaller dimension. This is still done all too often, especially by people using "Kompozers."

ANCHORS (HYPERLINK TAGS)

These may be placed almost anywhere in texts or lists.

<A HREF="URL">...clickable text or image here...</A>

Links are pathways to other documents or resources. If it is a link to a webpage at another location the URL part could read something like..

HREF="http://www.wherever.com/directory/filename.html"

Note that the quotation marks are required (although not absolutely), and if this involves a Unix file system then the directory names and file names are also case sensitive. If the resource you are pointing to is not to be retrieved with a HTTP (hyper text transfer protocol), but is, for example, an FTP resource (file transfer protocol), then it might read,

HREF="ftp://wherever.com/directory/filename"

In case you are pointing to a local file (that is, a file at the same web site) you could use, for example,

HREF="filename.html"

There is no end of thing you can do with URL's. For one thing, you could point to a directory rather than a filename. The web page server will look for a default startup file with the name of index.html or index.htm or else will give a directory listing -- a list of all the files in the directory as clickable links (assuming, for a Unix file system, that the file permissions are set for public reading of the directory).

Check out also how redirection files are written -- it is just a note in the HEAD section. You could have a viewer enter one directory, and instantly send her elsewhere.

And there are also any number of ways to screw things up, or, to see it another way, there are any number of ways a viewer can circumvent the designed order of a webpage.

To jump to a specific location in another document (or even within the same document), use the form below.

<A HREF="URL#label">...clickable text or image here...</A>

The above is a link to a specific destination in another document, which will be marked as below.

<A HREF="#label">...clickable text or image here...</a>

And above is a link to a specific destination in the same document.

The actual location itself is marked as ..

<A NAME="label">...</a>

"Label" is whatever word you want to use with "NAME=".

LISTS

Lists are the best and easiest method of making sense out of information other than plain text, and can present stuff with great elegance. There are three types of list: Unordered, Ordered, and Definition Lists.

Unordered Lists

Of the form

<UL>...</UL>

with the actual items within the list presented as

<LI>...

in the following manner (the closing LI tag is generally not needed).

<UL>
<LI>First item
<LI>Second item
<LI>Third item
<LI>Fourth item
<LI>Another item
</UL>

This would look as follows..

The LI ("list items") are "bulleted" and it is up to the browser how that is done. I have seen everything from little black balls (actual bullets) to plain asterisks.

Lists can be nested, that is, you can have lists within lists, like the following example. Some browsers invent new bullets for every level.

You can use paragraph breaks, horizontal rules, etc, within lists

Ordered Lists

Of the form

<OL>...</OL>

This is the same as an unordered lists, except that the items are numbered. Big Deal, but must be useful for a lists of car parts.

Definition Lists

Of the form

<DL>...</DL>

Definition lists use two items for every entry: A "Definition Term" of the form..

<DT>...

..(where, again, the closing DT tag can be left off) followed by a "Definition Definition" of the form..

<DD>...

..(where you may neglect, again, the closing DD tag).

Definition lists are a great way to organize text in a semi-outline form. Whole paragraphs can be entered after the DD tag (the DT tag is supposed to be relatively short) complete with BR, HR, P tags and others.

Here is an example, first as CODE...

<DL>
<DT>First item
<DD>First definition
<DT>Second item
<DD>Second Definition
<DT>Third item
<DD>Third Definition
</DL>

This shows as..

First item
First definition
Second item
Second Definition
Third item
Third Definition

Table Constructions

Tables are similar to DL lists, except that they map out a large block of spaces and then proceed to subdivide this into rows and columns. Tables can be capable of very elegant presentations, but can also reduce tabular data to pure garbage. Often tables get in the way of efficient page space, especially on commercial sites.

The basic outline is the same as for Lists: opening and closing TABLE tags, and between them TR (Table Row) tags, and within each TR tag set TD (Table Data) tags. Thus of the following form .. 

 
<TABLE>
	<TR>(First row) 
		<TD>First item 
		<TD>Second item 
		<TD>Third item 
	<TR>(Second Row) 
		<TD>First item 
		<TD>Second item 
		<TD>Third item 
</TABLE>

The TR and TD do not really require a closing tags, but it varies with the browser. The above would display as follows ..

First item Second item Third item
First item Second item Third item

Both the TABLE tags and the TR and TD tags support a number of attributes, but not always the ones you have come to expect. So ALIGN="center" generally does not work for a Table. If you want a Table to present itself in the center of a page, set it between CENTER tags.

Another attribute of interest is BORDER="0", which specifies that no border is to be used. You can specify WIDTH as some measure of pixels, but you will almost always run into a screen where this will not fit. Better to set the WIDTH as a percentage -- like WIDTH="95%" -- the browser will attemp to spread the table to fit the available screen size.

The TR tags can use the attribute of ALIGN (left, right, center) and VALIGN (top, center, bottom) to collect all your data at the top, or left aligned, or whatever.

The TD tags can contain just about anything. But be careful, because the browser will attempt to take your paragraph of text and expand it to an infinitly long single line. You need to include BR tags to fold lines, and include 'nbsp entities' (see below) between words of narrow columns to make sure the browser does not arbitarily fold your lines (this will happen when you have set external WIDTH limits).

Tables were meant for data, but they serve mostly to present texts column-wise as in newspapers. The usual practice seems to be to have a first column which acts as an index to other pages, a second column of main text, and a third column of various highlighted items. Like the following example (without a third column) .. 

                       About the Other Group

 [About OG]     The Other Group began in 1999 with a
 [FYI]          small group of Chicago artists, curators,
 [The Top Ten]  gallery-owners, and writers meeting once
 [CAN Digest]   a month to discuss, share, gripe, and
 [Calendar]     debate. This forum was transfered to an
 [Spaces Org]   ongoing, unmoderated email discussion
 [Openings]     group in 2000. The Other Group consists
 [OG NOTICES]   of 700 members. You are invited to join.

Here we have two columns, created with only one TR tag, and two TD tags. The columnar information on the left is achieved by the placement of BR tags after each line. The paragraph on the right is just that: a H tag for the title, and a P tag for the paragraph.

A more pleasant arrangement could be achieved with the use of CELLPADDING="20" which places 20 pixels of on either side of each data cell. As follows: 

                               About the Other Group

    [About OG]         The Other Group began in 1999 with a
    [FYI]              small group of Chicago artists, curators,
    [The Top Ten]      gallery-owners, and writers meeting once
    [CAN Digest]       a month to discuss, share, gripe, and
    [Calendar]         debate. This forum was transfered to an
    [Spaces Org]       ongoing, unmoderated email discussion
    [Openings]         group in 2000. The Other Group consists
    [OG NOTICES]       of 700 members. You are invited to join.

Additionally the information of left column can be floated up to the top with a VALIGN="top" attribute added to the TD tag. This would look as follows: 

    [About OG]                About the Other Group
    [FYI]
    [The Top Ten]      The Other Group began in 1999 with a
    [CAN Digest]       small group of Chicago artists, curators,
    [Calendar]         gallery-owners, and writers meeting once
    [Spaces Org]       a month to discuss, share, gripe, and
    [Openings]         debate. This forum was transfered to an
    [OG NOTICES]       ongoing, unmoderated email discussion
                       group in 2000. The Other Group consists
                       of 700 members. You are invited to join.

There is a problem with the Lynx browser in presentation. Lynx will show all of the first column (actually all of the first TD entries) before displaying the content of the second TD cell -- and display it below the content of the first column. As follows ... 

      [About OG]
      [FYI]
      [The Top Ten]
      [CAN Digest]
      [Calendar]
      [Spaces Org]
      [Openings]
      [OG NOTICES]

                           About the Other Group

   The Other Group began in 1999 with a small group of Chicago artists,
   curators, gallery-owners, and writers meeting once a month to discuss,
   share, gripe, and debate. This forum was transfered to an ongoing,
   unmoderated email discussion group in 2000. The Other Group consists
   of members. You are invited to join.

What has happened is that Lynx honors all the BR, H, and P tags in total disregard of the structure of the table. It does not do what graphical browsers do, which is to wait till all of a Table has been received before attempting to fit the information to a screen.

The advantage is that Lynx renders at a much higher speed than any graphical browser, all of which wait for the complete Table to be received before rendering to the screen. And if the table layout encompasses the complete page, this might take a while.

This is actually 'page composition' information, but let me make a recommendation here. Use only small tables, and just repeat them. If you have a series of images with adjacent text, set each image and corresponding text into a separate table. It will be rendered quicker than the reader can scroll down a screen.

CHARACTER ENTITIES

The following characters (with some exceptions) cannot be used as-is in any text, since they signal the presence of a HTML Tag. Shown below are the left and right angle brackets, the ampersand, and the double quote. To be able to use these characters anyway, code them as "entities" -- shown below.

<
is coded as &lt; -- this is the less-than symbol, that is, the left angle bracket

>
is coded as &gt; -- the greater-than symbol, the right angle bracket.

&
is coded as &amp; -- the ampersand. Note that the ampersand cannot be used as-is in plain text. And also note that many browsers will not render it as an ampersand even if coded like this. Can't win.

"
is coded as &quot; -- the typewriter-style double quote. But it seems that almost all browsers will render plain quotes as quotes, unless Mac text is used. Some Netscape versions were in a habit of always reducing "html" to "htm" if it were followed by a quote mark. Now that is stupid also.

There continous to be a problem with text generated on Macs, which use upper Ascii (8-bit) to generate some of the double and single quotes. When you start seeing strange hooks (from the upper IBM Ascii box drawing set) in the middle of text, contact the author of the web page (often listed in the Head section of the source code) and ask her to replace the toaster with a real box.

no-breaking-space
is coded as &nbsp; -- the symbol for (n)on-(b)reaking-(sp)ace. That is, it signals the browser that a line break is not supposed to happen at this location in the text even if it is called for because the right side of the screen has been reached, or because of a tag which implies a line break. Best use is between a paragraph full of people names where a 'nbsp' between the first name and the sir name will keep the two parts together on a line.

nbsp also signals a typographical space, which works at least once with all browsers. But don't expect to use this to build empty space or paragraph indents, although it is in almost universal use to designate empty space, especially when the page is created by one of those composer kits.

Repeated nbsp's are at times honored, at times not. For some browsers it depends on the surrounding block tags. But then, Explorer doesn't honor single spaces between images but will count an "eol" as a space.

There are a *lot* more, but they are not really needed. Only if you need to translate your text into other languages (that is, screen displays used in countries other than where this file originates), or need to add occasional omlauts or accents, will you need to know the remaining characters.

A few of the more common forms include the following -- the first upper or lower case letter after the ampersand is the letter used in the text. This can be a capital letter. Thus entities are case sensitive.

.. sample marked up letters ..

&aacute;
letter 'a' with a right accent -- á
&acirc;
letter 'a' with a carrot -- â
&agrave;
letter 'a' with a left accent -- à
&aring;
letter 'a' with a little circle -- å
&ntilde;
letter 'n' with a tilde -- ñ
&auml;
letter 'a' with a umlaut -- ä

I have seen one html-composer which mispelled "uml" and one which capitalized all the character code (so that none of it showed properly) and a number of browsers which disagreed on such things as "&copy;" which is used for the copyright symbol.

More entities, see HTML4.

(Tags overview) [Page design] [File organization] [Tools]