Charles Sturt University
Charles Sturt University

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 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

 


Further Reading