HTML Headings

Overview:

HTML headings are used primarily to outline the contents and layout of a web page. It guides a reader through the page and enhances readability. There are six heading tags labeled from 1 to 6 for HTML 4.0. <h1> being the largest heading and <h6> being the smallest heading. All headings appear bold faced.

Attributes:

• ALIGN
  • Aligns a heading on a line according to the following attribute values.
    
  • LEFT [default] -- Heading is anchored toward the left margin
  • CENTER -- Heading is anchored toward the middle of the line
  • RIGHT -- Heading is anchored toward the right margin
  • JUSTIFY -- Heading is anchored toward both margins
• LANG
  • Helps display certain aspects of the specified language.
    • Here are some possible values (languages): en = English, jp = Japanese, fr = French, zh = Chinese, es = Spanish, ru = Russian, de = German. A complete listing can be found here.
• DIR
  • Specifies the direction of neutral text. Note: This does not have any affect on standard english words. For example, <h1 dir="rtl">Hello</h1> does not spell Hello backwards.
    • LTR -- Left to right
    • RTL -- Right to left
• TITLE
  • Displays a pop up window with the specified value when the mouse cursor is placed over the text.
  • Example:

    Put your cursor here!

• STYLE
  • Specifies the style information (e.g. Cascading Style Sheet) to give to the heading.
  • Example:

  <h4 style="color: blue">CSS is cool</h4>
  

  CSS is cool

• ID/CLASS
  • Name associated with a tag. Used to uniquely identify elements.

Design Rules:

In general, headings start on a new line because it is easier to notice and flows more naturally than a heading surrounded by normal paragraph font. If you try to insert a heading within a paragraph, the heading will appear on a new line and the remaining text of the paragraph will follow on the next line. Here's an example.

Also, its a good rule of thumb use only one <h1> heading per page and not to skip headings. For example, a typical page would start with the main heading or title in <h1> format and then the next important item on the page would be <h2> and not <h3>. If the headings alternate between <h2> and <h3> it is still considered acceptable because it doesn't skip a level. Remember that headings provide an organized structure so make sure to keep headings short and concise, yet as descriptive as possible. After all, some search engines may use headings near the top of your page for indexing. Obviously, the heading should relate to the section of text that immediately follows it.

Try not to overuse headings and use caution when using <h6> since the heading may appear very tiny on browsers that have a high resolution setting.

Examples:

Here's the HTML code that generated example 1.0:

<h1 align="center">This is heading 1</h1>
<h2 align="center">This is heading 2</h2>
<h3 align="center">This is heading 3</h3>
<h4 align="center">This is heading 4</h4>
<h5 align="center">This is heading 5</h5>
<h6 align="center">This is heading 6</h6>

Here's the HTML code that generated example 1.1:

<h1>This heading is left justified</h1>
<h1 align="center">This heading is centered</h1>
<h1 align="right">This heading is right justified</h1>

Notice that the default alignment is left justified. Therefore, it is superfluous to type in align="left".

ICS 415 |Topic Notes | Assignments | Feedback | Links

Last Updated: January 28, 2002