Hướng Dẫn Bulleted list HTML – Ý Nghĩa Là Gì ? Chi tiết

Kinh Nghiệm về Bulleted list HTML – Ý Nghĩa Là Gì ? Chi Tiết

Pro đang tìm kiếm từ khóa Bulleted list HTML – Ý Nghĩa Là Gì ? được Cập Nhật vào lúc : 2022-11-09 08:27:00 . Với phương châm chia sẻ Kinh Nghiệm về trong nội dung bài viết một cách Chi Tiết 2022. Nếu sau khi Read tài liệu vẫn ko hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Ad lý giải và hướng dẫn lại nha.

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.

Ordered list of students

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 .

Unordered TODO list

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:

Eat
Code
Sleep

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.

ordered list of items

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.

Eat
Code
Sleep

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.

Eat
Code
Sleep

Here’s the output:

If you want to use Roman numerals, use the value I for an ordered list with Roman numerals:

Eat
Code
Sleep

The output looks like this:

Check out the CodePen below to try other types:

Ordered List TypesHow 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:

Thirty
Thirty One
Thirty Two

The output looks like this:

Feel không lấy phí to play around with the start attribute using this CodePen:

start attribute

Incidentally, I have shared the same tips on recently. You may find some interesting discussion there as well:

Did you know, you can use the ‘start’ attribute with the HTML ordered list(ol) to start from a specific number?

By default, the ordered list starts from 1.

The output of the example below goes like this,

30. Eat
31. Code
32. Sleep#100DaysOfCode #DEVCommunity #html #CSS pic.twitter/sqB49wuK5L

Tapas Adhikary (@tapasadhikary) July 1, 2021How 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 trực tuyến resources to learn about web programming:

My Favorite Web Development Learning Sites
freeCodeCamp
CSS-Tricks
Traversy Media

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 không lấy phí to use this CodePen to change and run the code.

bullet pointsHow 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
freeCodeCamp
CSS-Tricks
Traversy Media

The output looks like this:

You can use the CodePen below to try out the same. Feel không lấy phí to modify it as you wish:

bullet points with linksTypes 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-styleEffectnoneThere will not be any bullets appearing in front of the list itemcircleA circular (hollow) bullet appears in front of the list itemdiscThis is the default filled circular bulletsquareA filled square bullet appears in front of the list itemunordered list styles

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.

Coding
An activity to keep you happy, even in sleep.
Gossiping
Can’t live without it.
Sleeping
My all time favorite.

The output looks like this:

Try out this CodePen to experiment further with description lists:

description list

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.

How to Create a Page Header with HTML List Elements

We’re almost the end of this tutorial. But I feel like it’s incomplete without 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: trang chủ, Products, and About Us. We will first create the HTML structure like this:

Logo
trang chủ
Products
About Us

Here we have taken an unordered list with three list items to define trang chủ, 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 ( 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.

headerBefore 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 (@tapasadhikary). Feel không lấy phí 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 design10 trivial yet powerful HTML facts you must know10 useful HTML5 features, you may not be using

Clip Bulleted list HTML – Ý Nghĩa Là Gì ? ?

Bạn vừa tìm hiểu thêm tài liệu Với Một số hướng dẫn một cách rõ ràng hơn về Clip Bulleted list HTML – Ý Nghĩa Là Gì ? tiên tiến và phát triển nhất

Chia Sẻ Link Download Bulleted list HTML – Ý Nghĩa Là Gì ? miễn phí

Bạn đang tìm một số trong những Share Link Down Bulleted list HTML – Ý Nghĩa Là Gì ? miễn phí.

Thảo Luận vướng mắc về Bulleted list HTML – Ý Nghĩa Là Gì ?

Nếu sau khi đọc nội dung bài viết Bulleted list HTML – Ý Nghĩa Là Gì ? vẫn chưa hiểu thì hoàn toàn có thể lại Comments ở cuối bài để Mình lý giải và hướng dẫn lại nha
#Bulleted #list #HTML #Nghĩa #Là #Gì