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 heading tag a little more interesting by adding color and text and box shadow.

Note: These were fun back when the internet wasn't so serious but not practical for RWD. You can try them to learn a little about text and box shadow.

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 : 25%; 
padding: 1% 1%;
display:block;
margin: 0 auto;
text-shadow: 2px 2px 4px black;
box-shadow: 0px 8px 16px #202020
}

You can even add borders and round corners:

Heading Text

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

CSS:

h1.redcorner {
font-size:24px;
 text-align:center; 
width: 25%; 
display:block; 
margin:0 auto;
padding: 1% 1%; 
color: #ffffff; 
background: #ff0000; 
border: solid #000000 2px;
border-radius: 10px 10px 0 0;
text-shadow: 2px 2px 4px #000000;
box-shadow: 5px 5px 10px #202020
}

For liquid or RWD headings use percentages for width settings.