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.

CodePudding user response：

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.

CodePudding user response：

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/