Samuel Crockford Samuel Crockford - 4 months ago 7
HTML Question

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

For this example I have six very basic items that all share the same styling and each link to a new separate page. So I was just wondering which of the below code examples is semantically correct or how can I go about making it correct?

I'm hoping to apply this answer to this exact example but I'm also hoping to use the same principles on more complex versions at a later date.

Basically I just want to learn how to properly structure content even if it seems like a huge over kill on some very basic elements?

I'm also using the grid system from here: http://www.responsivegridsystem.com/

Thank you for your time!

Code Example 1 of 2 using div tags

<section class="group global-width col span_12_of_12">
<h1>Section Title</h1>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title One</a>
</h2>
</div>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Two</a>
</h2>
</div>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Three</a>
</h2>
</div>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title four</a>
</h2>
</div>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Five</a>
</h2>
</div>

<div class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Six</a>
</h2>
</div>

</section><!-- END OF CODE EXAMPLE ONE -->


Code example 2 of 2 using ul li tags

<section class="group global-width col span_12_of_12">
<h1>Section Title</h1>
<ul>
<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title One</a>
</h2>
</li>

<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Two</a>
</h2>
</li>

<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Three</a>
</h2>
</li>

<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Four</a>
</h2>
</li>

<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Five</a>
</h2>
</li>

<li class="col span_2_of_12">
<h2>
<a href="#" title="Example title text">Title Six</a>
</h2>
</li>

</ul>
</section><!-- END OF CODE EXAMPLE TWO -->

Answer

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.