XHTML Tutorial - Chapter 8: Lists

Another fairly common way to format text on the web, is by making bullet lists for things you want to count up. You can also make numbered lists, although they are generally speaking a lot less common. An example of both could for example look something like this:

I really like:

  • Coffee
  • Broccoli
  • Icecream

And I prefer them in this order:

  1. Icecream
  2. Coffee
  3. Broccoli

So how do we achieve this? Well, lists come in two forms: unordered lists (the first one) and ordered lists (the last one) and their tags are <ul> and <ol> respectively. But - the time has now come to also introduce yet another slightly new concept on our HTML journey - something I will for the sake of this tutorial call multi-tag elements.



So what do I mean by multi-tag elements? Well, the difference with lists compared to the previous elements we've learned, is that while the list itself can be said to be a single object on your screen, it's also dependant on other "internal" objects within the <ul> or <ol> tags to provide all of its individual lines of content. This content is entered in list item tags, <li>, and they should always be used together with the <ul> or <ol> tags as one object wherever they appear on the page.

Makes sense? If not, perhaps looking at the code for the coffee, icecream and broccoli example above will help clear things up:

<p>I really like:</p>
<ul>
  <li>Coffee</li>
  <li>Broccoli</li>
  <li>Icecream</li>
</ul>

<p>And I prefer them in this order:</p>
<ol>
  <li>Icecream</li>
  <li>Coffee</li>
  <li>Broccoli</li>
</ol>

So to summarize: the <li> tags are used to set up all the items you want presented in a list, and the <ul> or <ol> tags are used to "wrap around" the <li> tags and let the browser know if it's an unordered (bullets) or ordered (numbers) list we're dealing with.





< Previous: Images

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2021 EagleOwl