Using Headings & Subheadings

When you build a webpage, it can look a little like an outline used on a school paper with a main heading and subheadings.

Example Usage

<H1>This is a heading – Page Title</H1>

<H2>This is subheading A</H2>

<H2>This is subheading B</H2>

<H3>This is a lower subheading</H3>

<H2>This is subheading C</H2>

<H3>This is a lower subheading</H3>

Davidson Example

Heading 1 – <H1> (Page Title) – Fair Labor Standards Act

Heading 2 – <H2> Documents & Resources

Heading 3 – <H3> General Documents

                     <H3> Department of Labor

View the Example: Davidson HR, Fair Labor Standards Act 

Nest headings by their ranking (or level). The most important heading has the rank 1 (Heading 1), the least important heading rank 3, etc. Headings with equal or higher rank start a new section, heading with a lower rank start new subsections that are part of the higher rank section.  Skipping heading ranks can be confusing and should be avoided where possible.

Subheadings are Useful for Several Purposes

  • Declare the most important text on the page.
  • Break up the text on a webpage and make the page easier to scan by Web visitors
  • Aid search engines and search engine optimization (SEO). Headings and subheadings include important keywords that are indexed by search engines.
  • Web browsers, plug-ins, and assistive technologies use headings to provide in-page navigation. They communicate the organization and hierarchy of content on a page.

Incorrect Use of Subheadings

  • Don’t use subheadings for simply formatting text. 
  • Don’t use heading tags to highlight words on a webpage for cosmetic reasons.
  • Don’t use subheadings out of sequence. H2 should follow H1, etc.
css.php