HTML for Course Creators: Headings
This article is written for people with very little
What are headings?
Headings are used to separate different sections, usually of text, on a web page. Headings help the person using the webpage to navigate quickly and easily to these different sections. Most users use their eyes to scan the text and focus on the different headings, looking for different sections of the page to read in more detail. In some ways, headings are used in a similar way to reading a newspaper or news website: you use the headings to identify the stories or articles you want to read more about. Headings are also used by screen-readers so that the person using the screen-reader can scan the headings to find the information they are looking for.
The heading sizes for this page are the following sizes:
Heading size 1
Heading size 2
Heading size 3
Heading size 4
Heading size 5
Heading size 6
What do headings look like in HTML?
Headings are opened by using <h#> and closed using </h#>, where # = a number. For example: <h1></h1>, <h2></h2>, etc.
The lower the number, the larger and more important the heading. In a Moodle site the large headings, h1 and h2, are usually reserved for text that is outside of the ATTO editor. For example, the heading showing the course name in Moodle is h1 sized by default. Each web page should have only one h1 on it, so please don’t add h1 to your text.
How do I modify headings?
In Moodle’s ATTO editor, the headings can be selected using the button with A and a dropdown arrow.
Under the dropdown menu, there is ‘Heading (large)’, ‘Heading (medium)’, and ‘Heading (small)’. These correspond to h3, h4, and h5. If you don’t want to use these sizes, you can change the sizes by going into HTML and modifying them there.
How do I use headings?
It is good practice to always use headings for headings. It is tempting to change the font size, colour and weight as you type and edit one page, but if you use the <h> tags, it will mean that these are not true headings.
If you use headings rather than changing the font size, any changes made to headings in your theme will be automatically applied on every page where you have headings. This means you don’t have to go back and make changes page by page.
Having said that, please don’t use headings unless they are genuinely headings. If you want to change the size of your fonts, then do that using CSS; don’t use headings for this, as tempting as it might be!
Why are headings important for accessibility?
Using headings also means that your page is accessible to a person who is using a screen-reader, as that device will use headings to navigate to different sections, with each section having its own heading.
Why can’t I just use bold and large text?
The heading is not just for size and thickness (weight) of your fonts, but holds semantic meaning. This means that a screen-reader can recognise that the heading is a heading and the person using the screen-reader can scan the page or text by jumping from heading to heading, rather than having to read the whole text unnecessarily.
What if I don’t like the default heading sizes?
Generally, you are kind of stuck with what you have (sorry!), but you can use CSS to change to size of your headings and fonts. Talk to your front-end developer and/or the person in charge of your theme.
Moodle Educator Certificate holder
- HTML for Course Creators: Headings – 22nd September 2021
- Content formatting tips for Course Creators: What is HTML? – 22nd August 2021
- More Tips for Writing MCQs – 22nd November 2019
Great explanation of HTML heading styles Tish !
For those of us of a certain age (lol) we learned to actually create HTML pages using heading tags, lists, paragraphs, etc.
But then the WYSIWYG editors came along and made life easier, and certainly quicker.
But it’s so useful to understand what’s going on ‘in the background’.
And for Moodle users being able to switch into the HTML view to alter something simple, like a heading 🙂