Markup Languages - Lists Again

Click here to return to the 123WORDPRESS.COM HTML Tutorial section.
Previous: Markup Language - Anchors <br />Original source Chapter 8 Let's talk about lists again. In Chapter 1, we discussed several ways to mark lists and studied the benefits of marking them as unordered lists with <ul> and <li>. This method can identify the structure of the list, ensuring that all browsers and devices can display its content correctly, and also allows us to add various styles to it with CSS.
I don't intend to fill a whole book with all the ways to mark lists for dealing with individual problems in various contexts, but I do intend to devote a separate chapter to a few other kinds of lists besides unordered lists. I'll look at a few situations in which it's appropriate to use a list.
Checklists are a powerful tool for organizing your page structure, adding meaning to individual items so you can style them individually with CSS later.
Let's first look at numbered bullet lists and two ways to mark up such lists. You can probably tell at a glance which method is more beneficial, but I'll walk through this example again to emphasize the importance of structured markup and using the right tool for the job. Which is the best way to mark up a numbered bullet list?
Let's say you want to label a checklist of steps, with each item preceded by a number. We'll look at two different ways to accomplish this, and why one method is better than the other. Method A: Order in Chaos

<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the onions for 3 minutes.</li>
<li>3. Add 3 cloves of garlic.</li>
<li>4. Cook for another 3 minutes.</li>
5. Eat.
</ul>

The previous list is probably one of the worst recipes in culinary history. But it is quite suitable as a simple example. It might be better with some salt and eggs, or... Anyway, back to the topic.
Approach A We chose to mark these steps as an unordered list so that we get all the benefits we mentioned in Chapter 1. We give the content structure, know that most browsers, screen readers, and other devices will handle this content correctly, and we can easily style it with CSS later. Great! But... Numbers Game Since this is a numbered list, we put numbers before each item and a period after the number to indicate the order of each step. But what if we need to add a new step between step 2 and step 3 later? We would then have to renumber all the items after the new step (manually). For this list, this is not a big deal, but if you are editing a list with 100 items, the process would become tedious. Bullet Points Appear Since we marked the structure in this example as an unordered list, you will see a bullet point before each numbered item (as shown in Figure 8-1). You may like the bullet points, but if you don't like them, you can certainly remove them with CSS, but you will definitely see them again when you browse this list without CSS.

Figure 8-1, the result of method A when the browser turns off CSS reading. There is a simpler, more meaningful, and easier to maintain method, let's look at method B. Method B: Ordered List

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

I'm sure this is the approach most people take, but that doesn't mean we haven't used approach A at some point or another for some reason. <ol> stands for "ordered list", so semantically we're using the right element to solve the problem at hand. What else is special about approach B? Automatic numbering You may have noticed that we don't have to manually number each list item. When using <ol>, numbers are automatically generated in order. If our list of steps contains more than 100 items and we need to insert a few new steps in the middle, we can simply insert new <li> items at the right position, and the browser will automatically renumber them. It's like magic.
If we use method A, we would need to manually fix all the numbers as we insert each item, and I can think of more interesting things to do...
Figure 8-2, Version 11 of the browser shows the effect of method B, with numbers automatically added before each step.

Figure 8-2 The browser displays the effect of method B. A pleasant wrapper, another advantage of method B is that when a long list item wraps, it will be indented behind the generated number, while method A will fold under the number (Figure 8-3)

Figure 8-3 Comparison of the line-breaking effects of method A and method B List Type Although the default numbering style for ordered lists is usually Arabic numerals (1,2,3,4,5, etc.), we can change the numbering style by using the CSS list-style-type property. list-style-type can be selected from the following: decimal: 1,2,3,4,... (usually the default value) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: no numbering So, for example, if we want method B to produce uppercase Roman numbers, we can achieve this with the following CSS:

ol li {
list-style-type: upper-roman;
}

Figure 8-4 shows how method B looks in the browser with this CSS. Our list of steps is now numbered with Roman numerals instead of the default Arabic numerals. Of course, the labeled parts are still exactly the same. Change your mind? Just make a few small changes and use the other styles listed above to change the numbering method of the list to your preference.

Figure 8-4 Ordered list using Roman numerals
HTML type attribute: Some people may have used the type attribute directly in the <ol> tag to change the numbering of the list to Roman numerals, English letters, etc. However, in order to support the CSS rules mentioned earlier, the use of the type attribute has been deprecated since the HTML 4.01 standard. Therefore, you should no longer use the type attribute and should use CSS instead.
We'll style this ordered list with CSS later in the extended tip. But for now let's look at another example of the list type.

Previous Page 1 2 3 Next Page Read More

<<: Detailed analysis of each stage of nginx's http request processing

>>: Summary of how JS operates on pages inside and outside Iframe