8.2. HTML Tags
Elements in the HTML specification are indicated by tags. An HTML tag is made up of the element name followed by an optional list of attributes, all of which appears between angle brackets (< >). Nothing within the brackets is displayed in the browser. The tag name is generally an abbreviation of the element's name or the tag's function (this makes them fairly simple to learn). Attributes are properties that extend or refine the tag's function.
In the current specification, the name and attributes within a tag are not case sensitive. <BODY BGCOLOR=white> works the same as <body bgcolor=white>. However, values for particular attributes may be case sensitive, particularly URLs and filenames.
Most HTML elements or components are containers, meaning they have a start tag and an end tag. The text enclosed within the tags follows the tag's instructions. In the following example, the <I> container tags make the enclosed text italic:
The weather is <I>gorgeous</I> today.
Result: The weather is gorgeous today.
For some tags, the end tag is optional and the browser determines when the tag ends by context. This practice is most common with the <p> (paragraph) tag. Most browsers automatically end a paragraph when they encounter a new start tag (although Navigator 4.x has some problems with autoclosing), so many web authors take advantage of the shortcut. Not all tags allow this, however, and not all browsers are forgiving, so when in doubt include the end tag. This is especially important when using Cascading Style Sheets (discussed in Chapter 17, "Cascading Style Sheets") with your document. The new XHTML standard also requires that all tags be closed.
8.2.2. Empty ("Standalone") Tags
A few tags do not have end tags because they are used to place standalone elements in the document or on the page. The image tag (<img>) is such a tag; it simply plops a graphic into the flow of the page. Other standalone tags include the linebreak (<br>), horizontal rule (<hr>), and tags that provide information about a document and don't affect its displayed content, such as the <meta> and <base> tags. Table 8-1 lists all the tags in the HTML 4.01 specification that do not take end tags.
Table 8-1. Empty HTML tags
Attributes are added within a tag to extend or modify the tag's actions. Attributes always go in the start tag only (end tags never contain attributes). You can add multiple attributes within a single tag. Tag attributes, if any, go after the tag name, each separated by one or more spaces. Their order of appearance is not important.
Most attributes take values, which follow an equals sign (=) after the attribute's name. Most browsers cannot handle attribute values more than 1,024 characters in length. Values may be case-sensitive, particularly filenames or URLs.
The syntax for a container tag with attributes is as follows:
<ELEMENT ATTRIBUTE="value">Affected text</ELEMENT>
The following are examples of tags that contain attributes:
<IMG SRC="graphics/pixie.gif" WIDTH="45" HEIGHT="60"> <BODY BGCOLOR="#000000">...</BODY> <FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE="4">...</FONT>
The HTML 4.01 specification recommends that all attribute values be enclosed in quotation marks, but it acknowledges that in some cases, they may be omitted. If the value is a single word containing only letters (a-z or A-Z), digits (0-9), hyphens (-), periods (.), underscores ( _ ), and colons (:), then it can be placed directly after the equals sign without quotation marks. If you are still unsure, using quotation marks consistently for all values works just fine and is definitely a good idea. In the XHTML specification, all attribute values must be enclosed in quotation marks in order to be well-formed.
8.2.4. Nesting HTML Tags
HTML elements may be contained within other HTML elements. This is called nesting, and to do it properly, both the beginning and end tags of the enclosed tag must be completely contained within the beginning and end tags of the applied tag. In this example, a bold style (<b> ) is applied to already italic text:
The weather is <B><I>gorgeous</I></B> today.
Result: The weather is gorgeous today.
Nested tags do not necessarily need to appear right next to each other. In this example, the bold text is nested within a longer link.
This links to <A HREF="document.html">a really <B>cool</B> page</A>.
Result: This links to a really cool page.
A common mistake is simply overlapping the tags. Nested tags must be contained entirely (both the start and end tags) within the outer set of tags. Although some browsers display content marked up this way, other browsers do not allow the violation, so it is important to nest tags correctly. The following example shows incorrect nesting of tags (the <I> tag should have been closed before the <B> tag):
INCORRECT: The weather is <B><I>gorgeous</B></I> today.
Copyright © 2002 O'Reilly & Associates. All rights reserved.