The Heading Tag
Not to be confused with the release of HTML5 and the new semantic <header> tag which is used to structure the content of web pages.
The old header tag now called the Heading Tag.
<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(one to a page) with an h2 for proper page structure.
Don't put an h1 and an h4 on the same page with nothing in between.
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.
<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>
Examples:
h1 {
font-family: Arial Black, serif ;
font-size : 1.5rem;
font-weight : normal;
text-align :center
}
h2 {
font-family: Times New Roman, serif ;
font-size : 1rem;
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 Responsive Web Design.
You can try them to learn a little about text and box shadow.
You can add borders and round corners. Experiment with some hover effects and the page comes alive.
For Responsive Design headings use relative values(percentages) for width settings.
Adding Background Color
The HTML
<h2 class="blueraised">Adding Background Color</h2>
CSS:
h2.blueraised {
font-size : 2rem;
text-align : center;
color :#fff;
background :dodgerblue;
max-width : 75%;
padding: 1dvw;
display:block;
margin: 0 auto;
text-shadow: 2px 2px 4px #000;
box-shadow: 0px 8px 1rem #222
}
h2.blueraised:hover {
box-shadow: none}
Heading Text
HTML
<h2 class="redcorner">Heading Text</h2>
CSS
h2.redcorner {
font-size:2rem;
text-align:center;
max-width: 75%;
display:block;
margin:0 auto;
padding: 1dvw;
color: #fff;
background: #ff0000;
border: solid #000 2px;
border-radius: 10px 10px 0 0;
text-shadow: 2px 2px 4px #000;
box-shadow: 5px 5px 10px #222
}
h2.redcorner:hover {
box-shadow: none}