Heading Tags - <h1> to <h6> tags

The <h1> to <h6> tags define headers. <h1> defines the largest header. <h6> defines the smallest header. Do you know what these tags are used for? Many of the pages I view are using these tags to style your content. That is NOT the purpose of the heading tag. The heading tag provides structure for your document,  much like an outline displays the structure of a term paper or technical document. The h1 tag defines you page title, what your page is actually about. There should be only ONE h1 tag on each page. The default size of the <h1> tag is BIG.


The following article is reprinted with the permission of James Huggins and Cricket Walker.

HEADING TAG STRUCTURE by James Huggins

Some additional thoughts on headers.

Remember that H1, H2, H3, etc is NOT ABOUT FORMATTING.

Rather, it IS ABOUT STRUCTURE.

H1 is the primary heading on a page.

H2 are the secondary headings on a page.

H3 are the tertiary headings on a page.

Headings are typically short, stand-alone paragraphs which introduce a section of the document.

Yes, you can specify how to format the headings for consistency and that is cool. But the primary purpose of H1, H2, H3, etc. is to specify the STRUCTURE of the document.

Headings, levels 1-6, were constructed for the original web. The original web was built to share information and HTML was originally constructed to reflect CONTENT STRUCTURE.

The original web was viewable on dumb IBM 3270 terminals, TI Silent 700 Printers and a host of other devices we would never consider using today. The purpose of headings is to identify the information content structure.

h1 is the master heading of the document h2's are the second level h3's are the third level

It is like an outline.

Consider, for example, this outline

The Effect of Women on Men <== h1 (document title)

  1. Why This Whole Women and Men Thing Matters <== h2
    1. Economic Impacts <== h3
    2. Sociological Impacts <== h3
    3. Physiological Impacts <== h3
  2. The History of Women and Men <== h2
    1. Pre-Columbian  <== h3
    2. Medieval <== h3
    3. Dark Ages <== h3
    4. The Reagan Years <== h3
  3. How It All Works <== h2
    1. The Electrical Factors <== h3
    2. The Psychological Factors <== h3
    3. The Chemical Factors <== h3
    4. The Physical Factors <== h3

One of the reasons that some web writers have trouble with h1, h2, etc., is that they don't write "structured". In fact, some writers think of their web pages more as "posters" than as "documents". The web was designed for "documents".

Let's keep exploring this idea.

Do you have a non-fiction book you can look at?

Non-fiction books have HEADINGS to separate the body copy.

H1, H2, H3, H4, etc, were designed to designate HEADINGS used to separate the body copy

Look at most non-fiction books which use headings and you will see various levels of headings, each one formatted slightly differently.

Here are other examples:

Look at THIS page

http://www.stelzner.com/copy-g-HowTo-whitepapers.php

The main heading on the page (the page title) is

How to Write a White Paper -  A White Paper on White Papers

That would be tagged as H1 because it is the highest "level" of heading.

The next "level" of headings are H2. On this page these are

-- What is a White Paper?

-- Know Your Audience

-- Decide on an Approach

This particular page does not have any third level headings.

Here is a document with a lot of levels

(Note that this document does NOT actually use the H1-H6 tags. I'll just explain where they SHOULD go based on heading "levels".)

http://www.ntia.doc.gov/ntiahome/domainname/6_5_98dns.htm

H1: Management of Internet Names and Addresses

H2: Agency

Action

Summary

Effective Date

For Further Information

Authority

Supplementary Information

H3: Background

H4: U.S.Role in DNS Development

DNS Management Today

The Need for Change

H3: Comments and Response

H2: Administrative Law Requirements

H2: Revised Policy Statement

H3: The Coordinated Functions

H2: The Transition

= = = = = =

Ok

And here is one which actually uses the H1, H2 and H3 tags.

http://www.microsoft.com/technet/prodtechnol/sql/2005/newsqlagent.mspx

h1: What's New in SQL Server Agent for Microsoft SQL Server 2005 Beta 2

h2: Introduction

h3: Security Improvements

h4: New Roles in the msdb Database

h4: Multiple Proxy Accounts

h3: Performance Improvements

h4: Thread Life

h4: Performance Counters

h3: New Features

h4: New SQL Server Agent Subsystems

h5: The DTS Subsystem

h5: The Analysis Query Subsystem

h4: Shared Schedules

h4: WMI Event Alerts

h5: Example of WMI Event Alert

h4: Tokens

h5: Example WMI Event Alert

h4: SQL Server Agent Sessions

h4: SQLIMail Support

h3: Stored Procedure Changes

h2: Conclusion

James S. Huggins

http://EclecticPower.com

http://www.JamesSHuggins.com