BASIC HTML COMMANDS

BASIC HTML COMMANDS

HEADERS

There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another.

<h1>This is a header 1 tag</h1>

THIS IS A HEADER 1 TAG

<h2>This is a header 2 tag</h2>

This is a header 2 tag

<h3>This is a header 3 tag</h3>

THIS IS A HEADER 3 TAG

<h4>This is a header 4 tag</h4>

This is a header 4 tag

<h5>This is a header 5 tag</h5>

THIS IS A HEADER 5 TAG

<h6>This is a header 6 tag</h6>

THIS IS A HEADER 6 TAG

Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It’s important to use headers only for headings, not just to make text bold (we cover the bold tag later).

PARAGRAPHS

In HTML, a paragraph tag <p> should be put at the end of every paragraph of “normal” text (normal being defined as not already having a tag associated with it).

<p> causes a line break and adds a trailing blank line

<br> causes a line break with no trailing blank line

As a convenience to yourself and others who might have to edit your HTML documents, it’s a very good idea to put two or three blank lines between paragraphs to facilitate editing.

PREFORMATTED TEXT

The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font.

<pre>this is an example of a preformatted text tag</pre>

And this is how it displays:

this is an example of a preformatted text tag

BOLDFACE, UNDERLINE AND ITALICS

You can add emphasis to text by using the boldface and italic tags or the emphasis and strong tags.

There is an underline tag as well, but most people don’t use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis.

When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics.

Physical tags

This is a <b>boldface</b> tag.

This is how bold facing appears.

This is a <u> underline</u> tag.

This is an <i>italic</i> tag.

This is how italics appear.

Logical tags

This is a <strong>strongly emphasized</strong> tag.

This is a strongly emphasizedtag.

This is an <em>emphasized</em> tag.

This is an emphasizedtag.There is a subtle distinction between the above “physical” tags which merely change the displayed font, and “logical” styles which are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML.

LISTS

There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists.

When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different.

Unnumbered lists
Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>.

For example, here is an unnumbered list with three items:

<ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul>

Here is how that list would display:

·         list item 1

·         list item 2

·         list item 3

Numbered lists

Here is the same list using a numbered list format:

<ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol>

Here is how that list would display:

1.     list item 1

2.     list item 2

3.     list item 3

Nested lists

Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list).

<ul> <li> list item 1 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul> <li> nested item 1 <li> nested item 2 </ul> </ul>

Here is how that list would display:

·         list item 1

·         nested item 1

·         nested item 2

·         list item 2

·         nested item 1

·         nested item 2

·         list item 3

·         nested item 1

·         nested item 2