Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
This chapter is from the book

Creating Section Headers

(X)HTML provides for up to six levels of headers in your Web page for separating your page into manageable chunks.

To organize your Web page with headers:

  1. In the body section of your (X)HTML document, type <hn>, where n is a number from 1 to 6, depending on the level of header that you want to create.

    Figure 3.10 Figure 3.10 You can use headers to give your document structure, like an outline.


  2. Type the contents of the header.

  3. Type </hn> where n is the same number used in step 1.

Tips

  • Think of your headers as hierarchical dividers. Use them consistently.

  • The only official rule about headers is that the higher the level (the smaller the number), the more prominently they should be displayed. Nevertheless, the major browsers currently display them all the same: in Times New Roman, boldface, at 24, 18, 14, 12, 10 and 8 pixels (9 pixels on the Mac), respectively.

    Figure 3.11 Figure 3.11 The most common default display for first level headers is 24 pixels, Times New Roman, in boldface.

  • You can use styles to format headers with a particular font, size, or color (and more). For details, consult Chapter 10, Formatting with Styles.

  • Add a named anchor (or id) to your headers so that you can create links directly to that header (see page 120).

  • If desired, you can align the text in the header by typing align="direction" in the opening tag, where direction is left, right, or center. But note that the align attribute has been deprecated in favor of style sheets (see page 171).

Find extra tips, the source code for examples, and more at www.cookwood.com

  • + Share This
  • 🔖 Save To Your Account