Skip to navigation.

So far, I've shown you a few HTML tags to add structure to your document: the heading tags X>, paragraphs

, links and the two generic tags with no meaning and

. Here I will introduce some more.

Lists

HTML has 6 different elements for dealing with different types of lists. In HTML there are three types of list:

  • Unordered lists
  • Ordered lists
  • Definition lists

Unordered Lists

Unordered lists are typically displayed with bullet points in front of each item, although not always. They should be used when the order of the items in not important. Browsers are allowed to rearrange the items in the list if they like (although I don't think any do!). The list above is an unordered list.

To begin an ordered list in HTML, we use the

    tag and, predictably, to end it we use
. In between, we mark up each item with
  • and
    • . For example, the list above uses the following:

      

    • Unordered lists
      • 

    • Ordered lists
      • 

    • Definition lists
      •

    Ordered Lists

    Once you understand unordered lists, ordered lists are easy. Just replace

      and
    with
      and
    . For example:

      

    1. Unordered lists
      2. 

    2. Ordered lists
      3. 

    3. Definition lists
      4.

    is displayed as:

    1. Unordered lists
    2. Ordered lists
    3. Definition lists

    Definition Lists

    Although primarily intended for lists of terms and their definitions (like glossaries), the definition list can be used to represent any lists of pairs. This is one of the less frequently used parts of HTML.

    To start and end a definition list, we predictably use

    and
    . For the terms which are defined, we use
    and
    and for their definitions we use
    and
    . For example:

    

    Unordered lists
    

    Lists in which the order of items is not important.
    

    Ordered lists
    

    Lists in which the order of items is important - possibly vital 
    

    Definition lists
    

    Lists of definitions or of pairs of items.

    will look a little something like this:

    Unordered lists
    Lists in which the order of items is not important.
    Ordered lists
    Lists in which the order of items is important - possibly vital
    Definition lists
    Lists of definitions or of pairs of items.

    More on Lists

    Lists are a good choice for navigation systems, as a navigation system is really just a list of links. Even if you don't like bullet points they are a good choice, because the bullet points can be hidden using CSS. For advanced students, I have prepared an example of using CSS with unodered lists to produce fancy navigation bars. Take a look at the page and view the source in your browser.

    Inline Semantic Elements

    semantic
    adj : of or relating to the study of meaning and changes of meaning

    The inline semantic elements (and there are a lot of them!) add extra meaning to the document. For example, they mark up which parts of the document are abbreviations (and can be used to specify the fully expanded form of the abbreviation) or which parts are important, or which parts are quotations.

    In turn, we can use CSS to give all the abbreviations dotted underlines, or make all the important bits bold, or all the quotations italics. Search engines could index the important text with higher weight. The possibilities are almost endless.

    Emphasis

    HTML has two levels of emphasis: regular emphasis and strong emphasis.

    To indicate that a piece of text should be emphasised, use the and tags. Text between these tags is generally displayed in italics, although some browser will use a different colour instead.

    To indicate that a piece of text should be strongly emphasised, use the and tags. Text between these tags is generally displayed in bold, although again some browsers will use a different colour.

    Here is an example of their usage:

    "Wake up!" said John emphatically, but 
Mary-Jane was still asleep. John took a deep breath and 
yelled, "Wake up!!!"

    Your browser displays this as:

    "Wake up!" said John emphatically, but Mary-Jane was still asleep. John took a deep breath and yelled, "Wake up!!!"

    One thing to remember is not to fall into the trap of using emphasis for headings. Headings are different. Don't get them mixed up.

    Abbreviations

    Abbreviations can be marked up using the and . There are also and , but as no-one really understood the difference, these are being phased out, so you should use and instead.

    I haven't really talked about attributes yet, but the tag has a very useful (but optional) attribute, title. Here is an example of and title in action:

    The web is written in
HTML.

    Some browsers support the tag better than others. Internet Explorer tends to ignore it, but Mozilla, Netscape and Opera will display a dotted underline under abbreviations and will display the title as a tool tip when the abbreviation is hovered over with the mouse.

    Quoting

    There are two elements which you should be aware of for quoting. One is the element which is, as usual, closed with its associated tag. The other is (and ).

    The and tags are used to mark up a short quote (for larger quotes of a paragraph or more, see later in the text). They also have a cite attribute, not to be confused with the element mentioned above, used to point to the source of a quote. For example:

    
The W3C's standards
say that 
Q is intended for short quotations (inline content) that don't require paragraph
breaks.

    Browsers should automatically add quote marks when this is displayed, but some don't, so you may want to add them manually if they are very important.

    The element can also be used to indicate the source of a quotation or of some other information. For example:

    The W3C's standards say that 

Q is intended for short quotations (inline content) that don't require paragraph
breaks.

    Computer Code

    As HTML was mainly designed by computer programmers, it has a number of elements for marking up computer code in the flow of text. If you're not writing about computer programming or anything related, you can probably skip over this section. The elements are:

    A general element for marking up any kind of computer language.
    An element indicating key strokes that a user should press.
    Sample output from a program.
    Indicates a variable or program argument.

    As these elements will be of limited interest to a lot of people, I will only describe in full. The others work the same.

    If you are using a browser that supports CSS, you will notice that snippets of HTML code in this tutorial have a green background. This is because I have marked them all up using (do you remember the class attribute from when I talked about

    and ?) and then specified the following in my CSS:

    code.html {
    background-color: green;
}
code.css {
    background-color: yellow;
}

    Clever, eh?

    Anyway, that is enough for the inline sematic elements. There are one or two others, but I have covered all the important ones.

    Layout Elements

    There are two main elements that should be used for page layout. These are
    for manually inserting a line break and 

     with its counterpart
    for indicating a large chunk of pre-formatted text. Notice that
    doesn't have an end tag.

    In general, browsers will do all the line-wrapping automatically, but sometimes you will need to manually specify line breaks, for example in addresses or poems:

    
I think that I will never see
    
a poem as lovely as a tree.

    This will look like:

    I think that I will never see
    a poem as lovely as a tree.

    Simple, right? Just remember never to use
    as a substitute for proper paragraphs.
    has its uses, but that is not one of them.

    Now, remember that HTML collapses white spaces. Long streches of space or line breaks in the HTML source just disappear in the browser. This effect can be over-ridden with 

     and
    . Notice the difference:

    Foo         Bar
    

    Foo         Bar

    This is displayed as:

    Foo Bar

    Foo         Bar

    Notice that most browsers will display the text in a 

     element in a monospace font — usually Courier. This can be over-ridden in CSS
    
      
    Horizontal Rules
    
      
    A horizontal rule can be inserted with 
    . Like 
    , this element doesn't have an end tag. It will look something like this:
    
      
    
      
    Block Semantic Elements
    
      
    Without you even knowing it, I've already covered most of these: the 6 levels of headings and 
    . There are two more that are worth introducing though.
    
      
    
      
    We use the 
     element for marking up contact information often found at the bottom of pages. For example:
    
      
    
Tony Blair
    
10 Downing Street
    
London
    
England

    
      
    This may be shown in browsers in italics, but can be styled to look however you like. Here's how the code above is displayed in your browser:
    
      
    
        
    
          Tony Blair
    
          10 Downing Street
    
          London
    
          England
        
    
      
    
      
    
      
    This is an element for quoting larger chunks of text than it would be appropriate to use  for. Here is an example:
    
      
    
  The following is a quote from A Dream Of Armageddon by H. G. Wells:

    

    
  
    
    As he rode, he picked his way amidst stranded masses of web. For some
    reason there were many dead spiders on the ground, and those that
    lived feasted guiltily on their fellows. At the sound of his horse's
    hoofs they fled.
  
    
  
    
    Their time had passed. From the ground without either a wind to carry
    them or a winding sheet ready, these things, for all their poison,
    could do him little evil.  He flicked with his belt at those
    he fancied came too near. Once, where a number ran together over
    a bare place, he was minded to dismount and trample them with his boots,
    but this impulse he overcame. Ever and again he turned in his saddle,
    and looked back at the smoke.
  
    
  
    
    "Spiders," he muttered over and over again. "Spiders! Well, well. . . .
    The next time I must spin a web."
  
    

    
      
    In your brower it looks something like this, although remember that different browsers will display it differently.
    
      
    
        
    The following is a quote from A Dream Of Armageddon by H. G. Wells:
    
        
    
          
    As he rode, he picked his way amidst stranded masses of web. For some reason there were many dead spiders on the ground, and those that lived feasted guiltily on their fellows. At the sound of his horse's hoofs they fled.
    
          
    Their time had passed. From the ground without either a wind to carry them or a winding sheet ready, these things, for all their poison, could do him little evil. He flicked with his belt at those he fancied came too near. Once, where a number ran together over a bare place, he was minded to dismount and trample them with his boots, but this impulse he overcame. Ever and again he turned in his saddle, and looked back at the smoke.
    
          
    "Spiders," he muttered over and over again. "Spiders! Well, well. . . . The next time I must spin a web."
    
        
    
      
    
      
    You'll notice that effectively, 
     indents text in most browsers. Do not be tempted to use it for general purpose indentation — you can use the CSS margin-left for that! 
     should only be used for genuine quoting — and only if you are quoting one or more paragraphs.
    
      
    The cite= attribute specifies a web page or other resource that you are quoting from. The current generation of browsers just ignores it, but it's worth adding this information anyway, as future browsers may be able to look up references this way.
    
      
    Tables
    
      
    Tables are useful for marking up tabular data (like spreadsheets). In HTML, tables must start with  and end with 
    . Between those you add one or more table rows, which start with  and end with . Then, each table row should contain one or more table cells, which start with  and end with . For example:
    
      
    
  
    
    One
    Two
  
    
  
    
    Three
    Four
  
    

    
      
    This looks a bit like this:
    
      
    
        
    
          One
          Two
        
    
        
    
          Three
          Four
        
    
      
    
      
    Adding More Structure
    
      
    Many tables can be logically divided into a header, a body and a footer. You can wrap the header in  and , the body in  and  and the foot in  and . Counter-intuitively, you should arrange these: header, footer then body; not header, body then footer. For example:
    
      
    
  
    
    Month  A  B   C
    
      
  
    
    Total  52 5   1
    
      
  
    
    Jan    12 2   0
    
    
    Feb    17 3   1
    
    
    Mar    23 0   0
    
      

    
      
    This will look something like this:
    
      
    
        
          
    
            Month
            A
            B
            C
          
    
            
        
          
    
            Total
            52
            5
            1
          
    
            
        
          
    
            Jan
            12
            2
            0
          
    
          
    
            Feb
            17
            3
            1
          
    
          
    
            Mar
            23
            0
            0
          
    
            
      
    
      
    Even More Structure
    
      
    For table cells that contain headings, we can use  and  instead of  and .
    
      
    We can add captions to the table using  and  which should be put before any of the table rows.
    
      
    We can add a summary of the table contents using the summary attribute. Extending the example above we get:
    
      
    
  Sales figures for 2003 Q1
  
    
    Month A  B C
    
      
  
    
    Total 52 5 1
    
      
  
    
    Jan   12 2 0
    
    
    Feb   17 3 1
    
    
    Mar   23 0 0
    
      

    
      
    Which looks like:
    
      
    
        
          Sales figures for 2003 Q1
        
        
          
    
            Month
            A
            B
            C
          
    
            
        
          
    
            Total
            52
            5
            1
          
    
            
        
          
    
            Jan
            12
            2
            0
          
    
          
    
            Feb
            17
            3
            1
          
    
          
    
            Mar
            23
            0
            0
          
    
            
      
    
      
    There are plenty of other things that can be done with tables — for example it is possible to have cells that span more than one row or column — but this is as far as I'm going to take you. For more information, see the HTML 4.01 spec.
    
      
    In chapter 6, I plan to put everything we've learnt to far into practice. It's not written yet, but check back soon!