Today’s HTML topic is on creating lists. Lists can be very handy when writing a blog post or copy for your website. Readers tend to scan content online so giving them the information in points can be better.
Why lists are important
Okay, I know lists are boring and learning how to create a list isn’t really something you’re interested in. Most of you will probably never use lists in your blog post, but lists don’t have to be
- a
- list
- like
- this.
They can actually be used to align other things – like navigation bars and social media icons which is where it get’s exciting! So once you now the basics of creating a list, you can apply that to other elements on your blog.
About HTML Lists
In HTML, numbered lists are called ordered lists and bulleted lists are called unordered lists. Lists are nested HTML – this means that there is a tag that identifies the type of list like numbered <ol> or bulleted <ul> and then within that there is another tag that creates an item in the list <li>. Lists are also container tags which in the Basics of HTML we learned that that means they have an opening and closing tag.
Type 1 – Create an ordered/numbered list
An ordered list shows the list items in order of 1, 2, 3, etc. Firstly we need to tell the browser what kind of list it is, so for an ordered list we use <ol> so we add an opening and closing tag that looks like
<ol>
</ol>We then add our list items in between this using <li> to open and </li> to close.
<ol>
<li> First List Item </li>
<li> Second List Item </li>
</ol>and that would look like this
- First List Item
- Second List Item
You can add as many list items as you need to. The browser will automatically number them in the order they’ve been written in. Just as a FYI point, you can also add links or images to list items – see the Basics of Links and Adding a link to an image. We don’t tend to add images for a normal list but keep this in mind for when you want to add social media icons or an image based navigation menu. I’ll discuss these in a future post but here’s an example just to see how that works.
<ol>
<li> <a href="#">First list item which is now a link</a> </li>
<li> <img src="DIRECT IMG LINK" alt="Second list item which is now an image"></li>
<li> <a href="LINK"><img src="DIRECT IMG LINK" alt="Third list item which is now an image linked to another URL"></a> </li>
</ol>
Type 2 – Create an unordered/bulleted list
An unordered list shows the list items in bullet points. To create an unordered list is pretty much the exact same only instead of using <ol> we use <ul> to tell the browser that it’s an unordered list.
<ul>
<li> First List Point </li>
<li> Second List Point </li>
<li> Third List Point </li>
</ul>- First List Point
- Second List Point
- Third List Point
Add a list to our webpage
Following on from the exercise of creating a webpage in part 1 of this series, we’d created a blank HTML page in a text editor and added the following HTML to it.
<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>
<h1>Learning HTML</h1>
<p>Hello!</p>
<p>This is my first webpage.</p>
<p>I'm learning about - <br>
HTML Basics and Tags<br>
Headings<br>
Paragraphs<br>
Line Breaks<br>
Horizontal Rule</p>
<br>
<hr>
<p>HTML BASICS by xomisse.</p>
</body>
</html>So now let’s add in some lists, as shown in pink in the following code.
<html>
<head>
<title>MY FIRST WEBPAGE</title>
</head>
<body>
<h1>Learning HTML</h1>
<p>Hello!</p>
<p>This is my first webpage.</p>
<p>I'm learning about - <br>
HTML Basics and Tags<br>
Headings<br>
Paragraphs<br>
Line Breaks<br>
Horizontal Rule</p>
<p>I'm also learning about creating lists using numbers like so -
<ol>
<li>First item on the list.</li>
<li>Second item on the list.</li>
<li>Third item on the list.</li>
<li>Fourth item on the list.</li>
</ol>
</p>
<p>...and bullets like so -
<ul>
<li>First point on the list.</li>
<li>Second point on the list.</li>
<li>Third point on the list.</li>
<li>Fourth point on the list.</li>
</ul>
</p>
<br>
<hr>
<p>HTML BASICS by xomisse.</p>
</body>
</html>
I’ve wrapped each list in a paragraph although it’s not necessary to do so. Save your file as example.html and open it in a web browser to see the results. You can start adding lists to your blog posts manually and experiment with adding social media icons and navigation menu bars this way.
4 responses to “Creating and using different types of HTML lists – Basics of HTML #4”
I’m truly enjoying your tutorials. Your explanations are so easy to follow.
Hugs,
Monny
Thank you Monny, I’m glad you’re finding them helpful!
Hi,
I recently found your blog, and it has been a great help to me. I used your tutorials to help with my new blog. Also I’m enjoying your HTML series. You are very talanted and explain topics clearly.
All the Best
Renata
Awh thank you so much 🙂 really glad you’re enjoying them!