Step 11 – Lists

Last update: February 15 2019

Lists tags are so useful. They make information so easy to read! Create lists with HTML using one of the LIST-tags. There are three kinds.

In this step, you’ll learn them all:

All of them automatically add white space above and below the list. You always need to open the list, add list items and then close the list.

Oh, and BTW, if you’re looking for instructions about how to create a drop down list, please check the step about forms.

Numbered Lists

Learn how to code a list. Let’s start with a numbered list. We’ll add it to our index.html like this:

<html>
<head>
<title>my own homepage</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center><h2>A short introduction</h2></center>
<p>Nora Tol started offering webdesign services since the <u>middle of the 90s</u> with her
first company <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i> and, now,
with her second company,
<i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p><u>By growing demand</u>, she expanded her services with designing logos, hosting,
online marketing and even creating online content.</p>
<p>This is a short list of the services offered:
<ol>
<li> Web design</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>
</ol>
</p>

<center><p>Take a look at her website for more information.<br /><b><font size="4">Or get in
touch</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center>
</body>
</html>

OL stands for Ordered List. LI stands for List Item. So, every item you place between <LI> and </LI> is considered part of the list.

When you open the HTML file in a browser, you’ll see that numbers are automatically added before each item, like this:

  1. Web design
  2. Logo design
  3. Website hosting
  4. Domain registration
  5. Keyword research
  6. SEO
  7. Ad Campaigns

By default, it’ll start at 1. If you want the list to start with another number, simply add the attribute START: <OL START=”2″>. In this example, the list starts counting from 2.

You don’t have to use numbers for an ordered list. You can use the attribute TYPE to change to letters or roman numbers. Example: <OL TYPE=”A”> will create a list based on uppercase letters, in alphabetical order. These are your options:

I = uppercase roman numbers
i = lowercase roman numbers
A = uppercase alphabetical order
a = lowercase alphabetical order
1 = numbers (default)

In HTML5, you can also reverse the order of the list.

Bullet Lists

Replace the OL-tag with UL, like below and the numbers will become bullets:

<ul>
<li> Web design</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>

</ul>

UL stands for Unsorted List.

It looks like this in a browser:

  • Web design
  • Logo design
  • Website hosting
  • Domain registration
  • Keyword research
  • SEO
  • Ad Campaigns

You can replace the bullets with other types. These are the options you have:

<UL TYPE=”disc”>
<UL TYPE=”square”>
<UL TYPE=”circle”>

Description Lists

And lastly, there’s DL (Description List). This allows you to add a little bit of text to the list:

<dl>
<dt> Web design</dt>
<dd> Designing and developing professional (commercial) websites</dd>
<dt> Logo design</dt>
<dd> Designing logos for web and print</dd>
<dt> Web hosting</dt>
<dd> Includes WordPress hosting</dd>
<dt> Domain registration</dt>
<dd> In a variety of extensions</dd>
<dt> Keyword research</dt>
<dt> SEO</dt>

<dt> Ad campaigns</dt>
<dd> Using Facebook Ads or Google Ads</dd>

</dl>

<DT> is used to set the description title and <DD> for additional information (description data). It’s not required to add subtexts, as you can see in the example. The above code looks something like this when you view it in a browser:

Web design
Designing and developing professional (commercial) websites
Logo design
Designing logos for web and print
Web hosting
Includes WordPress hosting
Domain registration
In a variety of extensions
Keyword research
SEO
Ad campaigns
Using Facebook Ads or Google Ads

Nesting Lists

It’s possible to nest one list in another. For example:

<ol>
<li> Web design</li>
<ul>
<li>For WordPress</li>
<li>Custom editors</li>
</ul>
<li> Logo design</li>
<li> Website hosting</li>
<ul>
<li>Wordpress hosting</li>
<li>Joomla hosting</li>
</ul>
<li> Domain registration</li>
<li> Keyword research</li>
<li> SEO</li>
<li> Ad campaigns</li>
</ol>

As you can see, I’ve now nested an unsorted list within my ordered list. You can nest all lists.

Beyond Ordering Content

When you design various websites, you’ll find out the importance of lists in HTML. It’s not only used for making content visible. In combination with CSS, the LIST-tag is commonly used to create menus for site navigation.

Go to Step 12

Bookmark the permalink.

Comments are closed.