When should an ordered list actually be an ordered list in HTML?

Question

In HTML there are two basic elements to define a list:

• <ol>, representing an ordered list;
• <ul>, which represents a disorderly list;

But when, in fact, it makes sense to represent an ordered/disorderly list with such elements?

For example, the list of questions on the Stack Overflow homepage is organized in an orderly manner based on the date of the last change, from the most recent to the oldest. In my view, this represents an orderly list, because reversing the position of different questions within the list would break the order condition. Evaluating the page source code, I realized that the site uses <div> to represent the structure, with no attribute to assist in defining the order.

Analyzing the structure only by code it is impossible to define that the questions have such ordering, different if they were structured within an element <ol>, where I would make it clear that ordination exists.

In addition to this example, I could cite many others: list of posts on a blog, list of products in a virtual store - which could be ordered by price, popularity, sales, etc. Among all, it is difficult to see a page that defines such structures based on the elements <ol> or <ul>.

1. Is there any reason why it is impossible to create such a structure?
2. Use the <div> to represent the elements does not break the semantics, since it does not transpose the idea of ordering?

Answer 1

UL vs OL

UL

UL is a set of elements where the order does not matter to the understanding of the content, ie, regardless of the ordering of these elements the user will always be able to understand it. Ex. Imagine Netshoes where you can sort a list of items by value, color or brand. The order of these items does not interfere with the understanding of the content, so for this type of content a UL ("disordered" list) would be the most appropriate. I believe that any type of list that has a filter, that is, a list of elements that can be rearranged according to what the user wants, should be treated as a UL.

For example, the list of questions on the Stack Overflow homepage is organised in an orderly manner on the basis of the date of the last change, from the most recent to the oldest. In my view, this represents an ordered list...

The list of Stackoverflow questions would be the case of an unordered list, a UL, because it is a list where the order is not rigid, including vc can not have an ordered list that every hour the user can make a filter changing the order to his liking, for example Active or Unanswered Date. So the answers do not need to respect an order for understanding, and each Question can be seen as a single element, like Tennis in the case of Netshoes, are elements of the same group, but do not necessarily need an order.

OL

OL is an ordered list, the order of the contents of this list is directly linked to how the user will understand the message, and changing the order of this list can directly affect the understanding of the content.

In this type of list the elements have a fixed order that should not be changed, and usually do not have filters or other devices to reorder the content. Ex. the Index of a Book or the Recipe of a Cake, the order of preparation of the Cake for example is a list of tasks that must be followed to the letter. Just as changing the order of chapters in a Book can leave the user completely lost in history. So for this type of content the Sorted List OL is the most suitable, because there is a linearity governed in the order of the contents and elements.

Once the image is seen, all the steps of the preparation mode belong to the same group, but these elements need to be in a certain order to make sense to the user. Thinking precisely in the list of questions of Stackoverflow the OL would not be ideal, because the content is independent of the order to make sense, besides it is a list that the user itself can determine the ordering of the content, which would not justify the use of an OL.

The Semantic Side of History:

Now that it has become clear what is and when should be used each type of listing think about the semantics of things. Imagine a screen reader from a visually impaired user, or a search engine bot like Google. These two personas do not use vision to interpret the content they are accessing. A listing with a tennis set can be indexed in any order. A step-by-step listing of a given task should be followed in a given unchanging order. So if you declare a registration procedure using a UL, certainly the Crawler search or visually impaired user would have difficulties to follow the correct order of things, semantically in this case OL would make more sense for a software that reads the page code to the user.

That list has to follow an immutable order:

<ol>
    <li>Bata as claras em neve e reserve</li>
    <li>Misture as gemas, a margarina e o açúcar até obter uma massa homogênea</li>
    <li>Acrescente o leite e a farinha de trigo aos poucos, sem parar de bater</li>
    <li>Por último, adicione as claras em neve e o fermento</li>
    <li>Despeje a massa em uma forma grande de furo central untada e enfarinhada</li>
</ol>

This list does not need to be ordered, and can even be reordered without impairing the understanding of the content.

<ul>
    <li>Tênis Kappa Impact Masculino</li>
    <li>Tênis Mizuno Jet 2 N Masculino</li>
    <li>Tênis Asics Patriot 8 Masculino</li>
    <li>Tênis Olympikus Spirit 2 Masculino</li>
</ul>

The standard CSS style of the different type of listing helps the user understand the type of content they are accessing. An unordered list does not need numbering to sort the elements of the set, as this order matters little to the user. Already an ordered list is numbered, precisely to help the user to understand that there is a semantic order of things, and the elements must follow a certain order.

---

Grid View vs List View

Note that you should always take into account the content that will be presented to the user and how this content should be treated to offer the best use experience for those who access the information. An example of this is for example formatting the content in a List View or in a Grid View. I believe this is where most people choose to use a semantic list structure UL/OL or a system of Grid with Divs, The advantage of using Divs is that you don’t need to remove the default css from user-agente of the lists (Bullets and numbers), however vc loses the semantic value of the set of elements belonging to the same list.

If you are going to list the Netshoes for the customer the Grid View will be a more enjoyable experience for the user. Already for the cake preparation mode a type listing List View would make more sense than a Grid.

But how can we use a Grid View for a Sort List?

Several examples of this you can find in Assembly Manuals, Diagrams, etc. See that in this image we have a Sort List displayed in the form of Grid View.

Points to consider: Whether it’s a Grid or a List, think about the user experience (UX), and what’s the best way to pass this content. In the example above, with an airplane crashing, it is unlikely that someone will have time to read something, besides the more distant passenger can speak a different language... So an image listing is a great model for this situation. Always put yourself on the user side and always keep semantics in mind. Google considers this to be good practice and can even interfere with SEO and rankings of your site

Reference article where you can see the advantages and disadvantages of Grid View vs List View: https://uxplanet.org/mobile-ux-design-list-view-and-grid-view-8f129b56fd5b

Framework Factor

Often, mainly in Frameworks that have Grids like Bootstrap, Foundation or Materialize we need to distribute our content on Rows and Cols, for people who have no experience with CSS it is impossible to build a Grid View with UL/LI that follows the responsiveness of Grid System, I believe that is why we see many lists built with Divs until today...

Here for example is an example of a semantic list built with UL/LI using the Boostrap Grid.

[class*="col-"] {
 border: 1px solid red !important;
}
ul {
  list-style: none;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
  <ul class="row">
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
    <li class="col-xs-6 col-md-4"> conteúdo dentro de li </li>
  </ul>
</div>

---

DIV List and Accessibility

In the latter case, in a situation where you do not have the option to choose Lists and have to display your content on Divs you can use the attributes role to indicate to screen readers that this set of divs should be interpreted as a list. For this declare the container as role="list" and internal items such as role="listitem" .

Thus the semantics and accessibility becomes clearer, although we can not guarantee how screen readers will treat this content, since the attributes role are not yet an official standard and with full support from both the browser and the screen readers. You can find out more about this attribute in the official W3C documentation: https://www.w3.org/wiki/PF/XTech/HTML5/RoleAttribute

Example of semantic listing done with div:

<div role="list">
  <div role="listitem">dog</div>
  <div role="listitem">cat</div>
  <div role="listitem">sparrow</div>
  <div role="listitem">wolf!</div>
</div>