Drupal Theme: 
UQ Base Template
Learning Objectives: 

On this page, site editors will find the step-by-step instructions on best practice guidelines for structuring a page of content. We also recommend that prior to populating your website with content you review the information on Planning your website.

Use headings

Headings break up a page, allowing users to quickly scan for the right bit of info rather than wading through everything. They also make a long page much more inviting.

For instance, this is much easier to read:

Section title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Next section title

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

than this:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.


Structured headings

Headings have structure to them as well. There are 6 levels of heading, starting at H1 for the page title (there should only be one H1 on a page), through to H6. You start with H2 for a section of content and where there is a sub-section within that content you use a H3, and so on down to H6.

Lower headings should not be used just because you want smaller text. They are a semantic element that allows both users and systems to understand the page more correctly, they are not design elements.

Bold is not a heading

Don't use bold instead of a heading for section titles. Bold is for highlighting words within a paragraph of text, and it doesn't have the same semantic weight as a heading does. Tip: Search engines like semantics.


Important information at the top

If the goal of the page is to communicate a particular thing, or to get users to perform an action (like downloading a document or completing a form) then it should be at the top of the page. It doesn't have to be the first thing they read but it can't be the last.


Tables are for data

Like headings, tables are a semantic element and should be used for data rather than layout. If you want to lay out some content in a columned display then use <div>'s and the layout styles available (block-grid and columns). This not only works better but it allows the page to respond correctly on mobile devices, which tables cannot do.


Images speak a thousand words.. or do they?

Images help to break up large pages and give visual context to written information. They don't replace the need for text, and they certainly don't help search engine rankings like text does. Using images only for navigation or giving users choices is terrible practice. It's usually impossible for users with disabilities using screen-readers when there are no alt or title text attributes; and search engines cannot interpret what an image is about without some written description.

Use images to enhance text where appropriate. Just because a page doesn't have any images doesn't necessarily make it boring or unengaging. Headings are a better way of breaking up a page to make it more appealing and easy to read.


Write with the audience in mind

Before you start, think about who the auidence for this page is and what they want to get from it. The amount of content you write should depend on how complext the subject is, how technical or experienced the audience is, how much time the audience likely has to spend reading it. If it isn't essential, consider leaving it out.

Provide summaries of large and complex information.


Step 1: Insert a heading

Type your heading out, then click on where it says "Normal", select Heading 2 to apply the H2 format. You will notice your title will look different to your paragraph text.

Step 2: Insert a subheading

Type your heading out, then select Heading 3 to apply the H3 format. Most websites should utilize mostly the H2 and H3 headings in their content.


EXERCISE: Structuring page content

Once you have read through the tutorial on this webpage we recommend that you also review the content for your own website. Does this content meet the criteria noted on this page?

We also recommend that a review of the content available on planning your website.

NEXT: Add & Edit content