How to structure a basic page

Applies to: T4 Site Manager, Plone, Zope
Last updated: 27/10/2014
Summary: How to structure a basic page using headings and lists

Before you start

If you want to add a right-hand column to a page or add some boxes, please see our guidance on how to create page layouts and how to add modules (boxes) guidance.

The importance of page structure

The structural markup of your web pages (eg headings, paragraphs, lists etc) contains very important information about content hierarchy.

Visitors to your site who rely on assistive technologies (eg people with visual impairments who use screen-reading software) can navigate through pages more effectively if they are properly structured.

If a page is not marked up correctly (eg if you use <p><strong>Heading text</strong></p> as a heading instead of <h2>Heading text</h2>) this ability is lost.

Headings

There are six levels of heading in HTML: level 1 <h1> is for the most important heading on a page, level 6 <h6> is the for least important. Level 5 and 6 are rarely used.

Don't use <h1> in the main ‘body' text, as <h1> should only appear once per page and is automatically created from the ‘title’ field. However, you do need to make sure the title you give the page is as succinct and descriptive of the page content as possible.

  • Use headings for their intended purpose, ie as headings and not to emphasise a block of text.
  • Use them in their logical order (ie start with <h2> followed by <h3> followed by <h4>.
  • Use <h2> headings, to introduce each main section on the page, and if necessary <h3> headings to divide each main section.
  • Make headings as descriptive of the section they introduce as possible, using keywords: eg Applications for full-time degree courses.
  • Leave out as many prepositions and adjectives as you can.
  • Start with a verb when writing actionable content, eg Apply online or Making your application.
  • Avoid using questions. If you have to use them, use them sparingly, eg Why choose Bristol?

Lists

  • Use bullet (unordered <ul>) lists when list items have no particular order.
  • Use numbered (ordered <ol>) lists when the order of list items matters, eg steps in a process; instructions, etc
  • Do not put in your own numbers or bullets.
  • Use lists as table of contents for long web pages, and link each list item to its corresponding heading.

Copying content from other sources

If you copy content from documents, eg Microsoft Word, Excel, PDFs, Google Docs, etc, or from other web pages or emails, always paste as plain text otherwise you may introduce extra code which will affect the page layout and styling.

To paste as plain text: copy your text, click the 'paste as plain text' icon in the WYSIWYG editor toolbar, then paste:

Once you have pasted the plain text, you can then format it using the WYSIWYG editor toolbar.

You need to click the 'paste as plain text' icon each time you paste text (unfortunately you can't save it as the default option).

Adding images to basic pages

See how to prepare images for use on web pages.