Why Should I Use 'Li' Instead of 'Div'

Why should I use 'li' instead of 'div'?

For semantic correctness. HTML has the ability to express lists of things, and it helps the Google robot, screen readers, and all manner of users who don't care solely about the presentation of the site understand your content better.

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

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.

div vs li when to use them

Yes, you can do anything (more or less) strictly with div tags (with exceptions, like forms and inputs, and images, and what not). But that's not the point.

First, specific tags have default css applied to them. li's have bullets, for example. You can change these, but in many situations, it's just easier to use the tag that has the style you're looking for.

But the most important reason is what's called "semantic markup", which is the concept that which element you use corresponds to a semantic meaning. li means it's a list of items, so even if you have no CSS applied (such as when a screen reader reads a page aloud for blind person) then it still has meaning.

DIV vs UL,LI performance

They're just tags. There's zero difference whatsoever between them DOM-wise; the only difference is in the rendering (CSS, which you can customize either way) and the meaning (semantics).

If you have a list of things, use a <ul>.

Should I use div's or ul li tags to Structure my HTML content

It really depends on the content; not what it may be in the future, but what it currently is.

If each item consists only of a link, don’t use a heading element (h2). A heading opens a new section, but there is no point in having a section if it contains no other content. Using a list probably makes sense here, assuming that the 6 items are in some kind of relationship (which seems to be the case, as they are in the same section).

<section>
  <h1>Section Title</h1>

  <ul>
    <li>Title One</li>
    <li>Title Two</li>
    <li>Title Three</li>
  </ul>

</section>

If an item contains more content, like a description or an image (i.e., it becomes a teaser), you might want to use a sectioning content element. The article element is typically appropriate here (e.g., for products, blog posts, etc.). Using a list in addition is possible, but, I think, not so common; I wouldn’t recommend it, unless you need an ordered list (e.g., for conveying the ranking in case each item is a search result).

<section>
  <h1>Section Title</h1>

  <article>
    <h2>Title One</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Two</h2>
    <!-- more content -->
  </article>

  <article>
    <h2>Title Three</h2>
    <!-- more content -->
  </article>

</section>

This structure cannot only be used for teasers, but even for "full content" items.

Advantage of using ul and li to style tabs versus using pure div inside div ?

Short and clear answer: Why should I use 'li' instead of 'div'?

Why should I use UL/LI in my HTML?

It is more semantically correct.

What you have above is an unordered list of languages. You should be using an unordered list of items (UL element with LI elements) to be semantically correct about it.

This also helps screen readers and other technologies that depend on correct semantics to work.

Form div vs ul how to choose?

<li> will work inside both <div> and <ul>, as you've noted. However the only acceptable child element of a <ul> is <li>, whereas practically anything can be a child of a <div>.

Otherwise, the differences are mainly semantic. If you have CSS that only affects lists, or simply to keep your lists distinct within the DOM, use <ul> (or <ol>). Use <div> when you require a more flexibile, generic container.

---

Related Topics