'Usage of semantic HTML tags in regards to lists/overview

I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.

For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.

<main>
      <section>
        <h2>Contents of this site:</h2>
        <p>Here is a quick summary of what you can see on this website.</p>

        <ul>
          <li>
            <h3>About me</h3>
            <p>Learn more about the author of this site.</p>
          </li>
          <li>
            <h3>Favorite music</h3>
            <p>Here I will tell you about some of my favorite musicians.</p>
          </li>
          <li>
            <h3>Favorite games</h3>
            <p>Here I will tell you about some of my favorite games.</p>
          </li>
          <li>
            <h3>Favorite books</h3>
            <p>Here I will tell you about some of my favorite books.</p>
          </li>
          <li>
            <h3>Favorite movies</h3>
            <p>Here I will tell you about some of my favorite movies.</p>
          </li>
          <li>
            <h3>Favorite recipes</h3>
            <p>Here I will tell you about some of my favorite recipes.</p>
          </li>
        </ul>
      </section>
    </main>

Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?

Thank you in advance for help explaining this.

htmltagsstructuresemantics


Solution 1:[1]

If you want to make use of semantic <article> tag in this code, you can wrap your <h3> & <p> tag with <article> tag instead of wrapping <li> with <article> tag, and it won't work as you expected.

Solution 2:[2]

That all looks pretty good to me.

<section> is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).

<article> would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.

Info : https://css-tricks.com/how-to-section-your-html/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 dsá
Solution 2

Related Questions