Section 3.3. Tags and Attributes | Data Networks: Routing, Security, and Performance Optimization

3.3. Tags and Attributes

For the most part, tagsthe markup elements of HTML and XHTMLare simple to understand and use, since they are made up of common words, abbreviations, and notations. For instance, the  and  tags respectively tell the browser to start and stop italicizing the text characters that come between them. Accordingly, the syllable "simp" in our barebones example in Figure 3-1 should appear italicized when displayed by the browser.

Figure 3-1. Compare this browser display with its Barebones source HTML shown earlier

The HTML and XHTML standards and their various extensions define how and where you place tags within a document. Let's take a closer look at that syntactic sugar that holds together all documents.

3.3.1. The Syntax of a Tag

Every tag consists of a tag name , sometimes followed by an optional list of tag attributes , all placed between opening and closing brackets ( < and > ). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as <head> and  . More complicated tags contain one or more attributes, which specify or modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect between <head> , <Head> , <HEAD> , and even <HeaD> ; all of them are equivalent. With XHTML, case is important: all current standard tag and attribute names are in lowercase; always <head> , never <HEAD> .

For both HTML and XHTML, the values that you assign to a particular attribute may be case-sensitive, depending on your browser and server. In particular, file location and name referencesor URLsare case-sensitive. [Referencing Documents: The URL, 6.2]

Tag attributes, if any, belong after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important.

A tag attribute's value, if any, follows an equals sign ( = ) after the attribute name. You may include spaces around the equals sign so that width=6 , width = 6 , width =6 , and width= 6 all mean the same. For readability, however, we prefer not to include spaces. That way, it's easier to pick out an attribute/value pair from a crowd of pairs in a lengthy tag.

With HTML, if an attribute's value is a single word or number (no spaces), you may simply add it after the equals sign. You should enclose all other values in single or double quotation marks, especially those values that contain several words separated by spaces. With XHTML, all attribute values must be enclosed in quotes. The length of the value is limited to 1,024 characters.

Most browsers are tolerant of how tags are punctuated and broken across lines. Nonetheless, avoid breaking tags across lines in your source document whenever possible. This rule promotes readability and reduces potential errors in your HTML documents.

3.3.2. Sample Tags

Here are some tags with attributes:

 <a href="http://www.oreilly.com/catalog.html"> <ul compact> <ul compact="compact"> <input type=text name=filename size=24 maxlength=80> <link title="Table of Contents">

The first example is the <a> tag for a hyperlink to our publisher's web-based catalog of products. It has a single attribute, href , followed by the catalog's address in cyberspaceits URL.

The second example shows an HTML tag that formats text into an unordered list of items. Its single attribute compact , which limits the space between list itemsdoes not require a value.

The third example demonstrates how the second example must be written in XHTML. Notice the compact attribute now has a value, albeit a redundant one, and that its value is enclosed in double quotes.

The fourth example shows an HTML tag with multiple attributes, each with a value that does not require enclosing quotation marks. Of course, with XHTML, each attribute value must be enclosed in double quotes.

The last example shows proper use of enclosing quotation marks when the attribute value is more than one word long.

What is not immediately evident in these examples is that while HTML attribute names are not case-sensitive ( href works the same as HREF and HreF in HTML), most attribute values are case-sensitive. The value filename for the name attribute in the <input> tag example is not the same as the value Filename , for instance.

3.3.3. Starting and Ending Tags

We alluded earlier to the fact that most tags have a beginning and an end and affect the portion of content between them. That enclosed segment may be large or small, from a single text character, syllable, or wordsuch as the italicized "simp" syllable in our barebones exampleto the <html> tag that bounds the entire document. The starting component of any tag is the tag name and its attributes, if any. The corresponding ending tag is the tag name alone, preceded by a slash ( / ). Ending tags have no attributes.

3.3.4. Proper and Improper Nesting

You can put tags inside the affected segment of another tag (nested) for multiple tag effects on a single segment of the document. For example, a portion of the following text is both bold and included as part of an anchor defined by the <a> tag:

 <body> This is some text in the body, with a <a href="another_doc.html">link, a portion of which is <b>set in bold.</b></a> </body>

According to the HTML and XHTML standards, you must end nested tags by starting with the most recent one and working your way back outfirst in, last out. For instance, in this example, we end the bold tag (  ) before ending the link tag ( </a> ) because we started in the reverse order: <a> tag first, then  tag. It's a good idea to follow that standard, even though most browsers don't absolutely insist you do so. You may get away with violating this nesting rule for one browser, and sometimes even with all current browsers. But eventually a new browser version won't allow the violation, and you'll be hard-pressed to straighten out your source HTML document. Also, be aware that the XHTML standard explicitly forbids improper nesting.

3.3.5. Tags Without Ends

According to the HTML standard, a few tags do not have ending tags. In fact, the standard forbids use of an end tag for these special ones, although most browsers are lenient and ignore the errant end tag. For example, the   tag causes a line break; it has no effect otherwise on the subsequent portion of the document and, hence, does not need an ending tag.

The HTML tags that do not have corresponding end tags are:

<area>	<base>	<basefont>
<br>	<col>	<frame>
<hr>	<img>	<input>
<isindex>	<link>	<meta>
<param>

XHTML always requires end tags. [Handling Empty Elements, 16.3.3]

3.3.6. Omitting Tags

You often see documents in which the author seemingly has forgotten to include an ending tag, in apparent violation of the HTML and certainly the XHTML standards. Sometimes even the <body> tag is missing. But your browser doesn't complain, and the document displays just fine. What gives? The HTML standard lets you omit certain tags or their endings for clarity and ease of preparation. The HTML standard writers didn't intend the language to be tedious .

For example, the  tag that defines the start of a paragraph has a corresponding end tag,  , but the end tag rarely is used. In fact, many HTML authors don't even know it exists. [, 4.1.2]

The HTML standard lets you omit a starting tag or ending tag whenever it can be unambiguously inferred by the surrounding context. Many browsers make good guesses when confronted with missing tags, leading the document author to assume that a valid omission was made.

We recommend that you almost always add the ending tag. It'll make life easier for yourself as you transition to XHTML as well as for the browser and anyone who might need to modify your document in the future.

3.3.7. Ignored or Redundant Tags

HTML browsers sometimes ignore tags. This usually happens with redundant tags whose effects merely cancel or substitute for themselves . The best example is a series of  tags, one after the other, with no intervening content. Unlike a text-processing tool, most browsers start to a new line only once. The extra  tags are redundant and the browser usually ignores them.

In addition, most HTML browsers ignore any tag that they don't understand or that the document author specified incorrectly. Browsers habitually forge ahead and make some sense of a document, no matter how badly formed and error ridden it may be. This isn't just a tactic to overcome errors; it's also an important strategy for extensibility. Imagine how much harder it would be to add new features to the language if the existing base of browsers choked on them.

The thing to watch out for with nonstandard tags that aren't supported by most browsers is their enclosed contents, if any. Browsers that recognize the new tag may process those contents differently than those that don't support the new tag. For example, older browsers, some of which are still in use by many people today, don't support styles. Dutifully, they ignore the <style> tag, but then go on to render its contents on the user 's screen, effectively defeating the tag's purpose in addition to ruining the document's appearance. [Document-Level Stylesheets, 8.1.2]