Skip to content | Change text size
 

Using HTML tags properly

When used well, HTML tags provide information about the structure and meaning of content chunks on a page. However some web designers use HTML tags just for visual effect. These two approaches are called "structural" and "presentational" markup.

Presentational markup: I want to <b>draw attention to this phrase</b>

Structural markup: I want to <strong>draw attention to this phrase</strong>

Only graphical browsers will display text wrapped in the <b> tag as bold. Other types of browsers treat this text the same as other text on the page, so the effect of bolding to draw attention is lost. On the other hand, using the <strong> tag draws attention to the text wrapped inside it on all sorts of browsers. For instance, screen readers will read the text in a louder or different voice.

Here is another example:

Presentational markup: <font size="large">My page heading</font>

Structural markup: <h1>My page heading</h1>

In this example, increasing the size of a page heading by using the font tag will only work in browsers like Internet Explorer, Netscape and so on. Text browsers, screen readers and handheld devices will show the text in the same size as the rest of the text on the page. Using heading tags, like h1, h2 and so on will mean the headings work in every sort of browser or device people might use.

Guidelines for using HTML markup

Use heading tags to show the document structure

Headings should be properly nested. There should only be one h1 on the page. Headings at the next level down should be marked using h2 and at the next level h3, and so on. An h3 should never follow an h1.

Use ordered and unordered lists for numbered or bulleted lists

  • item 1
  • item 2
  • item 3

The markup for this list looks like this:

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>

Different visual formatting effects can be applied to unordered lists through the use of stylesheets. See applying styles to content.

Use the table header element for header rows in data tables

For examples of how to use HTML tags for tables, see designing tables.

Highlight text with <em> or <strong>

In graphical browsers, emphasis is generally displayed as italic text

This is highlighted text using emphasis.

The markup for this is shown below:

This is <em>highlighted text</em> using emphasis.

and strong is generally displayed as bold.

This is highlighted text using strong.

The markup for this is shown below:

This is <strong>highlighted text</strong> using strong.

Do not use HTML tags for visual effect alone

For example:

  • do not use headings to increase the size of text that does not function as a heading
  • do not use blockquote or li to indent text that is not a quotation or list.

Resources