Headings serve to structure the content of a page. The higher the heading is in the structural hierarchy (e.g. H1), the more important it is, and the more weight is given to it by search engines such as Google. Generally speaking, not too many hierarchical levels should be used, as this has a negative impact on the clarity of the structure. Heading levels H1 through H4 are therefore clearly differentiated in their formatting (while levels H5 and H6 are merely defined pro forma).
To conform accessibiliity requirement titles have to respect a sequence from 1 to 6
Headings can also have links and are then formatted in blue.
A lead can be placed at the beginning of a longish text summarizing the most important aspects of the text. A lead of this sort is formatted bold.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.
Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.</p>
<p>Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum
mollis mauris enim. Morbi euismod magna ac lorem.</p>
<p>Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui.</p>
The font size, line length, and line spacing for the copy body have been selected to provide an optimum reading experience. Quotations are shown in italics. Links within the running text are underlined, but should be used sparingly. It is better to place links at the end of a paragraph.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, architecto fugit eveniet.
<p>
Lorem ipsum dolor sit amet, <cite>consectetur adipisicing elit</cite>. Quae, reprehenderit, quas, facere, placeat eveniet quia consequuntur est sint necessitatibus at perferendis modi. Officiis, mollitia deleniti nostrum. Temporibus, <a href="#">architecto fugit eveniet</a>.
</p>
add title="External link" on external link for screen reader use
Links are formatted blue by default and are not underlined. When a mouseover is used, they become red.
There are two exceptions to this rule:
If there is a link in the running text, the linked text is underlined. Links in a navigation element (e.g. in the global navigation) are gray, and not blue. There are separate descriptions of how these special links are presented and how they behave at the appropriate places in these Web Guidelines.
You can use the .icon classes to add some icons after or before the link. Use .icon--external if the link is external.
The top link is the counterpart to the anchor link. It takes the user back to the beginning of the page from any position in the page currently in use.
The link at the end of the page is a special top link. Each page (with the exception of the home page and the level 1 pages) has a page-end link at the bottom of the page. It contains a link to the top of the page currently in use, together with the date of the last update of the content on this page.
