University of Minnesota Duluth block M and wordmark
Information Technology Systems and Services

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.

Some HTML Structural Elements
Function Element to Use
Headings <h1> - <h6>
Paragraphs <p>
Lists where the order isn't important <ul> and <li>
Lists where the order is important <ol> and <li>
Definition lists <dl> , <dt> and <dd>
Quotes <blockquote>
Links <a>
Computer code <code>
Tabular data <table> , <tr> , <th> and <td>

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.

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:

Testing Headings

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

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