How to Write and Use Headlines



			Dos and Don'ts


			Do: Make sure every page has an H1 headline (large, blue serif head) that says something definitive and informative of the page's contents Don't: Repeat the branding text in the banner Do: Use headlines to break up your body text and structure your page Don't: Capitalize every word of your main headline Caution: "Welcome to..." and "Our mission is..." are weak headline approaches

Headline writing | Capitalization style | Structure your page | Headline gallery

Every page's main text column begins with an <H1> headline, unique to the page, that expresses the main thought or topic. Headlines in academic publications are often overloaded. For the Web, two lines are better than three and one line is best of all. A clever turn of phrase grabs reader attention.

Headline Writing

The headline concept parallels the browser title of the page. Good headlines are short and punchy, quickly conveying the main concept of the page, or if the Home page, of the site or group. Main headlines should be active and promotional. They should not duplicate the header branding text, or use "Welcome to...." or "Our mission is...."

Use Capitals for the First Letter of Each Word in a Headline

Small connective words like "the," "a," "an," "for" and so on can remain all lower-case. Headlines do not have to be complete sentences, and should not end with a period.

Good examples:

This is a Properly Capitalized Headline

Column labels are Always all-caps

Bad examples:

Welcome to the ____ is a Weak Headline

BIG, ALL-CAPS HEADLINES SEEM TO SHOUT

THIS ALL CAPS SUBHEAD SAYS "I'M IMPORTANT, SO USE ME SPARINGLY."

Structure Your Page

By using the appropriate descending headline settings, you will indicate not only content sections, but the relative importance of sections to users and to search engines and accessibility tools for the disabled.

Long pages should be broken into "chapters." Only the top headline should use Heading 1<H1>. The next subhead should be an <H2> or <H3>. Subsections should have <H3>, <H4> or <H5> headlines, and so on.

Imagine someone reading the page. Headlines sound like the loud, firm declaration that begins the lecture. Body text sounds like the detailed point by point explanation. Just as variation of tone and emphasis helps keep a lecture from getting boring, so does modest variation of heads with body blocks, serif with sans-serif keep written text lively and digestible.

Example pages are available:

Headline Gallery: HTML <H> styles

Standard HTML headline formatting using <H1> through <H6> tagsets has certain advantages over applied CSS classes. Because they are machine-readable and standard, they allow search text browsers for the disabled, search engines and other machine processes to determine the hierarchy of a page's content.

To use HTML headline styles, simply apply the appropriate "Headline" format to the selected text. These styles will apply to then entire block of text.

<H1> Headlines 24px Times New Roman

<H2> Headlines 20px Times New Roman

<H3> Headlines 20px Times New Roman

<H4> Headlines 16px Times New Roman

<H5> Headlines 16px Times New Roman

<H6> Headlines 14px Times New Roman

Headline Gallery: Art Headlines

These special classes be used in-line without applying an HTML <H> format. They can be applied to an entire block of text, or to a range of text within a block.

Highlight box and highlight item labels

These two are designed specifically for left navigation boxes and right highlight boxes, but they can also be used (sparingly) where appropriate in center body text.

text_leadinheadline - Verdana 12px bold, all-caps, dark blue. used for column labels and highlight item headlines.

text_leadinheadline - Verdana 12px bold, all-caps, olive blue. used for column labels and highlight item headlines.

Bold lead-in headline for descriptive paragraphs

text_leadinheadline: This is an example of a paragraph that begins with a bold headline-like applied style. It's good to use when you have a number of paragraphs, typically summaries that link to details on another page, such as on your Education summary page. More

HTML Headline Simulants

The following styles are handy for highlight box items. They can also be used to simulate the standard HTML format headlines and are handy when you want to combine different sized lines of text without the large breaks inserted after standard HTML headlines.

text_leadinheadline - This is Sample Text
Simulant of the standard <H1> headline

text_leadinheadline - This is Sample Text
Simulant of the standard <H2> headline

text_leadinheadline - This is Sample Text
Simulant of the standard <H3> headline

text_leadinheadline - This is Sample Text
Simulant of the standard <H4> headline

text_leadinheadline - This is Sample Text
Simulant of the standard <H5> headline

text_leadinheadline - This is Sample Text
Simulant of the standard <H6> headline

Art Headlines

These styles are for creative use

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

text_leadinheadline - This is Sample Text

Previous | Home | Next