Page Structure

The structure of a web page is critical. It provides a framework for the content and also influences how that content can then be displayed and accessed.

The use of semantic structure in a page improves readability and enforces a hierarchy that is essential for web browsers, search engines and assistive technologies such as Screen Readers.

Semantic structure relies on the correct use of HTML tags to define content types on the page.

Headings

Headings provide structure to a page and make the content easier to read. The page title is used to generate the top level heading (H1) for the page. All other headings on the page must be from H2-H6 and nested appropriately.

Never use page formatting such as bold text to create headings as these will be interpreted as general paragraphs and do not provide the correct structure to the page.

Headings are also essential to search engines providing information on content and keywords.

Most assistive technologies use heading tags to provide an index of the page for user navigation.

Paragraphs

Break your content into paragraphs based on topic. Include links as appropriate but if you have too many consider including them as a list after the paragraph.

Lists

Lists can be used to make a page more readable and can highlight key information. Always use appropriate list structure rather than inserting spaces and dashes/bullets to create an equivalent effect.

Links

Only include links that are useful to the users within the current context and do not break the flow of the page.

Make sure links using the same title go to the same page.

Tables

Only use tables for tabular content and not for formatting a page. Tables should be kept as simple as possible.

Read the Guideline

  • Checklist

    chevron_right

    Key things to remember

    • Identify headings correctly and apply tags in a sequential order
    • Paragraphs
    • Use correct list type
    • No layout tables
    • Consistent approach for navigation
  • Tools

    chevron_right
  • Links

    chevron_right