CODEWITHSUNDEEP
htmlsemantic-markup
Samuel
Samuel

Reputation: 43

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 -->

Upvotes: 2

Views: 1461

Answers (1)

unor
unor

Reputation: 96737

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.

Upvotes: 2

Related Questions