3

I found my self using unordered lists for breadcrumbs, menu bars, thumbnails, blog article lists, form fields, etc.

I strip the decoration of the <li>, change its display for horizontal-vertical positioning, insert text, links, spans, imgs, links, paragrahs, titles, form inputs, etc. between the <li>, and a bunch of css styles are applied that do not correspond to the spirit of the original concept

I add the semantics in its classes.

And lately I have started to include roles here and there, so I have role="list" or role="menu".

Even if I consider, for example, the breadcrumbs as a list (there are a lot of discussion about it), whats the point?, if I am denaturalizing the original behavior of the original HTML tag!

The only moment I see them as a "list" is when css styles are not properly loaded. But as they are not intended to be "real lists", the resulting HTML is somehow wrong, isn't it?

So I am tempted to convert all <ul><li> to <div>, unless I need a "real list".

What can I find in <ul><li> syntax or behavior that prevents me to do that?

UPDATE:

The question is almost answered in Why should I use 'li' instead of 'div'? but I want to insist, for future readers, in something I have learned reading that answer: A list is a list. It doesn't matter that the plain html design of a list seems like a grocery list. A list is a list.

Nevertheles, some abuse can happen, for example using lists to layout a form.

Instead replacing lists by divs, I am going to replace some divs by lists.

Community
  • 1
  • 1
Nacho B
  • 1,573
  • 1
  • 12
  • 16
  • 2
    "I add the semantics in its classes." There's your first mistake - classes have zero semantic value.
    is as semantically meaningful as
    - which is to say, not at all.
     – BoltClock Apr 23 '15 at 11:30
  • possible duplicate of http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div – Pawan Apr 23 '15 at 11:31
  • `
      ` is an *un*ordered list.
     – JJJ Apr 23 '15 at 11:31
  • 2
    Also, a list of menu items is still a list. It doesn't go against the "original concept." – JJJ Apr 23 '15 at 11:32
  • Use a list, if you want a list. Don't think about the styling. If it's content is in fact a list ( of subpages for example ) use a list. – TheFrozenOne Apr 23 '15 at 11:33
  • 2
    HTML is about the elements content, not about the look. – TheFrozenOne Apr 23 '15 at 11:33
  • 3
    ^ Tweaking a list element until it *looks* (not behaves) like a div doesn't change the fact that it is still a list element at heart. – BoltClock Apr 23 '15 at 11:34
  • already justified here http://stackoverflow.com/questions/549689/why-should-i-use-li-instead-of-div – Sunil Kumar Apr 23 '15 at 11:37
  • 1
    Not everybody can see that your list is styled (or not) as a `div`. Screen reader users don't know how you display the list, but they know it's a list. – Alvaro Montoro Apr 23 '15 at 11:57

1 Answers1

3

It would be erroneous to think of Hypertext Markup as a framework describing 2-dimensional visual layout. It does not. All HTML does is tell the User-Agent (normally the browser) what role each element plays in the document.

All too often, HTML is (mis-)understood as a 2-dimensional Desktop Publishing tool because all browsers apply default visual styles and visual layout to elements. The layperson then mis-attributes those visual styles, considering them properties inherent to the element.

But they are not.

When first encountering HTML, a lot of people can be forgiven for thinking that <h1>...</h1> creates a headline in the Times New Roman font, bold, 16pt and that an <h2>...</h2> creates a headline in the Times New Roman font, bold, 14pt.

But it's not the HTML which describes how those elements should display visually... the browser alone is responsible for applying those default visual styles.

On it's own, all HTML does is say:

<h1>...</h1> is a first-level heading.

<h2>...</h2> is a second-level heading.

That's it.

How those first and second level headings then appear visually on a desktop screen, on a smartphone, on a monochrome print-out - or how they sound aurally (in the case of screen-readers) - is entirely down to the medium-specific stylesheet declarations - or, in the absence of a stylesheet, entirely down to the User-Agent's default styles.

In your question, you talk about the behaviour of elements.

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

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

  1. breadcrumbs
  2. menu bars
  3. thumbnails
  4. blog article lists
  5. form fields

then inform the User-Agent by marking up the element as

<ol>...</ol>
Rounin
  • 27,134
  • 9
  • 83
  • 108