HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
| < Day Day Up > |
The heading elements are used to create "headlines" in documents. Six different levels of headings are supported: <h1> , <h2> , <h3> , <h4> , <h5> , and <h6> . These range in importance from <h1> , the most important, to <h6> , the least important. Most browsers display headings in larger and/or bolder font than normal text. Many HTML authors erroneously think of heading elements as formatting that makes text bigger or bolder. Actually, heading elements convey logical meaning about a document's structure. However, in most visual browsers, sizing and weight are relative to the importance of the heading. Therefore, <h1> level headings are larger and generally bolder than <h3> headings, leading developers to interpret these logical tags most often in a physical manner. In addition, as a block element, returns are inserted after the heading unless overridden by a style sheet. The following example markup demonstrates the heading elements:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Heading Test </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1> Heading 1 </h1> <h2> Heading 2 </h2> <h3> Heading 3 </h3> <h4> Heading 4 </h4> <h5> Heading 5 </h5> <h6> Heading 6 </h6> </body> </html>
A sample rendering of this heading example is shown in Figure 3-1.
| Note | The Lynx text browser renders headings very differently from commercial graphical browsers. Lynx can't display larger fonts, so it might attempt to bold them or align them. h1 headings are aligned in the center, and each lower-level heading is indented more than the next -highest level heading. |
Besides the core attributes discussed early in the chapter, the primary attribute used with headings is align . By default, headings usually are left-aligned, but the value of the align attribute of headings can also be set to right , center , and justify under transitional versions of HTML and XHTML. The following example markup shows the common usage of the align attribute for headings:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Heading Alignment Example </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h1 align="left"> Aligned Left </h1> <h1 align="center"> Aligned Center </h1> <h1 align="right"> Aligned Right </h1> </body> </html>
Under the strict version of HTML, as well as under XHTML, the align attribute has been deprecated in favor of using style sheets. The example that follows would validate under strict XHTML 1.0 as it uses CSS to align the headings. A full discussion of CSS begins in Chapter 10.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> XHTML Heading Alignment </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> h1.left {text-align: left;} h1.center {text-align: center;} h1.right {text-align: right;} </style> </head> <body> <h1 class="left"> Aligned Left </h1> <h1 class="center"> Aligned Center </h1> <h1 class="right"> Aligned Right </h1> </body> </html>
Regardless of appropriateness, given the rise of CSS, many HTML authors often use headings to make text large. As with all HTML elements viewed in a presentational manner, size is a relative concept, not an absolute concept. The actual size of the heading depends on the browser, the browser's settings, and the platform on which it is running. The size of an <h1> header under Netscape on a UNIX system may be different from the same <h1> header on a Windows machine running Internet Explorer. The headlines are relatively bigger, but the exact size is unknown, making consistent layout difficult.
| Note | A quick survey of heading use on the Web should reveal that headings beyond <h3> rarely are used. Why? Certainly this is because people use headings in a visual fashion and the look of <h4> , <h5> and <h6> tags can be easily accomplished with other tags. |
| < Day Day Up > |