Style Demo: Headings

Headings are used to divide text or different sections of an article. There are six different heading levels. The

tag is the most important while the

is slightly less important, on down to
. each heading level has a specific purpose that will be explained after each of the following examples.

Heading tags are a 'block-level' element, meaning they should be used on their own. They cannot be inside of a paragraph tag!

This is an example of an h1


tag is used for the primary title of any given web page. This is usually the site section, or the title of an article if it is a detail page. Editors should rarely have to use an

, as it should be called by the template automatically.

This is an example of an h2


tag is designated for sub-heads inside of content items. These should be used the same way they are in print. These will be the most common tags (besides paragraph tags) that an editor will have to use in an article or news item. These tags should be used by themselves and their appearance is dictated by the site styles. This means unless you have a legal or editorial obligation to make these headings either bold, italic, or both, Do Not add or tags inside of

tags. Also, it is an old bad habit that we used to 'simulate' sub-heads inside of content items by using

Subhead goes here

or sometimes replacing that closing

tag with a
. This is wrong and should be avoided at all cost. The appropriate use is:

Subhead Goes here

This is an example of an h3


tag is designated for sub-sub-heads. These will probably not be needed very often, but sometimes they are used in the original printed version of the article.

tags would be the responsibility of the Editors to add into the source of the article. These should also be used in the case of references at the end of an article. Rather than giving the word "Referecnes" (which starts the list of references) as much prominance as an

, use an

tag to encapsulate the section title "References."

This is an example of an h4


tags are used for titles that add explanation to sections, but are not always necessary to read in order to understand the rest of the content.

tags will, by default, be in all uppercase, no matter what the original text is. This is intentional, so if you don't want your text in all caps, you probably shouln't be trying to use an

. These are also used on list pages to show the timestamp of each content item (except for Skin Inc.).

These will probably be used more by Marketing than Editors, but if you are thinking of using an

for something, contact your Web Designer first.

This is an example of an h5


tag is designated for Author Names. The tag should automatically be handled by a template, but Marketing pages could utilize this for the author of a book they might be promoting, for example.

This is an example of an h6


tag is used on detail pages to identify what issue an article came from, or the 'Posted:' date of a news item. Again, these will be handled by the templates