● Styles As you will learn in Part 2 of this book, you can specify the font families and sizes to use throughout your entire Web site . For example, you can select a font family that will be suggested to the browser whenever a certain tag is applied .
● The Web browser in use Each Web browser has defaults for the standard HTML tags . For example, in Internet Explorer (and most other browsers), <h1> is left-aligned, 18-point Times New Roman . Most browsers use the same defaults for the very basic tags, but non-standard browsers, such as those on phones, often display text differently .
● Individual user customization A user can customize his Web browser to suit his preferences . Later in this chapter, you’ll get to play with these settings in Internet Explorer so you’ll know what your potential audience might be doing .
Keep in mind as you practice using tags that their formatting is not fixed . The results you see when previewing the exercise pages in Internet Explorer represent the default set-tings for your version of Internet Explorer (or whatever browser you are using to preview them); the style is not intrinsic to those tags themselves . That will become important in Part 2 of the book, when you learn how to define more specific formatting for tags . See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points section at the end of this chapter.
Practice Files Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Using the Practice Files” at the beginning of this book for more information.
Creating Headings
Headings in Web pages function the same way as they do in printed documents—they separate text into sections . The HTML standard defines six levels of headings, <h1>
through <h6>, each one progressively smaller in font size .
Creating Headings 27
As noted earlier, there are no specific sizes or fonts assigned to the heading tags—their appearance can vary depending on the browser and its settings . But the heading levels connote relative sizes; the higher the heading number, the smaller the size in which it will render on the screen . In Internet Explorer 9, for example, using the default settings will make these six heading levels look as shown in the following graphic .
Perhaps you noticed that headings 5 and 6 are actually smaller than body text . Keep in mind, though, that these are just the default settings; you can redefine these headings to appear any way you want .
Many screen reader programs use the heading codes <h1> through <h6> to help visually-impaired users navigate a document, and some page structures rely on headings for outlining, too . (HTML5 has a new way of outlining documents, but that’s beyond the scope of this book .) In some cases, though, you might have a stack of headings that col-lectively should take up only one spot in an outline, like this:
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
HTML5 introduces a new tag to deal with this situation, called <hgroup> . When you enclose a stack of headings within <hgroup>, only the first heading in the stack will appear in an outline; the others will be ignored by screen readers and other outlining tools .
<hgroup>
<h1>Dog Agility Club of Indiana</h1>
<h2>Training for canine athletes and their humans</h2>
</hgroup>
Browsers that do not support this tag simply ignore it, so there is no harm in using it when appropriate .
In this exercise, you will create some headings for the opening page of The Garden Com-pany’s Web site .
SET UP In both Internet Explorer and Notepad, open the index.htm file that you created in Chapter 2, or use the index.htm file in the practice file folder for this topic.
This practice file is located in the Documents\Microsoft Press\HTML5 SBS\03Format\
CreatingHeadings folder.
1.
Immediately below the <body> tag, type the following:<hgroup>
<h1>The Garden Company</h1>
<h5>Helping you help your gardens grow since 1975</h5>
</hgroup>
Note Some coding purists will tell you that you should use an <h2> heading instead of
<h5> for the subtitle above, and then apply a style to make the text look the way you want, but because it is a few chapters yet until you will learn about styles, I’m taking a shortcut. For now, the default appearance of the <h5> heading is much closer to the desired look we want for this exercise.
2.
Immediately above the line containing the text Our Main Store is Located At, type the following:<h2>Come See Our Store</h2>