Page 1 of 3 The first article in the Semantic (X)HTML markup series, Semantic (X)HTML Markup: An Introduction, described what semantic markup means and why it's important. You'll notice that many of the examples offered in that article dealt with heading tags (h1, h2, h3, h4, h5, and h6). This was not an accident. Heading tags are among the most important and powerful semantic markers we have in (X)HTML. However, they are woefully underused.
This article will discuss how to style headings and paragraphs using CSS. If you do not know how to use CSS, read CSS: An Introduction by Adrian Senior to learn what CSS is, how to write CSS rules, and how to attach style sheets to your pages. You may also want to review Creating An External Style Sheet In Dreamweaver MX and Using the CSS Styles Panel.
The W3C provides the basic definition of a heading: "A heading element briefly describes the topic of the section it introduces." Headings provide the hierarchical structure of your document's content. HTML and XHTML contain six levels of headings with h1 as the most important and h6 as the least. To indicate this visually, browsers put h1 in the largest font and decrease the font size gradually for each level. Browsers also display headings in bold by default.
Many web designers do not use heading tags because they are unhappy with the default look of text marked up this way. The text may be too large for their taste, and by default browsers add a large empty space above and below headers, while many would prefer there be no space below the header. To get around this, many designers use markup like this:
<p><font size="5"><b>Great widgets
sold here</b></font><br>
First paragraph of description of my widgets.</p>
Listing 1: Non-semantic markup.
This produces text that gives a good visual indication of a heading and related text:
Image 1: Browser rendering of the non-semantic markup
However, not all user agents are visual. Without semantic markup, this indication of heading text is only clear to sighted users. Other user agents may not know that you are trying to create a heading. These include:
Visual users rely on their eyes to quickly scan a document to determine what information is on the page and what they want to read. Headings that stand out help in this scanning process by breaking the text into smaller, labeled pieces. Non-visual users do not have this ability, but screen readers can help their users find and jump to the information they need more quickly by reading out a list of headings from the document. This gives the users an idea of the main sections of the page and allows them to go directly to the section they need. Even some graphical browsers, such as Opera, give users the ability to jump from heading to heading on a page using keyboard shortcuts.
If you do not mark up your headings with actual heading tags, the screen reader, refreshable Braille display, or other user agent, cannot know which text is supposed to be heading text and thus cannot help its user navigate through it. Instead, the user has to sit through all the text being read, hoping that it will get to what he or she was interested in at some point.
Google has been called "the largest blind user on the Internet." Search engine bots that crawl and index your web pages do not parse CSS, nor do they care much about visual presentation. They just want to know what your page is about. When you place your heading text in heading tags instead of p tags, most search engines assume those headings are summarizing or indicating the topic of major portions of your document (as they should). Thus, the words in heading tags are seen as more relevant and generally carry more weight than text elsewhere on the page. Using descriptive, keyword-rich headings, marked up in actual heading tags, is a great way to boost your search engine rankings.
Our example markup in Listing 1 contains the name of our product, "widget," an important keyword in our page. However, this keyword is not packing all the punch it could, since it is buried inside a p tag instead of a heading tag. If it had been placed inside a heading tag, most search engines would assign it greater importance, and users would be more likely to find our page when they searched for "widget."
Keywords
semantic, markup, tags, meaning, content, HTML, XHTML, CSS, style sheets, accessibility, screen readers, usability, search engine optimization, SEO, headings, paragraphs, br, break, margin, font
