This chapter is from the book
This chapter is from the book
This chapter is from the book
Organizing Your Content with Headings
When you browse through web pages on the Internet, you'll notice that many of them have a heading at the top that appears larger and bolder than the rest of the text. Listing 3.3 is sample code and text for a simple web page containing an example of a heading as compared to normal paragraph text. Any text between <h1> and </h1> tags will appear as a large heading. Additionally, <h2> and <h3> make progressively smaller headings, and so on as far down as <h6>.
Listing 3.3. Heading Tags
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"><head><title>My Widgets</title></head><body><h1>My Widgets</h1><p>My widgets are the best in the land. Continue reading to learn more about my widgets.</p><h2>Widget Features</h2><p>If I had any features to discuss, you can bet I'd do it here.</p><h3>Pricing</h3><p>Here, I would talk about my widget pricing.</p><h3>Comparisons</h3><p>Here, I would talk about how my widgets compare to my competitor's widgets.</p></body></html>
As you can see in Figure 3.3, the HTML that creates headings couldn't be simpler. In this example, the phrase "My Widgets" is prominently displayed using the <h1> tag. To create the biggest (level-1) heading, just put an <h1> tag at the beginning and a </h1> tag at the end of the text you wish to use as a heading. For a slightly smaller (level-2) heading—for information that is of lesser importance than the title—use the <h2> and </h2> tags around your text. For content that should appear even less prominently than a level-2 heading, use the <h3> and </h3> tags around your text. Your headings should follow a content hierarchy; use only one level-1 heading, have one (or more) level-2 headings after the level-1 heading, use level-3 headings directly after level-2 headings, and so on.
)
Figure 3.3 The use of three levels of headings shows the hierarchy of content on this sample product page.
Theoretically, you can also use <h4>, <h5>, and <h6> tags to make progressively less important headings, but these aren't used very often. Web browsers seldom show a noticeable difference between these headings and the <h3> headings anyway, and content usually isn't displayed in such a manner as to need six levels of headings in order to show the content hierarchy.
It's important to remember the difference between a title and a heading. These two words are often interchangeable in day-to-day English, but when you're talking HTML, <title> gives the entire page an identifying name that isn't displayed on the page itself; it's displayed only on the browser window's title bar. The heading tags, on the other hand, cause some text on the page to be displayed with visual emphasis. There can be only one <title> per page and it must appear within the <head> and </head> tags, whereas you can have as many <h1>, <h2>, and <h3> headings as you want, in any order that suits your fancy. However, as I mentioned before, you should use the heading tags to keep tight control over content hierarchy; do not use headings as a way to achieve a particular "look," as that's what CSS is for.
You'll learn to take complete control over the appearance of text on your web pages in Part II of this book. Short of taking exacting control of the size, family, and color of fonts, headings provide the easiest and most popular way to draw extra attention to important text.
Peeking at Other Designers' Pages
Given the visual and sometimes audio pizzazz present in many popular web pages, you probably realize that the simple pages described in this hour are only the tip of the HTML iceberg. Now that you know the basics, you might surprise yourself with how much of the rest you can pick up just by looking at other people's pages on the Internet. You can see the HTML for any page by right-clicking and selecting View Source in any web browser.
Don't worry if you aren't yet able to decipher what some HTML tags do or exactly how to use them yourself. You'll find out about all those things in the next few hours. However, sneaking a preview now will show you the tags that you do know in action and give you a taste of what you'll soon be able to do with your web pages.