Getting Started with HTML5 - HTML, CSS, and Dynamic HTML - page 28

It's important not to treat markup tags as simply a way of formatting the Web page.
The h1 through h6 elements are used to identify headings, but the exact appearance of
these headings depends on the browser and the device being used. While most browsers
display an h1 heading in a larger font than an h2 heading, remember that the headings
might not even be displayed at all. A screen reader, for example, doesn't display text,
but rather conveys the presence of an h1 heading with increased volume or with special
emphasis preceded by an extended pause.
Now that you've seen how to mark page headings, you can add them to Dave's Web
page. The fi rst heading Dave wants to add is an h1 heading containing the company's
name. He also wants you to insert h2 headings in several places—as titles for the three
articles on the page, as a title for the sidebar containing the customer comments, and as
a subheading to the main heading on the page.

To add headings to Dave's document:

◗

1. Return to the jprop.htm file in your text editor.
Trouble? If you are using the Macintosh TextEdit program, you must select the
Ignore rich text commands check box when reopening the file.

◗

2. Within the header element, insert the following tags:

<h1>The J-Prop Shop</h1>
<h2>Quality Juggling and Circus Props</h2>

◗

3. Within the first article element, insert the following h2 heading:

<h2>Welcome</h2>

◗

4. Within the second article element, insert

<h2>Specials This Month</h2>

◗

5. Within the third and final article element, insert

<h2>Quality Tested</h2>

◗

6. Finally, within the aside element, insert

<h2>Customer Comments</h2>

Figure 1-15 highlights the revised code in the file.