HTML: A Gentle Introduction

In the May issue of Linux Journal, Eric explained how to set up and install CERN's World Wide Web server software. This month, he tells us how to use HTML to create hypertext documents for viewing by Web surfers.
Logical Format Style Tags

I've already introduced you to one logical format. The H1 through H6 heading styles are logical formats for headings. If physical heading styles existed in HTML, you would have to specify a particular font and font size for each heading (for example, 30-point Courier). Following is a list of some of the more common logical format styles:


Used when text is the title of a creative work such as a book.


Used when text is a piece of computer code.


Display text with emphasis.


Used when text is a piece of sample output.


Display text with strong emphasis.

Of particular note, it is better stylistic practice to use the EM logical style in place of the italics physical style, and to use the STRONG logical style in place of the bold physical style.

Page Breaks, Rules, and Preformated Text

Carriage returns and white space are usually ignored in HTML. This is done because different browsers have different display capabilities. Where one browser might be able to display 100 character lines, another might not. This presents a problem when it is necessary to have a forced break, such as between paragraphs. Special tags were created so that an author could force a break in a document. Following is a list of tags which can be used to force a break in a document:


Force a paragraph break.


Force a line break.


Force a line break with a horizontal rule.

As a general note, it is best to use break commands, as well as other HTML directives in ways that keep your document device independent. The browser your readers use might format documents with different line lengths. If you use a BR directive at each line break found in a paper document you were converting into HTML, a browser might insert additional line breaks as well. This could result in a choppy-looking document, probably with alternating long and short lines.

Notice that these break tags don't have an associated closing tag. For instance the <BR> doesn't have an associated </BR>.

If you do want to display something exactly as it is typed, HTML provides a tag for preserving the format of preformated text. The <PRE>text</PRE> directive instructs a browser to display text exactly as it is typed in the document. Once again, keep in mind that characteristics of some browsers may make it difficult for them to display the text in the exact format you expect.

Lists and Definitions

HTML provides for bulleted and numbered lists. Following is an example of HTML code which will generate a bulleted or unnumbered list of items:


The <UL> tag indicates the start of an unnumbered list. Each item in the list is preceded by an <LI> tag to indicate the start of a new item in the list. Note that the <LI> tags don't have closing tags, and that when displayed, each list item will be separated by a carriage return.

To change this list to a numbered list, just change the <UL> and </UL> tags into <OL> and </OL> tags. A numbered list will display each item in the list preceded by a number instead of a bullet.

Another type of list is a definition or description list. Following is a snippet of HTML code demonstrating how to code a definition list:

<DD>A red colored fruit
<DD>An orange colored fruit

A <DL> tag begins a definition list, and a </DL> tag ends the list. The <DT> indicates a term to be defined, while a <DD> indicates a term definition. When the browser formats the list, each term and definition will be on a line by itself: the term is usually left justified with definition indented directly beneath it.


Geek Guide
The DevOps Toolbox

Tools and Technologies for Scale and Reliability
by Linux Journal Editor Bill Childers

Get your free copy today

Sponsored by IBM

8 Signs You're Beyond Cron

Scheduling Crontabs With an Enterprise Scheduler
On Demand
Moderated by Linux Journal Contributor Mike Diehl

Sign up now

Sponsored by Skybot