Adding Structure to a Text with HTML

Posted on 2010-10-14 by Jan Vantomme
Tags: teaching, tutorial

An important thing to keep in mind when you write HTML documents is to add structure to your text. This helps your visitors scan the document quickly to find the information they need. In this article you'll learn the basic elements you need to add structure to your text: headings, paragraphs and lists.

Headings

There are six levels of headings available in HTML: <h1> is the most important heading, <h6> is the least important one. Headings are used to display titles and subtitles in a HTML document. You should only use these tags for their semantic meaning, never for styling text.

<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>

Paragraphs

A paragraph is a block of text with one or more sentences about a topic. Try keeping your paragraphs short when you write for the web. This will help your users to scan the page faster. Long blocks of text don't read very well on a screen. Paragraphs are marked up with the <p> tag.

<p>This is a paragraph.</p>

Lists

We all use lists very often. Think about it: there is your top ten movies, your shopping list, sports rankings for your favorite team. Lists are used to group similar information. There are two kinds of lists that are used regularly in HTML. Ordered and unordered lists. It's up to you to pick the right one.

You need to analyse your content to choose the right type of list. If the information needs to be presented in a specific order, you will use an ordered list. If you can organise the information in any order, use the unordered list.

Ordered lists are marked up with the <ol> tag, unordered lists with the <ul> tag. Both lists can only contain list items marked up with the <li> tag. Any other element used within <ol> or <ul> will cause a validation error.

A good article on HTML Lists can be found on the Opera Web Standards Curriculum.

Unordered List

This is the html you need to markup unordered lists.

<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cookies</li>
</ul>

Ordered List

The tags to markup an ordered list looks similar to the one you use for the unordered list.

<ol>
    <li>Star Wars</li>
    <li>Fritz the Cat</li>
    <li>Spirited Away</li>
</ol>

There are some attributes you can add to the ol tag. You can add the start attribute to let the list start at another number. There is also a reversed attribute in HTML5 so you can reverse the order of your list items. This is currently not implemented in browsers, but there is a workaround.

Ordered List with a Different Start Position

Using the start attribute, you can specify at what number a list should start.

<ol start="50">
    <li>Star Wars</li>
    <li>Fritz the Cat</li>
    <li>Spirited Away</li>
</ol>

Reversed Ordered List

In HTML5 you can use the reversed attribute to reverse the order of your list.

<ol reversed="reversed">
    <li>Star Wars</li>
    <li>Fritz the Cat</li>
    <li>Spirited Away</li>
</ol>

Reversed Ordered List (workaround)

By adding the value attribute to the <li> tag, you can reverse the order of your list. Note that this is a workaround for current browser versions. Browsers from the future should support the reversed attribute for the <ol> tag.

<ol>
    <li value="3">Star Wars</li>
    <li value="2">Fritz the Cat</li>
    <li value="1">Spirited Away</li>
</ol>

Tweet this article