Headings create an organized outline of the content on a webpage to create a visual and technical hierarchy that can be read by people, search engines, assistive technology and more. Heading levels range from 1 to 6 (H1 to H6) with H1 being the most prominent and the others used as subheadings to create outlines that provide structure to a page. 

Headings are specific typographical elements, like titles, paragraphs, tables, and lists, and not just variations of font size and weight. This tutorial describes how to use them correctly.

Prerequisites

Administrator access to a Joomla site (version 5 or above). See 1.0 Admin Login.

Create an Article Outline with Headings

Joomla's editing tools make it easy to insert headings into an article. 

For our tutorial we'll create an outline for article on transportation using headings. You may use any categories that make sense for your site.

Steps

1. Login to Joomla as an administrator and navigate to the Home Dashboard.
2. In the left side menu, expand Content click on Articles.
3. Click on the New button. A new-article form appears.
4. Enter a title for the article.
   • E.g.Transportation
   • Joomla will display the article title as a Heading 1 when the article is viewed.
   • Our article should only have a single Heading 1, so we will be working with Heading 2 and below.
5. Click into the text editing area and extend the formatting dropdown (which will have Paragraph selected by default). 
   1. Note there are many formatting styles here, and that hovering over an option with an arrow opens a sub-options.
6. Create a subheading by first selecting the Heading 2 format.
   • From the formatting dropdown, hover over Headings and select Heading 2.
   • Type a subheading, e.g. Aircraft.
7. Tap the return key to move to a new line.
   • Note that the formatting dropdown has returned to Paragraph.
8. Create a subheading by applying formatting to existing text.
   • While still in the Paragraph format, type another subheading, e.g. Watercraft.
   • Highlight the subheading, and note that a popup menu appears containing H2 and H3 icons.
   • Select H2 from this toolbar. 
   • Note that the formatting dropdown now displays Heading 2.
9. Tap the return key to move to a new line and enter a Heading 3 under this Heading 2, e.g. Pleasure Craft.
10. Tap the return key to move to a new line and enter a Heading 4 under this Heading 3, e.g. Sailboats.
    • The popup menu does not have an H4 so you'll have to use the formatting dropdown instead.

Clearly we can simply keep going here, creating a complete outline using headings. 

Note the visual differences between the headings, where each heading level is smaller. The style of each heading can vary widely depending on your site template and customizations. More importantly, the headings have tags that enable screen readers, search engines, and other technology to read the document.

Click the blue Toggle Editor and note how headings are encoded. Technology can read these codes to understand the structure of your page.  

Close the article.

Concepts 

• An article should contain only one H1 heading which is automatically set to the article title by Joomla.
  • Advanced page structures can have more than one, but that is beyond the scope of this tutorial.
• Always use heading elements when creating an outline structure for your article.
• Never use heading elements to simply emphasize text. 
• Never skip heading levels, structure them in order with H3 headings below H2, H4 headings below H3, and so on.