HTML Heading Elements - <h1> to <h6>
The elements <h1> <h2> <h3> <h4> <h5> and <h6> define a heading on a page.
<h1> is the largest heading decreasing gradually in size down to <h6>
the smallest.
Heading elements should be used only for headings and not to add emphasis as the <em> element is better suited to this purpose.
The relative sizes of the headings are shown here:
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>
This is an h1 heading
This is an h2 heading
This is an h3 heading
This is an h4 heading
This is an h5 heading
This is an h6 heading
As you can see from the above use of the heading elements displays bold text but the smaller heading elements can display text which is smaller than the default font size, which defeats the point of having headings.
Styling heading elements
Heading elements can be styled using CSS font properties to override the default sizes as shown in the following examples:
The CSS
h1.small{ font-size: 1em; }
The HTML
<h1 class="small">This is a small h1 heading. </h1>
Gives you:
This is a small h1 heading.
The CSS
h3.large{ font-size: 2em;}
The HTML
<h3 class="large">This is a large h3 heading.</h3>
Displays:
This is a large h3 heading.
For more in-depth information please see the CSS font property in the CSS reference list.
<h1> to <h6> Attributes
- CORE AND LANGUAGE ATTRIBUTES - class, id, title, style, dir, lang
- MOUSE AND KEYBOARD EVENT ATTRIBUTES - onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress