What is the Best Way to Mark up the Title of a Document?

---

To answer the preceding question, let's imagine that we were placing the title of the document at the top of the page. We'll then look at three ways of achieving similar results.

Method A: Meaningful?

 <span >Super Cool Page Title</span> 

Although <span> can be a handy tag in some circumstances, it doesn't make a whole lot of sense for page headings. One benefit to using this method is that we could add a CSS rule for the heading class that's been assigned to make the text appear like a heading.

 .heading {   font-size: 24px;   font-weight: bold;   color: blue;   } 

Now all headings marked up with the heading class will be big, bold, and blue. Great, right? But what if someone views the page using a browser or device that doesn't support CSS?

For instance, what if we were putting this particular CSS rule in an external style sheet that was being hidden from older browsers—or if a screen reader was reading the page to a person browsing with disabilities? A user visiting our page by these means would see (or hear) nothing different from normal text on the page.

While adds a bit of meaning to the tag, <span> is just a generic wrapper, free from default styling in most browsers.

Search engines that crawl this page would gloss over the <span> tag as if it wasn't even there, unwilling to give extra weight to any keywords that might be contained within. We'll talk more about the search engine/header relationship further on in the chapter.

Finally, since the <span> tag is an inline element, we would most likely need to wrap Method A in an extra element that is block-level, like a <p> or <div> tag in order to make it live on its own line, further mucking up the markup with unnecessary code. So even by adding the extra, necessary markup, browsers that lack CSS support would still display the text no differently from any other on the page.

Method B: The p and b Combo

 <p><b>Super Cool Page Title</b></p> 

Using a paragraph tag, as Method B does, will get us the block-level display that we'd like and the <b> tag will render the text in bold (on most browsers)—but we're faced with the same meaningless results when marking up an important heading this way.

Unlike Method A, the presence of the <b> tag will most likely render the text in bold in visual browsers—even with the absence of CSS. But as with the <span> tag, search engines won't place a higher priority on something that is simply bold in its own paragraph.

Difficult to Style

Using the plain jane combination of <p> and <b> tags also leaves out the possibility of later styling this heading differently from any other paragraph on the page. We'd probably want to call out headings in a unique way, adding definition and structure to the page content—but we're stuck with just having it appear bold using this method.

Method C: Style and Substance

 <h1>Super Cool Page Title</h1> 

Ah, good ol' heading tags. They've been around this whole time, yet plenty of web designers have yet to fully embrace them in a consistent manner. When used properly, page headings can anchor a page's content, providing flexible, indexable, and stylable structure.

Markup-wise, you have to love their simplicity. There is no need for adding extra tags, and you could even argue that you're saving a few bytes by using them as opposed to the other two options. Negligible maybe, but every little bit counts.

<h1> through <h6> denote the six levels of headings, from most important (<h1>) to least important (<h6>). They are block-level in nature and don't need an additional element to put them on their own line. Simple, and effective—the right tool for the job.

Easily Styled

Because the <h1> tag we're using is unique, rather than <b> or <p> tags that are likely to be used throughout the page, we can then style it in a variety of ways using CSS (which we'll get a chance to explore later in the "Extra credit" section of this chapter).

More importantly though, is that without any styling at all, a heading tag is obviously a heading! Visual browsers will render an <h1> in a larger, bold font. An unstyled view of the page will show the document structure as it was intended, with the proper heading tag conveying meaning rather than just presentational instructions (see Figure 2-1).

Figure 2-1: An example of an unstyled view of a page that uses heading tags

Screen readers, PDAs, phones, and other visual and nonvisual browsers will also know what to do with a heading tag, handling it correctly and treating it with importance over normal text on the page. Use a <span> tag, and browsers that don't (or can't) handle CSS will present it as if it were nothing particularly special.

Default Distaste

Historically, designers may have avoided using heading tags altogether due to their beastly appearance when viewed unstyled with default settings. Alternatively, some may have avoided <h1> or <h2> because of their larger size by default, instead opting to use a higher heading number to achieve a smaller text size.

It's important to stress, however, that by using CSS we can easily alter the appearance of these headings in any manner we wish—an <h1>, for instance, doesn't have to be a gigantic billboard, engulfing half of the user's screen. Later in this chapter, I'll demonstrate how easy it is to style headings with CSS, hopefully helping to alleviate the fear of the mighty <h1>.

Search Engine Friendly

This is a huge one. Search engines love heading tags. A <span> tag or plain paragraph that is bold, on the other hand, means less to them. Properly marking up your headings with <h1> through <h6> tags takes little effort, yet can make it easier for search engines to index your pages, and ultimately for people to find them as well.

Search engine robots place special importance on heading tags—a place where you're likely to have some keywords sprinkled about. Just as they index <title> and <meta>, they'll set their sights next on any heading tags you may have down the page. If you don't use them, those keywords contained within them won't be as valuable and could get overlooked.

So with very little effort, you'll be increasing the likelihood of someone finding your site based on its content. Sounds good, doesn't it?

An Aside on Heading Order

In the example, this particular heading is the most important on the page because it's the title of the document. Therefore, we'll use the most important heading tag, <h1>. According to the W3C, some believe it to be bad practice to skip heading levels. For instance, imagine we have the following on the page:

 <h1>Super Cool Page Title</h1> 

Our next heading (if not repeating another <h1>) should probably be an <h2>, followed by <h3>, etc. You probably shouldn't skip a level by having <h1> be followed by <h3>. I tend to agree, and think about the structure as an outline, keeping the levels in sequential order, right down the line. If anything, it makes it more convenient to add headings and styles to a preexisting page, and you'll have less of a risk for running out of numbers to use.

As mentioned previously, designers might have used an <h4> for the most important heading on the page, simply because the default font size wasn't as honking large as it would be if they used an <h1>. But remember, structure now, style later. We can always style the heading to whatever text size we'd like using CSS.

---