HTML and CSS —

Using Headers Properly

Headers in HTML and XHTML are tags used to define the headings within your page. There are six levels of headings, from <h1> . . . </h1> to <h6> . . .</h6>. The <h1> . . . </h1> level header is considered the most significant header, such as a page title, with an <h2> . . .</h2> level header performing as a subhead and so on. Headers at the fifth and sixth levels are rarely used, although you will find them occasionally in very complex documents. Example 2-1 shows a list of headers as they might appear in a document, although there would be text between each header.

Example 2-1. Headers with logical content contained with them

<h1>Welcome to Molly's Home Page!</h1>
<h2>Books</h2>
<h3>As Author</h3>
<h4>Book Title</h4>

Typically, you'll want more than one subheading per sectionit helps your content to be more understandable to readers. As you can see from Figure 2-1, each level header I've used has been visually formatted to be larger at the <h1> level and become progressively smaller.

Figure 2-1. Headers as rendered in a web browser.

Headers Are Structural, Not Visual

Display is considered discretionary to the browser manufacturer. You will use CSS to style your headers later. Headers should be used in a hierarchical fashion because the tags are describing the text being formatted.