Clever Geek Handbook

What's the point of using ordered lists if we pick them up until they behave like regular divs?

I found myself using unordered lists for breadcrumbs, menus, thumbnails, blog article lists, form fields, etc.

I remove the decoration <li>

, change it display

for horizontal-vertical positioning, insert text, links, spans, imgs, links, paragraphs, headings, form inserts, etc. in between <li>

, and a bunch of css styles are applied that don't fit the spirit of the original concept

I am adding semantics to my classes.

And lately I've started to include roles here and there, so I have role="list"

or role="menu"

.

Even if I view breadcrumbs as a list, for example (there is a lot of discussion about this), what's the point? If I deny the original behavior of the original HTML tag!

The only time I see them as a "list" is when the CSS styles are not loading properly. But since they are not meant for "real lists", the resulting HTML is somehow wrong, is it?

So, I'm tempted to convert everything <ul><li>

to <div>

if I don't need a "real list".

What can I find in the syntax or behavior <ul><li>

that is preventing me from doing this?

UPDATE:

The question almost answers in Why should I use 'li' instead of 'div'? but I want to insist on future readers what I learned from reading this answer: A list is a list. It doesn't matter that a simple html list design looks like a product list. A list is a list.

In some cases, some abuse can occur, such as using lists to compose a form.

Instead of replacing lists by div, I'm going to replace some divs by lists.

+3


source to share


1 answer


It would be a mistake to think of hypertext markup as a framework that describes a two-dimensional visual layout. Is not. All HTML code tells the user agent (usually the browser) what role each element in the document plays.

Too often HTML is (misunderstood) as a 2D Desktop Publishing tool because all browsers apply default visual styling and visual layout to elements. The layman then misidentifies these visual styles as inherent properties of the element.

But this is not the case.

When you first come across HTML, many people can be forgiven for thinking that it <h1>...</h1>

creates a Times New Roman, 16pt Bold, and that <h2>...</h2>

creates a Times New Roman, 14pt, Bold.

But this is not HTML that describes how these elements should be displayed visually ... only the browser supports these visual styles by default.

Actually, all HTML files say:

<h1>...</h1>

- heading of the first level.

<h2>...</h2>

- second level heading.



What is it.

How these first and second level headings appear visually on a desktop screen, on a smartphone, on a monochrome printout - or how they sound in an aura (in the case of screen readers) - are entirely environment-specific - style-specific declarations - or, in the absence of a stylesheet, all the way down to the default User-Agent styles.

In your question, you are talking about the behavior of elements.

But for the vast majority of elements, the only behavior in the markup of an HTML element is to describe the role that element plays in the document.

So ... if an element in a document is best described as an ordered list - which, as you correctly point out, is probably the most appropriate description for any number of page elements, including:

  • crackers
  • menu bar
  • thumbnails
  • blog article lists
  • form fields

then notify the User-Agent by marking the item as

<ol>...</ol>
+3


source






More articles:


All Articles