HTML Markup Tags

Markup Tags

HTML
This element tells your browser that the file contains HTML-coded information. The file extension .html also indicates this an HTML document and must be used. (If you are restricted to 8.3 filenames (e.g., LeeHome.htm, use only .htm for your extension.)

HEAD
The head element identifies the first part of your HTML-coded document that contains the title. The title is shown as part of your browser's window (see below).

TITLE
The title element contains your document title and identifies its content in a global context. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server. For example, you might include a shortened title of a book along with the chapter contents: NCSA Mosaic Guide (Windows): Installation. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Installation. Generally you should keep your titles to 64 characters or fewer.

BODY
The second--and largest--part of your HTML document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.

Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should be tagged <H1>.

The syntax of the heading element is:
<Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading.

Do not skip levels of headings in your document. For example, don't start with a level-one heading (<H1>) and then next use a level-three (<H3>) heading.

Paragraphs
Unlike documents in most word processors, carriage returns in HTML files aren't significant. So you don't have to worry about how long your lines of text are (better to have them fewer than 72 characters long though). Word wrapping can occur at any point in your source file, and multiple spaces are collapsed into a single space by your browser.

In the bare-bones example shown in the Minimal HTML Document section, the first paragraph is coded as

Welcome to the world of HTML.
This is the first paragraph.
While short it is still a paragraph!

In the source file there is a line break between the sentences. A Web browser ignores this line break and starts a new paragraph only when it encounters another tag.

Important: You must indicate paragraphs with elements. A browser ignores any indentations or blank lines in the source text. Without elements, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical output as the first bare-bones HTML example:

<H1>Level-one heading</H1>
Welcome to the world of HTML.
This is the first paragraph.
While short it is still aparagraph! 
And this is the second paragraph.

To preserve readability in HTML files, put headings on separate lines, use a blank line or two where it helps identify the start of a new section, and separate paragraphs with blank lines (in addition to the tags). These extra spaces will help you when you edit your files (but your browser will ignore the extra spaces because it has its own set of rules on spacing that do not depend on the spaces you put in your source file).

NOTE: The closing tag can be omitted. This is because browsers understand that when they encounter a tag, it implies that there is an end to the previous paragraph. Using the and as a paragraph container means that you can center a paragraph by including the ALIGN=alignment attribute in your source file.

This is a centered paragraph.
[See the formatted version below.]

This is a centered paragraph.

Lists
HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.

Unnumbered Lists

To make an unnumbered, bulleted list,

1. start with an opening list <UL> (for unnumbered list) tag
2. enter the <LI> (list item) tag followed by the individual
item; no closing </LI> tag is needed
3. end the entire list with a closing list </UL> tag

Below is a sample three-item list:

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>

The output is:

apples
bananas
grapefruit

The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the paragraph tags.

Numbered Lists

A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

produces this formatted output:

1. oranges
2. peaches
3. grapes

Nested Lists
Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.

Here is a sample nested list:

<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>

The nested list is displayed as

A few New England states:
- Vermont
- New Hampshire
- Maine
Two Midwestern states:
- Michigan
- Indiana

Addresses
The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file.

For example, the last line of the online version of this guide is:

<ADDRESS>
A Beginner's Guide to HTML / BNTC /
pubs@bntc.uiuc.edu / revised June 98
</ADDRESS>

The result is:

A Guide to HTML / BNTC / pubs@bntc.uiuc.edu / revised June 98

NOTE: <ADDRESS> is not used for postal addresses. See "Forced Line Breaks" below to see how to format postal addresses.

Forced Line Breaks/Postal Addresses

The tag forces a line break with no extra (white) space between lines. Using elements for short lines of text such as postal addresses results in unwanted additional white space. For example, with :

National Center for Supercomputing Applications 
70 East Springfield Avenue 
Champaign, Ohio 61565-5517

The output is:

National Center for Supercomputing Applications
70 East Springfield Avenue
Champaign, Ohio 61565-5517

Horizontal Rules
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is useful to separate sections of your document. For example, many people add a rule at the end of their text and before the <address> information.

You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation. For example:

Logical Styles for Text

<DFN> for a word being defined. Typically displayed in italics. (NCSA Mosaic is a World Wide Web browser.)

for emphasis. Typically displayed in italics. (Consultants cannot reset your password unless you call the help line.)

<CITE> for titles of books, films, etc. Typically displayed in italics. (A Guide to HTML)

<CODE> for computer code. Displayed in a fixed-width font. (The <stdio.h> header file)

<KBD> for user keyboard entry. Typically displayed in plain fixed-width font. (Enter passwd to change your password.)

<SAMP> for a sequence of literal characters. Displayed in a fixed-width font. (Segmentation fault: Core dumped.)

for strong emphasis. Typically displayed in bold. (NOTE: Always check your links.)

<VAR> for a variable, where you will replace the variable with specific information. Typically displayed in italics. (rm filename deletes the file.)

Physical Styles for Text

bold text

italic text

<TT> typewriter text, e.g. fixed-width font.

Inline Images
Most Web browsers can display inline images (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes time to process and slows down the initial display of a document. Carefully select your images and the number of images in a document.

To include an inline image, enter:

where ImageName is the URL of the image file.

The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.

Image Size Attributes
You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (Get the pixel size from your image-processing software, such as Adobe Photoshop.)

For example, to include a self portrait image in a file along with the portrait's dimensions, enter:

NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browser developers think stretching/shrinking is a good idea. So don't plan on your readers having access to this feature. Check your dimensions and use the correct ones.

Background Graphics
Newer versions of Web browsers can load an image and use it as a background when displaying a page. Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.

Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.

However you only have to create a small piece of the image. Using a feature called tiling, a browser takes the image and repeats it across and down to fill your browser window. In sum you generate one image, and

The tag to include a background image is included in the <BODY> statement as an attribute:

Background Color
By default browsers display text in black on a gray background. However, you can change both elements if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.

Always preview changes like this to make sure your pages are readable. (For example, many people find red text on a black background difficult to read!)

You change the color of text, links, visited links, and active links using attributes of the <BODY> tag. For example, enter:

This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).

The six-digit number and letter combinations represent colors by giving their RGB (red, green, blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, or blue as a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, and FFFFFF is white (fully saturated with all three colors). These number and letter combinations are cryptic. Fortunately an online resource is available to help you track down the combinations that map to specific colors and there is software available for you to do this on your workstation:

ColorPro Web server
(http://www.biola.edu/cgi-bin/colorpro/)
WebColor - downloadable software site
(http://www.macworld.com/cgi-bin/software.pl/TelecomInternet/
Software.767.html)

File Type Extension

plain text .txt

HTML document .html

GIF image .gif

TIFF image .tiff

X Bitmap image .xbm

JPEG image .jpg or .jpeg

PostScript file .ps

AIFF sound file .aiff

AU sound file .au

WAV sound file .wav
QuickTime movie .mov

MPEG movie .mpeg or .mpg

Keep in mind your intended audience and their access to software. Most UNIX workstations, for instance, cannot view QuickTime movies.

12/03/00