Basic Text Tags

This page summarizes the major text-formatting tags. These are tags used to mark-up texts in the body of a document. Both logical and physical formatting are considered.

The Paragraph

The basic unit of a document is the paragraph. A paragraph is a logical unit; it is a conceptual unit of measure; how it is represented on the screen depends on the browser. Is the first line indented? Are there blank lines between paragraphs? These are matters left to the webbrowser. Use the p tag to begin a paragraph. While not necessary, I prefer to usually include the closing tag. Some people prefer to use the p tag as a marker between paragraphs, rather than providing the tag at the beginning of each paragraph. This is a dangerous tactic, as certain types of advanced formatting will not work if you format your paragraphs in this way. To be safe, just provide both an opening and closing tag for each paragraph.

Blockquotes (blockquote) are indented on the right and the left. Some older text-based browsers center blockquotes. They are mostly used for extended quotations. Blockquotes require the closing tag.

Use the line-break -- br -- to for a line-break at a certain point. Do not substitute multiple br tags for paragraph markers. There is no closing tag.

If you do not wish for a line to break at a certain spot, place a   character -- non-breaking-space -- between words.

Lists

There are three types of lists supported in HTML: unnumbered lists, ordered or numbered lists, and definition lists: ul, ol and dl respectively. ul and ol take the li tag for list items; a dl takes dt for the item to be defined, and dd for the definition. A single dt can have multiple definitions, but not the other way around.

Character Formatting

There are two types of character formatting: logical and physical. Each will be considered here.

Physical formatting

Physical formatting refers to indcating how a character should look -- bold, italic, for example. Or underlined. In HTML you can use the b, i and u tags respectively for these styles.

Logical formatting

Logical formatting refers to indicating the function of a section of text. For example, text can be "strong" or "emphasized". Strong text -- strong -- is often displayed in bold, and emphasized text -- em -- is often displayed in italics.

Physical vs. Logical formatting

One of the goals of HTML is to abstract form from content, that is, to separate what is being presented (content) from the actual presentation (form). To this end, it is preferable to use logical formatting, which describes the logical function of a piece of formatting. That is why we use h1, h2, ... h6 rather than saying "make this size 16 Times New Roman". Logical formatting is easier to translate to other media, such as text-to-speech browsers for the blind. Please keep the function of a piece of text in mind when creating your pages.

Tables

HTML also supports the creation of tables. Tables (table) consist of rows and columns. Tags for rows (tr) are provided. Within a row you place table cells -- either headers or data (th vs. td). Tables can have borders (or not), can be aligned either left, right or center on the page, and can take up a variable amount of page width. Here are a few notes. Width can be given either as a percentage of the whole page (or of the whole table, if you give the width of a particular cell), or absolutely in terms of pixels. The former is preferred as it allows the table to be resized depending on the size of the browser window. Absolute width assignments can result in tables which are too wide for a given browser window. As you cannot predict or dictate the size of the browser window, it is best to let the browser determine how to format a table.

Tables are often used to provide page layout; providing, for example a narrow column on the left for a menu and wider main column for page content. This is not the purpose of tables; tables are intended for presenting tabular data, such as results from a spreadsheet, etc. However, as the page-layout capabilities of HTML are quite limited, using tables for page-layout has become very common, and is preferable to even worse solutions such as frames. For that reason, it is this author's opinion that using tables for layout is acceptable, as long as one makes an effort to make sure the page can display on browsers that do not format tables well, such as Lynx. Furthermore, it is best to not create highly complex, nested tables, as increased table complexity results in more complex pages to render, which increases the amount of time it takes for a browser to draw a page. As always, follow the KISS rule: "Keep it Simple, Stupid".

Nested Tags

It is perfectly acceptable to nest certain tags. For example, within a paragraph, you can mark text as strong. Furthermore, within a table cell, you can place one or more paragraphs, each containing strong text. You can place lists within lists, tables within lists, etc. Certain rules, however, must be followed. Most importantly, you may nest tags, but the last tag opened must always be the first tag closed. So, for example, the following is legal: Hi There!, but Hi There! is not. Note also that you cannot nest other tags within an anchor tag (see Links for information about anchors). You can place anchors within other tags, however.

Contents	Chapter 2	Previous	Next