VLE Help Centre | Liverpool Community College

Using Headings & Document Structure

Topics Outline:

• 1: Introduction
• 2: Headings
• 3: Hierarchical Document Structure
• 4: Enough Explaining! Show us How!

Technical Requirements:

You do not need to know any complicated code such as HTML, this document only uses pseudo code to illustrate a point.

Everything we discuss below is easily accessible from a simple drop-down list on the Student Intranet’s WYSIWYG editor (as described in Section 4).

1: Introduction

When writing content within the Student Intranet it is useful to know how headings should be best used.

Using headings in the correct way not only keeps a visual theme running throughout your the Student Intranet pages, but also helps the accessibility of your content by giving your page a meaningful structure.

To illustrate the need to structure your the Student Intranet documents in a more meaningful way, consider the following…

When reading through a document, many users are able to construct an understanding of the documents structure after their eyes flick over it for the first time. If it is possible for them to see where the headings lie, as long as the headings have been given a visual style (such as bold text) then they will be easy to distinguish from paragraphs.

However, this may be difficult for those who use assistive technologies such as screen readers or braille displays. These users do not have the luxury of being able to flick over the document quickly. Try to imagine how a user might tell the difference between a heading and a paragraph if they are not able to see the distinguishing visual style?

2: Headings

One way we can over come this is to actually tell the WYSIWYG editor in the Student Intranet that what we are typing is a heading, or a paragraph. So not only are we able to distinguish between the visual appearance of a heading compared to standard paragraph text, but we are able to begin to give meaning to the document structure. This is easily achieved without the use of HTML code, however for the following examples it is necessary illustrate this using pseudo code.

Consider the following example…

By viewing the above it would be easy to distinguish between the heading and the paragraph of text. Now consider the following, without distinguishing between heading and paragraph we would not be able to instantly recognise that “Topic Outline” was actually a heading…

To give even more meaning to the above example, it would make more sense if we could specify the four paragraphs as a list…

3: Hierarchical Document Structure

So, we are starting to gain an understanding of how the document structure requires more than just visual styles to give it meaning. Now we can look at the hierarchy of elements within the document structure. Imagine if we put the two examples above together to make one document. We have a heading, a paragraph, a sub-heading and a list…

It is also possible for us to specify that the sub-heading “1.1: Topic Outline” is actually below “1: Welcome to My Course” in the document structure. The headings themselves can be defined with a number that represents their place in the hierarchy.

So for example, Heading 2 is above Heading 2, Heading 1 is above Heading 2, heading Heading 4 is below Heading 3…

• Heading 1
  • Heading 2
    • Heading 3
      • Heading 4
        

You can use headings to easily define the structure of your document. For example, the following could be taken as an outline for a document. By defining the title of a section as a heading within the WYSIWYG editor, you are helping to give your document structure some meaning to users of assistive technologies such as screen readers…

• Heading 1 – Main Title

  • Heading 2 – Section 1

    • Heading 3 – Section 1.1

    • Heading 3 – Section 1.2

  • Heading 2 - Section 2

    • Heading 3 - Section 2.1

      • Heading 4 - Section 2.1.1
        

    • Heading 3 – Section 2.2
      

  • Heading 2 – Section 3
    

  • Heading 2 – Section 4
    

    • Heading 3 – Section 4.1
      

4: Enough Explaining! Show us How!

As explained in section 2, there is no need to use HTML code to achieve this, it is simply a matter of highlighting your text in the visual editor and selecting the relevant heading from a drop-down list.

Type out your text in the editor (in this example I have just made the headings bold and/or underlined)…

 

Now highlight the first heading and select Heading 2 from the drop-down list…

 

 

Finally, select the first sub-heading and select Heading 3 from the drop-down list…

Selecting and assigning the correcter header element for your titles is the easy part! What is more challenging is making sure that you have followed the correct hierarchy for your headings, this allows you to ensure a meaningful document structure.

Remember, it is not just the visual style of your section titles that can have an impact on the accessibility of the document.

Watch the Video Tutorial

Video: Using Headings

• Print This Article
• Help Centre RSS Feed