V8 background

Structure and Format

Headers and Formatting

Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content. Make it as easy as possible for people to get an impression of what's on offer and find the specific piece of information quickly.

Correct-and-incorrect-use-of-headings

Keep your pages inviting and easy to read by using short paragraphs and by limiting the use of text formatting such as bold and italic style to specific instances. You dont have to bold the entire sentence either, only the key words or description within the sentence or paragraph.

You can use bulleted or numbered lists where appropriate and techniques such as indented paragraphs of text (block quoted).

Emphasize key points in long passages of text with headings and always nest headings correctly e.g. h2 > h3 > h4 etc. Never "skip" headings. Only nest headings when the information is a subset of what came before it. If each paragraph is a stand alone piece of information then you might have h2 followed by another h2 and so on. 

Top Tips

  • Structure using short descriptive headings and sub-headings:
    • Try to avoid skipping levels (e.g. follow the order of Header 2 > Header 3 > Header 4 etc.)
  • Provide a short summary or introduction - particularly for longer pages:
    • 50 words or fewer at the top of the webpage content. You can give this intro a heading "Overview" or "Introduction".
  • For long pages provide a 'table of contents' at the top of the page;
    • For very long pages you can create a numbered list of labels to act as a Table of Contents by linking them to Anchors created on each heading on the page.
    • Link each item in the contents list to the sub-heading to which it refers using the ‘Anchor’ functionality in the editor.
  • Prioritise the most important information:
    • Place important items high in the page to minimise the need for scrolling:
      • Screen readers users will also be presented with this information earlier;
    • Put the most important information first in links, titles and phrases:
      • This will emphasise the uniqueness of the item and aid quick comprehension.
  • Enhance content for scanning:
    • Use short paragraphs and sentences;
    • Use lists instead of long, comma, separated sentences;
    • Break up 'walls of text'.
Examples-of-good-and-bad-structure
Poor: a list of comma separated services - difficult to read. Good: services presented in a list making them clearer
  • Style for readability:
    • Left align all body text (this is often done automatically by your pTools templates):
      • Do not right, centre or justify - this makes it hard to read, especially for some people with reading difficulties such as dyslexia;
    • Use bold and italic sparingly:
      • Highlight key words and key phrases,
      • Do not bold or italicise whole paragraphs,
    • Avoid ALL CAPS.
      • Do not use underline which is reserved for links only.
Bad-examples-of-bold-and-italics
Poor: All caps, all italics and all underline is hard to read