Headings serve as structure to the content. In HTML, we have up to 6 headings: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. In addition, headings describe and/or categorize the succeeding content. They should be used when introducing a new section of content.
Manual of style <h3>
Much of these rules are adapted from the Wikipedia Manual of Style
Headings should be recognizable, natural, sufficiently precise, concise and consistent with other headings on the page. In addition, keep the following in mind:
- Headings use "sentence case" not "title case"; that is, the initial letter of a title is capitalized (except in rare cases, such as eBay). Otherwise, capital letters are used only where they would be used in a normal sentence.
- Do not use A, An, or The as the first word, unless by convention it is an inseparable part of a name (The Who).
- The final character should not be a punctuation mark unless it is part of a name or an abbreviation, or a closing round bracket or quotation mark is required.
- Headings should not normally contain links, especially where only part of a heading is linked.
- Heading should not be stacked. Textual content, such as paragraphs or lists of content related to the preceding heading should be displayed prior to the next heading.
Use in the UNL templates <h2>
In the UNL templates, the <h1> is used for the current page title.
Therefore, in many cases the first heading needed inside the #maincontent area of page is the <h2> element.
Heading examples <h1>
This is heading 1 <h1>
This is heading 2 <h2>
This is heading 3 <h3>
This is heading 4 <h4>
This is heading 5 <h5>
This is heading 6 <h6>
Additional UNL styles <h3>
In some cases, a new section with only tangential relation to the primary content of the page is needed. In this case, we have a section header.
Main section header <h4>
To be used as the primary hierarchical heading of the tangential related section. Only one .sec_main is permitted per section. It has been designed to carry over some of the styles from the page title.
Section heading example <h1 class="sec_header">
Examples of headings in various layouts <h2 class="sec_header">
Notice how we used .sec_header here. The following is content tangentially related the preceding content. A good way to think about this would be by asking "Can this content stand on its own?" In this case, yes. A page with just examples could be created and is not necessarily required here.
This is heading 4 <h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec sapien in nisi laoreet scelerisque. Cras a arcu non odio luctus viverra vitae ut diam. Proin pharetra ornare mauris, et condimentum orci facilisis ut. Ut felis dui, tristique et pretium et, mollis placerat turpis. Praesent eu pulvinar nulla. Nullam vitae imperdiet felis. Donec eget leo lectus. Aenean lobortis lacinia tincidunt. Phasellus ornare consequat molestie.
This is heading 5 <h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec sapien in nisi laoreet scelerisque. Cras a arcu non odio luctus viverra vitae ut diam. Proin pharetra ornare mauris, et condimentum orci facilisis ut. Ut felis dui, tristique et pretium et, mollis placerat turpis. Praesent eu pulvinar nulla. Nullam vitae imperdiet felis. Donec eget leo lectus. Aenean lobortis lacinia tincidunt. Phasellus ornare consequat molestie.
This is heading 6 <h6>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec sapien in nisi laoreet scelerisque. Cras a arcu non odio luctus viverra vitae ut diam. Proin pharetra ornare mauris, et condimentum orci facilisis ut. Ut felis dui, tristique et pretium et, mollis placerat turpis. Praesent eu pulvinar nulla. Nullam vitae imperdiet felis. Donec eget leo lectus. Aenean lobortis lacinia tincidunt. Phasellus ornare consequat molestie.
This is heading 1 <h1>
This is heading 2 <h2>
This is heading 3 <h3>
This is heading 4 <h4>
This is heading 5 <h5>
This is heading 6 <h6>
This is heading 1 <h1>
This is heading 2 <h2>
This is heading 3 <h3>
This is heading 4 <h4>
This is heading 5 <h5>
This is heading 6 <h6>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec sapien in nisi laoreet scelerisque. Cras a arcu non odio luctus viverra vitae ut diam. Proin pharetra ornare mauris, et condimentum orci facilisis ut. Ut felis dui, tristique et pretium et, mollis placerat turpis. Praesent eu pulvinar nulla. Nullam vitae imperdiet felis. Donec eget leo lectus. Aenean lobortis lacinia tincidunt. Phasellus ornare consequat molestie.