Headings(Not to be confused with <HEAD>)In this chapter, we're going to jump right in and learn some formatting tags so we can start making some pages that are actually useful. The first tags we'll learn are the heading (or headline) tags. These tags are used when you want to specify that a piece of text is a heading or headline. (They have no relation to the <HEAD> tag we learned in the last chapter. Try not to confuse them.) What is a heading, exactly?Good question. Think about the headlines you see on a newspaper, or the chapter headings in a book. What makes them headings or headlines? What is it about them that makes you know that they are headings? It's not their size, or their color, or their typeface, though that may seem to be the obvious answer here. What makes a heading a heading is this: A heading is some text that describes, briefly, the text that follows it. That's it. When you use HTML to define something as a heading, all you are saying is "This is some text that describes the text that follows it on the page." You aren't saying "this text is big and black" or "this text is 48 point type" or "this text is centered." You are describing what the text's logical structural function is -- to be a heading. You are not describing the text's physical appearance in any way. This touches on something we'll talk about in-depth in the next chapter, the difference between logical and physical tags. Until then, just remember that heading tags don't describe physical appearance. Having said that, in most browsers headings are displayed on bold text. (Not in every browser, though.) There is an automatic line break before and after the heading, so you can't have a heading on a line with any other item. Here's an example showing the 6 different heading levels: This is the first level, <H1>This is the second level, <H2>This is the third level, <H3>This is the fourth level, <H4>This is the fifth level, <H5>This is the sixth level, <H6>In basic HTML, you are always supposed to use the headings in numerical order -- that is, you shouldn't follow an H1 with an H3, or start at the beginning of a page with an H2. This isn't really followed very strictly by most people, but be aware that it is technically correct. How to use the H tagsThe H tags are container tags, so they need to be in two parts. Here's an example:
All of the text contained by the H1 tags in the above example will display as an H1 heading on the web page. Try it and see. What headings aren'tHeadings aren't a magical way to specify the size of your type. As I mentioned above, when you use these tags you are specifying only that "this piece of text is a heading." It's up to the browser software to display it in any way it sees fit. Some browsers display H1 headings in all-caps, centered, but not boldface and not large type at all. A text reader for the blind might read an H1 heading by using a different tone of voice to make it clear it's a heading. If you try using H tags to make your text different sizes, you'll find that some browsers will make your pages appear awfully strange. So don't succumb to the temptation to use H tags to specify font sizes. We'll learn better ways to do that, soon. In the next section, we'll learn how to make paragraphs in HTML. |