 | Web Design in a Nutshell, 2nd Edition |  |
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.
TIP
Because tags are not case-sensitive in the HTML 4.01 specification, the tags in sample code throughout this book are written in all uppercase letters for improved readability. In future iterations of HTML (namely XHTML, discussed in Chapter 31, "XHTML"), tags and attributes will be required to be all lowercase. While it is recommended that developers begin the good habit of coding in all lowercase immediately, this book follows the conventions for tag display established within the HTML 4.01 specification itself.
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.
The end tag contains the same name as the start tag, but it is preceded by a slash ( / ). You can think of it as an "off " switch for the tag.
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.
In the HTML charts that appear in this book, container tags are indicated with the syntax < >...</ >. If the end tag is optional, it's noted in the tag's explanation.
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.
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.
TIP
Be careful not to leave out the closing quotation mark, or all the content from the opening quotation mark until the browser encounters a subsequent quotation mark will be interpreted as part of the value and won't display in the browser. This is a simple mistake that can cause hours of debugging frustration.
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.
|  | |
| 8. HTML Overview |  | 8.3. Information Browsers Ignore |
Copyright © 2002 O'Reilly & Associates. All rights reserved.