Semantic (X)HTML Markup: Headings and Paragraphs

Using headings on your (X)HTML pages is a great way to easily improve their accessibility and search engine rankings. However, the way headings appear in your browser often leaves much to be desired: large gaps above and below each heading, and huge font sizes. To avoid these problems, it may seem easier just to leave the heading tags out, instead using font and bold tags to simulate the look of headings. Many web developers do just this, thereby losing out on the great benefits of semantic markup.

Luckily, its easy to change the way your headings display using CSS, so you can use semantic markup and still achieve the look you want. The second article in the Semantic (X)HTML Markup series describes how to use headings and paragraphs appropriately to create a hierarchy of page content and how to style them visually.

The Semantic (X)HTML Markup Series:
Semantic (X)HTML Markup: An Introduction
Semantic (X)HTML Markup: Headings and Paragraphs
Semantic (X)HTML Markup: Creating Emphasis
Semantic (X)HTML Markup: Blockquote, Q, and Cite
Semantic (X)HTML Markup: Structuring Lists
Semantic (X)HTML Markup: Styling Lists
Semantic (X)HTML Markup: Using Tables Appropriately
Semantic (X)HTML Markup: Styling Tables
Semantic (X)HTML Markup: Phrase Elements
Semantic (X)HTML Markup: Other Elements