Headings & Hierarchy
Html headings define the structure of the web page. It is important that you use them correctly. The tags are from h1 to h6: <h1>Title</h1> - <h6>subtitle</h6>. The importance denoted by each number is in descending order with <h1> being the most important.
Headings
You should use h1 for the page title only (which means only once per page). You then use the other headings in order of importance. At the moment we are only using h1 - h3 for this site but we rarely use h3.
Visual Hierarchy
Visual hierarchy provides visual clues in which elements are
emphasized in descending order of importance. It is important that there is a clear visual hierarchy through typography. This can be created by size, weight, color and style. The most obvious is size this should start with your logo and descend in size through to your lowest heading. The copy is normally smaller that your lowest heading.
- The logo must stand out the most.
- Next is the page title
- Then the sub headings etc.
- Links within copy are normally another color and should always be underlined. Do not underline any text unless it is a link.
Styling Headings
By default the headings are bold and their sizes are based on the size of the font that you specified for the body.You can specify your heading size in your CSS and also change the font weight. It is recommended that you give styles to each of your headings.
h1{
font-size: 21px;
font-weight: normal;
}
Headings are also at the block level and there is quite a large gap between the heading and the first sentence. If you would prefer not to have the gap you can create a minus margin of about -3px in your CSS
h1{
margin-bottom: -3px:
}
or you can get rid of the block level by including:
h1{
display: inline:
}
If you want to include an image instead of using text for your page title you need to place the image within the tags:
<h1> tags: <h1><img src="roses.png" alt="a rose garden" /></h1>
The Importance of Headings for 508
This is a must see video for all web designers
It is important that you do not use headings for any text other than titles and sub-titles. The main reason is accessibility (see section 508 .) This video demonstrates the importance of the correct use of headings for the blind or visually impaired user. This is a must see video for all web designers.
