In this lesson
Page structure for more complex pages
In this lesson we have used a very simple model of a web page to explain how the various components of a page could be organised in HTML. We have placed the main content of the page as near to the top of the page as practicable to help users of assistive software and text-only browsers to get to the content they want fairly quickly. This is perfectly acceptable for linear content such as these lesson notes. However most websites are a lot more complicated and you will want to offer your users a more practical method of navigation.
Users who come from a search engine may well find that they are not really interested in the page content and want to go elsewhere quite quickly. If all your navigation links are at the bottom of the page the user has to read the whole page to find them, or. more probably, they will use their "back" button to return to the search engine (i.e. leave your site). To keep these "casual visitors" on your site you need to offer them some quick alternatives to show that you have more useful content elsewhere on the site.
The traditional approach is to start each page with a small set of "top level" links that includes links to the home page and the site map. This format has become so common that it is considered to be an intuitive system (i.e. users feel comfortable with it). We could therefore improve the page structure by making it more "intuitive" so that it now looks like this :-
- Top level navigation bar
- Page content
- Secondary navigation bar
- Anything else (e.g. advertisements)
- Footer navigation bar
The problem now is that a user who is working through a number of pages on your site will soon get fed up with having to hear these top level headings on every page they go to. The solution is to add an initial link to the page that allows this user to "skip" directly to the content to avoid having to listen to the top level links again. The process is quite simple. At the beginning of your content you provide a named anchor such as:
<a name="content"></a>
Then at the top of the page we can provide a link to that anchor such as :
<a href="#content">Skip to content</a>
This will allow returning users to skip straight to the content and ignore the top level navigation links.
We can also use this technique to allow users to "Skip to" the secondary navigation by placing a named anchor at the beginning of the secondary navigation list and then providing a link to this anchor. Text-only browsers present the page content in the order in which it is written, so you should always try to write your secondary navigation after your main content. if you have a long list of secondary navigation links at the top of the page these will fill the text screen and the user will have to scroll down "below the fold" to see your content (remember the SiteMorse site in lesson 2).
Exactly how you structure your pages will depend upon how complex or detailed the page content is, or how the page fits into the overall structure of the web site. The web is a flexible medium that allows you to adopt whichever structure best suits your needs, but it is important that you always remember to make sure that visitors using assistive can obtain a quick overview of the page and jump quickly to the content or links that interest them on the page.
What next
Theoretically you could now create all the pages of your website and publish them for people to see. You are able to write the material you need for your content. You can structure pages in a semantic way so that browsers and assistive software can understand the page logic. You just need to add a site map with links to each page and you will have a completely accessible web site. However your pages would only contain text, be presented in a linear fashion (line by line down the page) and be rather dull. We need to add some style to the pages to make them look more appealing. We should also add some images to help make our text easier to understand.
In the next few lessons we shall learn how to create an interesting "look and feel" for our pages without introducing anything that makes them harder for disabled people to use. In fact, by making our content more visually appealing, we are helping everyone who is not totally blind to enjoy and benefit from our site.
Lesson Summary
- Page content must follow a logical structure
- Every page starts with the <!DOCTYPE> declaration
- Every page has a unique title that reflects the content of the page
- Every page head section should include meta data
- Only one <h1> heading is allowed per page and it should provide a summary of the content
- Sub-section headings <h2> to <h6> are important and should be nested sequentially
- Paragraphs should be short and concise
- Lists should be preceded by a relevant heading
- Lists should not include block items such as paragraphs or tables
- Tables used for presenting data require a summary
- Use the <th> element to identify row and column headings
- Supply an abbreviation for long column and row headings
- Use the scope attribute for all but the simplest tables
- Do not use <thead> and <tbody> elements unless you have a very long table
- Pages need to be structured so that they are intuitive to use, this means probably adopting a common (traditional) page structure
- Provide a way for keyboard users to skip over lists of links that appear on every page
Reference material
- The global structure of an HTML document (W3C) - http://www.w3.org/TR/REC-html40/struct/global.html
- Structuring text in HTML (W3C) - http://www.w3.org/TR/REC-html40/struct/text.html