Structure: Coding, Writing, and Testing

Coding Structural Markup

Screen readers use shortcut keys to navigate around web pages, but in every case they rely on the code being in place to support them. So it is best to use elements to convey semantic document structure and to use them according to specification.

Use of any elements instead of or in addition to those listed above for the corresponding purpose will reduce the semantic quality of the document. It is that simple. The idea is that you shouldn't use a tag because that tag has a certain styling - you should use a tag because that tag makes sense to use. Use CSS for presentation.

Make Sure That <br> Elements Are Necessary

Don't use multiple line breaks to create space between elements. Doing so would be running down the route of markup abuse, as it is presentational rather then structural. Other than addresses, poetry, etc. (where line breaks are structural), you'll want to separate content naturally by placing it in the most appropriate HTML element. It is good to try to avoid meaningless elements as much as possible to simulate a logical structure.

Using Organizing Hierarchies and Headers

To have semantically meaningful markup and good document structure you will need to organize your web pages with hierarchies and headers.

In elementary school, most people were forced to write essays in a standard outline format. That is exactly the way that HTML works. Web pages should always have structured textual content in organized hierarchies (outlines). An example: Use header elements to convey logical structure.

Headings are more than just big, bold, text. They help to break your pages down into logical sub-sections, which in turn, makes your pages easier to read and understand. However, they will only work effectively if you use them properly.

Marking Up HTML Headings

These organized hierarchies (outlines) use headers. Headers are things like titles, section headings and row and column headings in tables, which are used to communicate the structure of the information on a web page. Headers should only be used to convey information structure, in accordance with the rules for use set out in the definition of the markup language. They should not be used to create presentation effects such as different sized text. So don't use headings simply to increase text size, and don't use bold or a larger font size to simulate headings.

In HTML there are six levels of heading you can use. They are defined with <h1> to <h6> tags. <h1>defines the most important heading with h2 defining the most important sub-heading etc. Right down to h6, which defines the least important heading. You should use them logically as if you were writing an essay and not to highlight text in your page. They should reflect the logical structure of the document (like an outline). Ideally <h2> elements should follow <h1> elements, <h3> elements should follow <h2> elements, etc. Although it won't make your page totally inaccessible it isn't best practice to skip over levels (e.g., h1 directly to <h3>). Using heading levels appropriately will ensure documents are more accessible.

• Use a level 1 heading <h1> to indicate the title, topic, or purpose of each page.
• Repeat all or part of the level 1 heading in the <title> element.
• Use level 2 headings <h2> to indicate main sections of the document.
• Use level 3 headings <h3> to indicate sub-sections.
• Use level 4 <h4>, level 5 <h5>, and level 6 <h6> headings to indicate sub-sub-sections.

Good Heading Example

<h1>Page Title</h1>
 <!-- Content, such as paragraphs, lists, etc. --> 
<h2>Section Heading</h2>
 <!-- Content, such as paragraphs, lists, etc. --> 
<h3>Sub Section heading</h3>
 <!-- Content, such as paragraphs, lists, etc. --> 
<h3>Sub Section heading</h3>
 <!-- Content, such as paragraphs, lists, etc. -->

Bad Heading Example

<h1>Page Title</h1>
 <!-- Content, such as paragraphs, lists, etc. --> 
<h3>Section Heading</h3>
 <!-- Content, such as paragraphs, lists, etc. --> 
<h6>Sub Section heading</h6>
 <!-- Content, such as paragraphs, lists, etc. -->

Heading structure also plays an important part of search engine optimization. Search engine spiders check for heading tags as they index your pages, so your heading structure (and the content beneath each heading) may affect your search engine ranking.

Writing Heading Content

Clear, complete headings typically contain specific keywords and summarize the next section of content. To write good headings:

• Use keywords that summarize the next section of content.
• Ensure that collectively they summarize the whole web page.
• Make sure they are understandable out of context.
• Front-load with the most important keywords because users often scan only the beginning of a heading.
• Keep headings concise so they are easy to scan and understand.
• Avoid jargon, acronyms and other shortened forms unless they are familiar to your target audience.
• Avoid teasers or cute, catchy phrasing that may not be clear to all users.
• Write in title or sentence case. Using all uppercase is difficult for some people to read.

Testing Headings

To test headings just read the headings of your pages out loud.

• Do they describe the content that they precede?
• Do they break the page down logically?
• If you were back in school, what would your English teacher think of the page?

Note: HTML5 Headings

HTML5 adds more semantic elements and attributes. For example HTML5 headings are intended to syndicate and reuse content with relatively ranked headings. However the benefits of HTML5 headings elements aren't available yet. Browsers and most assistive technology do not yet support the HTML5 outline algorithm. The only exception is JAWS, which gets it wrong, as Jason Kiss explained in JAWS, IE and Headings in HTML5. Until HTML5 outline algorithm is accessibility supported, keep using <h1> - <h6> in the HTML4 manner to differentiate between heading levels. As the HTML5.2 specification states:

There are currently no known implementations of the outline algorithm in graphical browsers or assistive technology user agents, although the algorithm is implemented in other software such as conformance checkers. Therefore the outline algorithm cannot be relied upon to convey document structure to users. Authors are advised to use heading rank (h1-h6) to convey document structure.

← previous next →

Contact ITSS

About ITSS