The Heading Tag

The release of HTML5 adds a new <header> tag which is used to structure the content of web pages.

The old header tag now called
<h1>The Heading Tag</h1> or referenced by the W3C as the h1-h6 element plays a large part in the new direction of structuring content.

In many instances it can be used as a ranking tool for determining the importance of a block of data, a section or an article.

There are six default sizes or ranks.
(h1-h6 )
( h1 largest to smallest h6) and
(h1 highest in rank to lowest rank h6.)

<h1></h1> through <h6></h6>

Heading tags (h1-h6 elements) should be used in their respective order of default size or rank.

That means following an h1 tag with an h2 for proper page structure.

Don't put an h1 and an h4 on the same page with nothing in between.

<h1>Ice Creams Flavors</h1>
<p>Brief introduction</p>
<h2>Chocolate</h2>
<p>Paragraph about chocolate flavor.</p>
<h2>Vanilla</h2>
<p>Paragraph about vanilla</p>

Font family, size, alignment, fore and background color can all be set using Style Sheets.

Note: for W3C compliance use pixels (px) when setting font-size.

Examples:

h1 {
font-family: Arial Black, serif ;
font-size : 18px;
font-weight : normal;
text-align :center
}

h2 {
font-family: Times New Roman, serif ;
font-size : 16px;
font-weight : normal;
color :#FF0000;
background :#FFFF00
}

Background Color

You can make a header tag a little more interesting by adding color and text and box shadow.

You won't see text shadow if you are using an IE browser until its next update. My advice, get a decent browser. They're all free.

Adding Background Color

The code:
<h1 class='blueraised">Adding Background Color</h1>

CSS:

h1.blueraised {
font-size : 20px; 
text-align : center; 
color :#efefef;
background :#7696CB; 
width : 300px; 
padding: 10px 10px;
text-shadow: 2px 2px 4px black;
box-shadow: 4px 4px 8px #202020
}

You can even add borders and round corners:

Heading Text

The code:
<h1 class="redcorner">Heading Text</h1>

CSS:

h1.redcorner {
font-size:20px;
 text-align:center; 
width: 250px; 
display:block; 
padding:5px 5px; 
color: #ffff00; 
background: #ff0000; 
border: solid #000000 2px;
border-radius: 10px 10px 0 0;
text-shadow: 2px 2px 4px black;
box-shadow: 5px 5px 10px #202020
)

To make the header appear the same in all browser types,be sure to include the width setting. For liquid headers use percentages for width settings.

Semantics

Straight from the W3C

"As far as their respective document outlines (their heading and section structures) are concerned, these two snippets are semantically equivalent:"

<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body> <body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>

"Authors might prefer the former style for its terseness, or the latter style for its convenience in the face of heavy editing; which is best is purely an issue of preferred authoring style."