Why Use Heading Tags Rather than DIVs and Styling

Why Use Heading Tags Rather than DIVs and Styling

1. Search engines like heading tags.
   This is the best reason to use headings, and use them in the correct order (ie. h1, then h2, then h3, etc.). Search engines give highest weighting to text included inside heading tags, because there is a semantic value to that text. In other words, by labeling your page title H1, you tell the search engine spider that that is the #1 focus of the page. H2 headings have #2 emphasis, and so on.
2. You don't have to remember what classes you used to define your headlines.
   When you know that all your Web pages are going to have an H1 that is bold, 2em, and yellow, then you can define that once in your style sheet and be done. 6 months later, when you're adding another page, you just add an H1 tag to the top of your page, you don't have to go back to other pages to find out what style ID or class you used to define the main headline and sub-heads.
3. They provide a strong page outline.
   Outlines make text easier to read. That's why most U.S. schools taught students to write an outline before they write the paper. When you use heading tags in an outline format, your text has a clear structure that becomes apparent very quickly. Plus, there are tools that can review the page outline to provide a synopsis, and these rely on heading tags for the outline structure.
4. Your page will make sense even with the styles turned off.
   Not everyone can view or use style sheets (and this comes back to #1 - search engines view the content (text) of your page, not the style sheets). If you use heading tags, you're making your pages more accessible because the headlines provide information that a DIV tag would not.

Style the Text and Font of Your Headlines

The easiest way to move away from the "big, bold, and ugly" problem of heading tags is to style the text the way that you want them to look. In fact, when I'm working on a new Web site, I typically write the paragraph, h1, h2, and h3 styles first thing. I usually stick with just font family and size/weight. For example, this might be a preliminary style sheet for a new site:

body, html { margin: 0; padding: 0; }
p { font: 1em Arial, Geneva, Helvetica, sans-serif; }
h1 { font: bold 2em "Times New Roman", Times, serif; }
h2 { font: bold 1.5em "Times New Roman", Times, serif; }
h3 { font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }

You can modify the fonts of your headline or change the text style or even the text color. All of these will turn your ugly headline into something more vibrant and in-keeping with your design.

h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
}