0

I am creating a skills section in my website which is rendering inline. I could render that using li instead of divs so what will be the advantage of li over div. I can render that easily by using div.

With Div:

.skills {
  
  display:flex;
  
}
.skill 
{
  padding: 5px;
}
<div class="skills" style="--animState:playing;">
   <div class="skill skill--code" style="--p:92%">
      <div class="bar"></div>
      <span>HTML5 CSS3</span>
   </div>
   <div class="skill skill--code" style="--p:83%">
      <div class="bar">
      </div>
      <span>JavaScript</span>
   </div>
   <div class="skill skill--code" style="--p:65%">
      <div class="bar"></div>
      <span>NodeJS</span>
   </div>
   <div class="skill skill--code" style="--p:52%">
      <div class="bar"></div>
      <span>Java</span>
   </div>
   <div class="skill skill--soft" style="--p:87%">
      <div class="bar"></div>
      <span>Adobe Photoshop</span>
   </div>
   <div class="skill skill--soft" style="--p:62%">
      <div class="bar"></div>
      <span>Adobe Premiere</span>
   </div>
   <div class="skill skill--soft" style="--p:53%">
      <div class="bar"></div>
      <span>Adobe Illustrator</span>
   </div>
</div>

ul.skills {
  list-style:none;
  display:flex;
}

.skills li
{
  padding: 5px;
}
<section>
  
  <ul class="skills">
    <li>
      Html Css 
    </li>
    <li>
      JS
    </li>
    <li>
      PHP  
    </li>
  </ul>
  
</section>

Both are giving the same results So what should i use and when should I use what?

Wasif Iqbal
  • 474
  • 1
  • 4
  • 17
  • 1
    `div` means a general block element. `li` means an item in a list. Are your skills items in a list, or just general block elements? – Sweeper Jun 23 '19 at 12:15
  • @Sweeper, i know the difference between them, but i want to know when to use which, as we can generate the same results with li also can do the same thing with div too. Please check my code snippet. – Wasif Iqbal Jun 23 '19 at 12:18
  • What I meant was, think about the semantics, not just the appearance. Imagine if someone has disabled CSS. Do you want them to see each skill as a block element, or as items of a list? – Sweeper Jun 23 '19 at 12:20
  • @WasifIqbal — Determining if something is a list or not is grammar, not programming. (And don't confuse "the same visual results" with "the same results" because that just means you haven't thought about screen readers, search engines, etc). – Quentin Jun 23 '19 at 12:25
  • @Quentin I'd have preferred closing as a dup of [Why should I use 'li' instead of 'div'?](https://stackoverflow.com/q/549689/1016716) instead. The one you stated as an original is already closed. – Mr Lister Jun 23 '19 at 13:19

0 Answers0