Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Website with a card design. Unordered List <UL> contains cards vs DIV contains cards/ pros cons?

Hello,

In the HTML Basics tutorial the website with a card design was created using UL , what are the pros and cons of creating card design using UL vs using a DIV?

In Bootstrap and Materialize UI cards are created as a divs.

http://treehousewebsite.com/ - the website I am talking about.

      <section>
        <ul id="gallery"> <!-- DIV vs UL pros and cons ??? -->
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>

1 Answer

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

It's the more semantically correct approach. A menu can be regarded an unordered list ( ul ) and each item as a list item ( li ). Excessive use of div elements is also known as "divitis" and should be avoided where possible. (Which, of course, doesn't mean that div elements are bad per se. There are legitimate use cases for div s in almost every web page.)

There is no functional difference in using more semantically sound elements but it makes for better, easier to read code, and enables you to build CSS definitions with less overhead.

Compare for example

div.menu { ..... }
div.menu div.subitem { ..... }
div.menu div.level2 div.subitem { ..... }

to

ul { ..... }
ul li { ..... }
ul ul li { ..... }

Prominent examples of where divs could be replaced by more fitting elements:

  • As already said, Menus: <ul><li>
  • Forms with labels: <fieldset><label>
  • Headings <h1><h2> (just the headings, not complete header areas though)
Alina Gavrila
Alina Gavrila
Courses Plus Student 2,490 Points

Thanks for clarifying! So the same goes for the grid system containing cards?

Sergey Podgornyy
Sergey Podgornyy
20,660 Points
Sergey Podgornyy
Sergey Podgornyy
20,660 Points

Yes, you can implement this for cards.

You can also make this markup with DIVs, but with list it will be much convenient to stylize.