How to Use HTML Headings

One of the most-used item in content building for the web are headers. Headers are useful in organizing content by giving structure. It is important to use headers properly as screen reading software will read items in order of heading levels. It is also pertinent to properly utilize headers to make content easily searchable through search engines like Google.

Heading Elements

Headers go from h1 to h6. Consider each header to differentiate a section of content and its sub-content. h1 header is the highest level content and h6 is the lowest. As mentioned before, headers are meant to differentiate sub-sections, so avoid using them simply based on text-size output. You can modify text size within the Cornerstone builder as long as you keep the structure of the headers in-tact.

Dos and Don'ts

Dos

  • Use headers for structure.
  • Use headers in order for screen reader parsing capabilities.
  • Utilizing them as an organizational structure for nested content.

Don'ts

  • Do not use multiple h1 elements on one page. As a rule of thumb, only use the h1 tag for the title of your page.

Using the Heading Element in Cornerstone

Creating content using headlines is simple and effective in web writing. It is easy to use through Cornerstone. Simply add the Headline element, and select what type of header you wish to use.
Image

Example

  1. h1 Cupcakes
    1. h2 Origin of Cupcakes
    2. h2 Evolution of Cupcakes
    3. h2 Cupcake Recipes
      1. h3 Red Velvet Cupcake Recipe
      2. h3 Matcha Cupcake Recipe
      3. h3 Ube Cupcake Recipe
      4. h3 S'mores Cupcake Recipe
    4. h2 Cupcakes in Different Cultures
      1. h3 The South's Take
        1. h4 Georgia
        2. h4 Tennessee
      2. h3 The East Coast's Take
        1. h4 Boston
        2. h4 New York
      3. h3 Other Parts of the World

Sources

Published on November 21st, 2022

Last updated on April 18th, 2024