Using semantic elements to mark up structure

Status

New technique

Applicability

HTML, XHTML

Description

The objective of this technique is to mark up the structure of the web content using the appropriate semantic elements. Using the appropriate semantic elements will make sure the structure is available to the user agent. The user agent can then make the structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch.

Examples

Example 1. A page contains a hyperlink to another page. The hyperlink is marked up using the a element.

<p>More information can be found on <a href="otherpage.html>John Doe's website</a></p>.

Example 2. An online course in graphics design consists of one overview page and several pages with lessons about different topics. The lessons are designed to be read in order. A separate page contains a glossary with graphics design terms. The link element is used to indicate how the different pages relate to each other.

<head>
<title>Lesson 2: Color theory</title>
<link rel="prev" href="lesson1.html">
<link rel="next" href="lesson3.html">
<link rel="index" href="index.html">
<link rel="glossary" href="glossary">
</head>

Related resources

Related techniques