CODEWITHSUNDEEP
html
user2898051
user2898051

Reputation: 99

Do you have to use li with ul? HTML Standards

I'm using ul tags in conjunction with css, and, I got the visual effect I wanted from just the ul tags alone.

So I was planning to not use the li tags. But I wasn't sure if that was appropriate in HTML coding standard since I read ul and li tags are always suppose to be used together.

Thanks for the help!

<div class="featured_list">
           <ul>
              <a id="f1Link" href="" class="">
                 <div class="image_container"> <img id="f1Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f1Title"></h2>
                    <h4 id="f1Stock" class=""></h4>
                 </div>
              </a>
              <a id="f2Link" href="" class="">
                 <div class="image_container"> <img id="f2Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f2Title"></h2>
                    <h4 id="f2Stock" class=""></h4>
                 </div>
              </a>
              <a id="f3Link" href="" class="">
                 <div class="image_container"> <img id="f3Pic" src="" alt=""> </div>
                 <div class="info">
                    <h2 id="f3Title"></h2>
                    <h4 id="f3Stock" class=""></h4>
                 </div>
              </a>
              </ul>
           </div>

Upvotes: 1

Views: 2714

Answers (2)

Nicky McCurdy
Nicky McCurdy

Reputation: 19554

To answer your question directly, yes, you need to use li with ul. The W3C HTML Validator show this error with your code: "Element a not allowed as child of element ul in this context." (There were also other errors which I removed for brevity.)

If your content is not a list, you shouldn't be using ul. If it is a list, you need to put lis in it for it to be semantically correct.

You will probably want to use a ul with lis inside of it, but with inline styles. Here's an example:

/* Inline list items */
.list-inline {
  padding-left: 0;
  margin-left: -5px;
}
.list-inline > li {
  display: inline-block;
  padding: 0 5px;
}
<ul class="list-inline">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Note: Styles borrowed from Bootstrap's type.less.

Upvotes: 2

dehrg
dehrg

Reputation: 1741

Zero or more li elements is the only permitted content for a ul element according to the spec.

Source: http://www.w3.org/TR/html-markup/ul.html

If you have a list, use the li elements and style them. If all you want from the ul is margins and padding and your data is not a list, you would be better off using a styled div.

Upvotes: 2

Related Questions