Jump to content

Help with HTML lists please


Penny

Recommended Posts

Hi

Raw beginner here.

I'm looking at <ul> and <ol> and wondering why there is a difference in how the style is coded in the examples given:

<ul style="list-style-type:disc;">

<ol type="A">

Are these interchangeable or is there a reason why they're different? 

Thanks

 

Link to comment
Share on other sites

They work the same, but it preferable to use CSS as mentioned on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

Quote

Unless the type of the list number matters (like legal or technical documents where items are referenced by their number/letter), use the CSS list-style-type property instead.

CSS should be in an external stylesheet rather than in a style attribute.

Link to comment
Share on other sites

Hi there @Penny! The <ol> tags use type=""  attribute to define the ordination. This is a very important concept, and a basic one. <ul>s don't work with the attribute type="".

Ordered/Unordered Lists can work with the property list-style-type="" because they are lists whatsoever, but ordered lists must have a type of...ordination item, A, a, i, I or  number.

Unordered List (The order doesn't matter, we don't need indicators of an item's priority.) || Ordered List (The order matters, we need indicators of an item's priority.)
. Hey                                                                                                                                                    a) This is more important to know before all;                                           
. There                                                                                                                                                 b) Ordered lists are often legal or technical documents like @Ingolme pointed;
. Hello                                                                                                                                                  c) That's why we need importance' scale.

Hope I could help! https://www.w3schools.com/html/html_lists.asp 

 

Edited by Ghostdancing
Link to comment
Share on other sites

The list is already ordered, you would only need to specify the type if the type itself really matters. By default it's numbers and most of the time that's good enough.

Link to comment
Share on other sites

On 1/10/2020 at 11:14 PM, Ingolme said:

The list is already ordered, you would only need to specify the type if the type itself really matters. By default it's numbers and most of the time that's good enough.

It seems I didn't make myself clear. @Penny asked what are the differences and there are. Ordered lists require...ordination, let's look in the dictionary: The noun ordination comes from the Latin word ordinare, meaning “put in order.” 

Primary Meanings of 
ordination

1.
n
the act of ordaining; the act of conferring (or receiving) holy orders
2.
n
logical or comprehensible arrangement of separate elements

arrangement

an orderly grouping (of things or persons) considered as a unit; the result of arranging
 
A list look ordered because it follows a logical arrangement, in our brains, but we need a logical indicator of importance in code. <ul> can't receive the type="" attribute, because there are no itens that must become first,  <ol> receive type="" attribute. <ol> don't receive list-style-type, because it has to be ordered with A, a, I, i or a number, <ol> must sign wich item has priority. <ul> receive list-style-type because it has no ordered itens, they're just below each other.
Suppose you have to code something that only reads the second itens of lists.
Suppose you have to code something that reads the third itens of a list but only the lists that have the type="A".
Let's code.
Edited by Ghostdancing
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...