Skip to main content
Version: 4.x

article-headings

Heading Semantics​

Headings define a sematic structure for a page. They may be used to create an automatic table of contents and as navigational aids for users with disabilities. Heading levels range from h1 to h6. A single page should contain only one h1 heading which is usually the page title. A h1 heading should not be used in an article. Within an article, headings should be nested to create a structure in which each heading level introduces a well-defined section. Example, where the h1 page title is Animals:

... text on animals in general ...
Amphibians
... text on amphibians in general ...
Frogs
... text on frogs ...
Newts
... text on newts ...
Reptiles
... text on reptiles in general ...
Crocodiles
... text on crocodiles ...
Turtles
... text on turtles ...

Headings help with ease of reading. Long blocks of text in web pages are off-putting! Save them for Novels.

Headings should be short, the shorter the better. One word will do. Whole sentences do not make suitable headings! Headings should not end with a full stop.

Insert an Article Heading​

Open the article you wish to edit. TinyMCE is the default WYSIWYG editor in Joomla so the following description is for that editor. First notice that the default text container is a paragraph, marked by a letter P at the bottom of the edit window. This can be changed in the Editor Options but that is covered elsewhere. When you type a newline followed by some text that text is contained in a paragraph.

To create a heading:

  • Position the cursor at the start of an existing paragraph or at the bottom of the text if you are creating a new article.
  • Type the heading followed by a newline.
  • Select the line to be made into a heading.
  • From the editor format buttons, where Paragraph is shown selected:
    • Select Headings → Heading X where X is the appropriate value in your hierarchy.
  • The selected paragraph will become a heading and appear in bold text.
  • At the bottom of the screen the container indicator will show HX.
  • You can select the HX element to make a quick change, say from H2 to H3.

The following screenshot shows a paragraph ready to be converted to a heading.

Article Headings

Note: by convention, all HTML tags use lower case letters. If you select Toggle Editor to look at the source you will see the paragraphs and headings set in tags with lower case.