01. Lists

HTML provides ways of not only presenting text, but also data. The main forms of data presentation are lists and tables. We'll start by looking at lists, then move onto how to implement a table.

There are two main types of lists used in HTML. These are used to hold any group of related items.

Ordered Lists

Ordered lists have numbering and pertain to a certain ordered.

To specify an ordered list, use the <ol> tag to open the list, then use <li> tags for each list item.

 
<li>Learn HTML</li>
  <li>Learn CSS</li>
  <li>Learn JavaScript</li>
</ol>

Specifying list types

Note that you may specify a type attribute per list, which shows how the items will be numbered.

The possible values are "1" for numeric, "A" for uppercase letters, "a" for lowercase letters, "I" for uppercase roman numbers, and "i" for lowercase roman numerals.

In the example above we chose I, which makes are list items show as Roman Numerals.

Thus our output would look like this:

  1. Learn HTML
  2. Learn CSS
  3. Learn JavaScript

Unordered Lists

Unordered are lists with no order to them.

The <ul> tag is used for unordered lists. Just like in ordered lists, we use the <li> tag per each list item.

<ul style="list-style-type: disc">
  <li>Gym</li>
  <li>Tan</li>
  <li>Laundry</li>
</ul>

Specifying List Style Types

We can also customize the bullet points of an unordered list. Use the <style> attribute, then specify disc, circle, square or none for the list-style-type property.

  • Gym
  • Tan
  • Laundry

The "style" attribute

The style attribute is actually a shortcut to applying a CSS style. We will learn more properties you can change with the "style" attribute in our CSS tutorial, so hang tight!

Listception

To place a list within another, simply embed a list within another list.

<h3>Developing a website</h3>
<ul>
  <li>Front end technologies</li>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
 
  <li>Back end technologies</li>
  <ul>
    <li>PHP</li>
    <li>MySQL</li>
</ul>
</ul>

Developing a website

  • Front end technologies
    • HTML
    • CSS
    • JavaScript
  • Back end technologies
    • PHP
    • MySQL

Aching back from coding all day?

Prism Glasses

Aching back from coding all day? Try Back Problems

Ever feel achy from sitting crunched up on your computer table? Try lying down with these optical glasses that allow you to work on your laptop while lying flat on your back. This is the perfect solution with those with limited mobility or those who wish to prevent neck cramps and back strains.

$ Check price
4.454.45Amazon 4 logo(128+ reviews)

More Back Problems resources

Build modern and responsive webpages

JavaScript & JQuery

Build modern and responsive webpages Try Front-end

This book was written for anyone who wants to use JavaScript to make their websites a little more interesting, engaging, interactive, or usable. In particular, it is aimed at people who do not have a degree in computer science (well, not yet anyway).

$ Check price
39.9939.99Amazon 4.5 logo(385+ reviews)

More Front-end resources

Ad