CODEWITHSUNDEEP
javascripthtmlcss
Tiberiu C.
Tiberiu C.

Reputation: 3513

Why webmasters use `ul/li` instead of `div`s for layout?

As far as I know ul / li are typography specific tags, intended to format text as a list (while search engines love semantic tags).

My big question here is why Web Masters prefer to use lists solution (ul/li) where is an obvious case of a layout (div) solution, preferring to modify a lot of style for list semantic tags making it look like a div solution?

Are they just mistakes of use or I'm missing important facts here?

I'm asking this because, in many cases this is valid for a lot of widget plug-ins out in wild, which generate the html code dynamically (via JavaScript), even though some search engines don't support (or have limited support of) JavaScript. ex : FlipClockJs, Bootstap Components (carousel, nav, pagination), etc.

Upvotes: 10

Views: 5198

Answers (4)

Mia Sno
Mia Sno

Reputation: 947

Lists are good for defining hierarchical navigation and submenu items. They are preferred in this case for the fact that it can be easier to target them with styling. Webmasters also prefer using lists also because they are accessibility-friendly for screen-readers. However, now <nav> is accessible friendly too. I may be the lone devil's advocate here by saying they are not as important to front-end as they used to be. Even as semantic markup.

Upvotes: 1

Rob
Rob

Reputation: 15160

I had never given any thought to the idea of lists being typographic specific before but this question made me wonder if lists were inappropriate for layout. The HTML5 spec doesn't say anything that I could immediately find to agree with that but one aside is in the li specification:

While it is conforming to include heading elements (e.g. h1) inside li elements, it likely does not convey the semantics that the author intended. A heading starts a new section, so a heading in a list implicitly splits the list into spanning multiple sections.

This gives rise to questioning whether lists are appropriate for all layout situations. If you are using lists to show a group of products, and those products are written using sectioning elements, does that put them under the problem called out by the quote above?

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074268

ul/ol/li are not typographic tags, they're semantic tags (tags that have a meaning). Lists are commonly used for lists of navigation links and similar because:

  1. Conceptually — indeed, semantically — a navigation menu is a list of places you might want to go, after all; and

  2. The unstyled version is easily understood (as a list)

E.g., styled:

ul {
  display: inline-block;
}
li {
  display: inline-block;
  border: 1px solid black;
}
li > a {
  display: block;
  cursor: pointer;
  text-decoration: none;
  padding: 1px;
}
li > a:hover {
  background-color: #eee;
}
<ul>
  <li><a href="#this">This</a></li>
  <li><a href="#that">That</a></li>
  <li><a href="#the-other">The other</a></li>
</ul>

Unstyled:

<ul>
  <li><a href="#this">This</a></li>
  <li><a href="#that">That</a></li>
  <li><a href="#the-other">The other</a></li>
</ul>

Upvotes: 6

Quentin
Quentin

Reputation: 943515

As far as I know ul / li is are typography specific tags, intended to format text as a list (while search engines love semantic tags).

They are not. They are semantic elements that say the content is a set of list items where the order is not of particular importance.

My big question here is why Web Masters prefer to use lists solution (ul/li) where is an obvious case of a layout (div) solution

Divs are not related to layout. Layout is the job of CSS. The elements used should be selected based on the semantics they convey, then CSS should be applied to them to give the desired rendering.

A div element is an element of last resort. It has no semantics and should be used when HTML doesn't have an element with appropriate semantics for the content.

Upvotes: 12

Related Questions