Html Continue Ordered List With Pictures
Listing items on a web page is a common task you'll have to do as a web developer. You may have to list shopping cart items, the order of students based on their grades, dogs with the loudest bark – and so on.
So you need to know the different ways you can list items using HTML. While you might think it's a trivial thing to learn, it's important. And it's one of the most commonly used features of HTML in web development.
In this article, you'll learn all about HTML listing elements, their properties, styling, and how to actually use them to create neat lists. I hope you find it helpful.
How to Make Lists in HTML
In HTML, we can list items either in an ordered or unordered fashion.
An ordered list uses numbers or some sort of notation that indicates a series of items.
For example, an ordered list can start with number 1, and continue through 2, 3, 4, and so on. Your ordered list can also start with the letter A and go through B, C, D, and so on.
Here is an example of an ordered list with students' names and marks.
On the other hand, we have unordered lists, like a TODO list for example. Here I am so passionate about coding that I skipped my breakfast 🤓.
There is one more type of list called a description list that we will learn as well below.
Now let's get into a bit more detail and see how to create each type of list in HTML.
How to Make an Ordered List with HTML
In HTML, we can create an ordered list using the <ol> tag. The ol in the tag stands for an ordered list. Inside each of the ordered list elements <ol> and <ol />, we have to define the list items. We can define the list items using the <li> tag.
Here is the complete HTML structure for an ordered list:
<ol> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol> The output of the above ordered list is:
So, we have the list of elements ordered with a number starting with 1 and incremented to 2 and 3. Try this CodePen and see if you can change and play around with using ol-li.
Types of Ordered Lists in HTML
What if you do not want to order your list by number? Instead, you want to order using the alphabet like A, B, C or a,b,c. You can do these by specifying the value of the type attribute of the <ol> tag.
You can order the list using A, B, C letters by passing A as the type value.
<ol type="A"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol> The output looks like this:
Similarly, you can use lower case letters like a as the type value to list the elements with a, b, c, and so on.
<ol type="a"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol> Here's the output:
If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:
<ol type="I"> <li>Eat</li> <li>Code</li> <li>Sleep</li> </ol> The output looks like this:
Check out the CodePen below to try other types:
How to Use the Start Attribute in HTML Lists
The <ol> element has an interesting attribute called start. You can specify a value to the start attribute to start the ordered list from a specific number.
Let's say you want to start the list with the number 30 instead of 1. You can specify the number 30 as the value of the start attribute like this:
<ol start="30"> <li>Thirty</li> <li>Thirty One</li> <li>Thirty Two</li> </ol> The output looks like this:
Feel free to play around with the start attribute using this CodePen:
Incidentally, I have shared the same tips on Twitter recently. You may find some interesting discussion there as well:
— Tapas Adhikary (@tapasadhikary) July 1, 2021
How to Make an Unordered List in HTML
Let's move over to unordered lists now. We use the <ul> tag to create an unordered list. As usual, we need to use the <li> tags within <ul> and <ul/> to create the list items.
The list items (li) inside the unordered list (ul) come with the default style of bullet points – so each of the list items is preceded by a black dot.
Let's create a list of my favorite online resources to learn about web programming:
My Favorite Web Development Learning Sites <div> <ul> <li>freeCodeCamp</li> <li>CSS-Tricks</li> <li>Traversy Media</li> </ul> </div> The output looks like this:
You can see the bullet points for each of the list items above, but you can customize them. We'll learn that too.
But before that, feel free to use this CodePen to change and run the code.
How to Use Bullet Points with Links in HTML Lists
We can use the links (anchor tag <a>) in the list items (<li> tag) to link each of the items to any internal or external web pages.
Here is an example that shows you how to link each of the web programming resources to their respective websites:
My Favorite Web Development Learning Sites <div> <ul> <li> <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a> </li> <li> <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a> </li> <li> <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a> </li> </ul> </div> The output looks like this:
You can use the CodePen below to try out the same. Feel free to modify it as you wish:
Types of Unordered Lists in HTML
As we discussed briefly, we can customize the bullet point style of an unordered list, which we will see in action now. We can do this using the CSS style property called list-style.
There are four main values of the list-style property that help us with this customization:
| list-style | Effect |
|---|---|
| none | There will not be any bullets appearing in front of the list item |
| circle | A circular (hollow) bullet appears in front of the list item |
| disc | This is the default filled circular bullet |
| square | A filled square bullet appears in front of the list item |
You can use the CodePen above to try out different list-style options.
Did You Know – There is a Description List, Too?
There is one more type of HTML list, but it's not used as often. It is called Description List.
We can define a description list using the <dl> tag element. Inside the <dl>..</dl> we need to define a description term using the <dt> tag. The term is usually some small text about something. Then, we can define the description descriptor to describe the term further using the <dd> tag.
Too much to digest? Let's see how it works with a code example.
Let's assume that we want to describe some information about coding, gossiping, and sleeping on our webpage. We can first define a <dl> tag. Now we define three pairs of <dt> and <dd> tags to describe coding, gossiping, and sleeping respectively.
<dl> <dt>Coding</dt> <dd>An activity to keep you happy, even in sleep.</dd> <dt>Gossiping</dt> <dd>Can't live without it.</dd> <dt>Sleeping</dt> <dd>My all time favorite.</dd> </dl> The output looks like this:
Try out this CodePen to experiment further with description lists:
You must be wondering, why don't we use this type of list much? Well, you can create this structure using the unordered list (ul), list items (li), and the CSS styles.
But if you consider the HTML semantics, you should give a place to description lists in your code when you have a good use-case for it.
We're almost at the end of this tutorial. But I feel like it's incomplete without at least one use-case example of the HTML lists and tags. My favorite one is listing the items in the header of a web page.
Let's create a very basic header with a sample logo and three links: Home, Products, and About Us. We will first create the HTML structure like this:
<nav> <span class="logo">Logo</span> <ul> <li><a href="#/home">Home</a></li> <li><a href="#/products">Products</a></li> <li><a href="#/about">About Us</a></li> </ul> </nav> Here we have taken an unordered list with three list items to define Home, Products, and About Us links. You'll also notice a span element with the text Logo which indicates it is a logo. We can use a suitable image there, based on our needs later.
So far, the header should look like this:
Well, this is not what we want. So next we will write a few CSS rules and properties to make it look like a page header (at least close to it).
nav{ background-color: #273032; color: #FFF; padding: 10px; display: flex; } .logo { background-color: blue } ul { margin: 0px; } li { list-style: none; display: inline; margin-right: 0.2rem; } a { color: pink; } Now it is much better and looks closer to a realistic page header.
Again, you can use this CodePen to change and try out things with the header.
Before We End...
That's all for now. I hope you've found this article insightful, and that it helps you understand HTML lists more clearly. You can find all the examples together in this CodePen Collection.
Let's connect. You will find me active on Twitter (@tapasadhikary). Feel free to give a follow. I've also started sharing knowledge using my YouTube channel, so you can check it out, too.
You may also like these articles:
- 10 DevTools tricks to help you with CSS and UX design
- 10 trivial yet powerful HTML facts you must know
- 10 useful HTML5 features, you may not be using
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Source: https://www.freecodecamp.org/news/html-list-how-to-use-bullet-points-ordered-and-unordered-lists/
0 Response to "Html Continue Ordered List With Pictures"
Post a Comment