HTML and Tags

HTML is stored in text-only documents. These documents do not contain any built-in formatting or styles for the text (as you might see in a Microsoft Word document), nor do they contain any actual pictures or other multimedia files. They are just text.

Although HTML is text-only, it can contain references to many different kinds of files and multimedia elements; you will see more about how this works as we go along.

Above all else, HTML is a text-formatting language. So, how does HTML format text?

HTML formats text (and everything else, as well) using something called a TAG. Tags can either mark the beginning and ending of some bit of formatting (such as the start and the end points of a paragraph), or the insertion point for some element (such as a picture, or a line break).

Because formatting in an HTML document cannot be stored implicitly in the text itself (as you might find in Microsoft Word), every piece of formatting (bolding, italicization, line breaks, paragraphs, images, multimedia elements, etc) must be marked explicitly using tags.

Tags are indicated by the use of the less-than (<) and greater-than (>) signs on your keyboard. The P (paragraph) tag, which marks the beginning and ending of a paragraph of text, looks like this:

<p>Here is a paragraph of text.</p>

Here is what that code looks like when loaded into your web browser window:

Here is a paragraph of text.

Opening tags (which mark the beginning of a piece of formatting) use less-than (<) and greater-than (>) symbols, called "brackets", around the tagname. Closing tags (which mark the end of a piece of formatting) are identical to opening tags, with the addition of a forward-slash (/) character just before the tagname. The generic syntax, then, could be expressed in the following manner:

<tagname>Content</tagname>

Note: Traditionally, HTML has been a case-insensitive language, which means that upper-case and lower-case letters in tagnames could be used interchangeably <P></P> and <p></p> were both acceptable spellings for the P (paragraph) tag, for instance). With the advent of XHTML and the new coding standards, however, HTML has become a case-SENSITIVE language. Tags must now ALWAYS be expressed using all lower-case letters. We'll discuss the specifics of XHTML standards in a later module.

Other formatting styles may be indicated explicitly using tags. For instance, bold type must be marked with the B (bold) tag, as in the following example:

<p>Hi there. This is a <b>bold</b> word in a paragraph of text.</p>

Here is what that code looks like when displayed in a web browser window:

Hi there. This is a bold word in a paragraph of text.

Not all tags have to open and close in this manner, surrounding content. Some tags simply insert formatting information into the flow of HTML text. For instance, the BR (break) tag inserts a carriage return or line break into text without requiring a closing tag, as in the following example:

<p>Here is a paragraph of text.<br>Notice how the line break occurs just there?</p>

Displayed:

Here is a paragraph of text.
Notice how the line break occurs just there?

Here is the same code without the BR tag:

<p>Here is a paragraph of text. Notice how the line break occurs just anywhere, if at all?</p>

Displayed:

Here is a paragraph of text. Notice how the line break occurs just anywhere, if at all?

XHTML standards require that ALL tags close, even tags which ordinarily would NOT close (such as the BR (break) tag). Therefore, tags which would not ordinarily close must use a special shorthand closing method when following strict XHTML coding standards.

<tagname/>

The forward, or closing, slash (/) is placed just before the closing greater-than sign (or "bracket") in the opening tag; this syntax represents both opening and closing tag in one. This syntax is not fully supported by all recent web browsers, however, and will cause some browsers to display pages incorrectly. To support all browsers, an additional space must be inserted just before the closing slash, which will allow XHTML-standard code and regular HTML browsers to coexist:

<tagname />

Here, then, is the above example, corrected for modern XHTML coding requirements:

<p>Here is a paragraph of text.<br />Notice how the line break occurs just there?</p>

Displayed:

Here is a paragraph of text.
Notice how the line break occurs just there?

We will continue the discussion of the specifics of tag syntax, as well as text formatting, a little later in this module.

To review, there are two types of tags: 1) tags which open and close, and 2) tags which insert something, and therefore do not need to close. Since all tags MUST close according to XHTML standards, non-closable tags must use a special shorthand closing method within the opening tag.

Syntax:

1) Tags which close: <tagname>Content</tagname>

2) Tags which do not close: <tagname />

Main Menu

Copyright © 2001 Michael Masumoto. All Rights Reserved.