Should I use <ol>, <ul>, <article> or <blockquote> for comments listing using semantic HTML?

Question

I made some research and didn’t find an appropriate answer. I’m wondering if it’s better to keep using li elements for a comments listing or maybe switch to the article element?

Example 1:

<ol class="comment-list">
  <li class="comment">
    <figure class="avatar">
      <img ... >
    </figure>
    <span class="author">Linus Torvalds</span>
    <p class="comment-text">
      Linux is awesome!
    </p>
  </li>
  ...
</ol>

Example 2:

<div class="comment-list">
  <article class="comment">
    <header>
      <figure class="avatar">
        <img ... >
      </figure>
    </header>
    <span class="author">Linus Torvalds</span>
    <p class="comment-text">
      Linux is awesome!
    </p>
  </article>
  ...
</div>

What is the best solution?

UPDATE 1

Example 3 (a better example):

<main>
  <article>

    <header>
      <h1>Text title</h1>
    </header>

    <p>The text...</p>

    <section class="comment-list">
      <article class="comment">
        <header>
          <figure class="avatar">
            <img ... >
          </figure>
        </header>
        <span class="author">Linus Torvalds</span>
        <p class="comment-text">
          Linux is awesome!
        </p>
      </article>
      <article class="comment">
        <header>
          <figure class="avatar">
            <img ... >
          </figure>
        </header>
        <span class="author">Richard Stallman</span>
        <p class="comment-text">
          GNU is awesome!
        </p>
      </article>
      ...
    </section>

  </article>
</main>

Answer 1

blockquote is perfect for comments.

I wouldn't take websites like W3Schools as a reference. Instead, take a look at MDN or W3C itself.

The blockquote element represents a section that is quoted from another source. - W3C

To be clear, it means that you shouldn't use blockquotes to just highlight a portion of your text (e.g. don't use it to emphasise parts of your text).

However, you can use it to quote the remarks of a visitor.

Answer 2

Edit

OK, here's the gory details EMPHASIS is mine

<figure> and <figcaption>

Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.

...

A caption can be associated with the <figure> element by inserting a <figcaption> inside it (as the first or the last child)

<figure> - MDN

What I see is an image of an author. if it was taken out of context (flow), is it still an image of the author? Yes, it is. How? Because it has the has the <figcaption> tag as its last child and the name of the author as it's text.

---

<header>

The HTML element represents introductory content, typically a group of introductory or navigational aids.

...

The element is not sectioning content and therefore does not introduce a new section in the outline.

<header> - MDN

Either wrap <h1-h6> or <nav> in <header>, if it's a <nav> then it's outside of <main> and inside of <main> if it's for headings (<h1-h6>). Do not wrap <header> around <figure>. <figure> is a specialized content wrapper, not content. <header> is a specialized content wrapper.

---

<article> and <section>

<article> and <section> can be nested within each other in either direction but stick to one pattern. Basically <article> can be a sub-topic of <article> or <section> or vice versa.

Refer to: Using HTML Sections and Outlines , <article> tag, and <section> tag.

---

Even though there are 2 versions of HTML5 tag definitions (W3C & WHATWG), semantics as it applies to HTML5 layout is subjective. Your page will function just as well with <div> and <span> (case in point: Bootstrap.)

<article> over <blockquote>

Article can stand on its own and carries the flow of a topic which can be divided into sub-topics by <section> and therein would be text and media content grouped in <p>, <figure>, etc.

To wrap up all the content in a neat package is <main> and the peripherals would be the <header> and <footer> which usually hold content that is common to most of the pages like <nav> or <address>, support links, etc.

A <blockquote> is an extended reiteration of a work (ex. book, poem, speech, etc). So it isn't suitable for a comment.

As for listing each comment, I'd skip that because an <article> stands on its own.

Without all the gory details I submit to you my take on a semantic layout:

Demo

<header>
  <nav></nav>
</header>
<main id='page11'>
  <article class="comment">
    <figure class="avatar">
      <img ...>
      <figcaption class="author">Linus Torvalds</figcaption>
    </figure>
    <section class='content'>
      <p class="comment-text">
        Linux is awesome!
      </p>
    </section>
  </article>
</main>
<footer>
  <address></address>
</footer>

Answer 3

Each comment should be an article (no matter if you’ll use a list or not). These article elements could be part of a section (representing the comment area), and this section should be part of the article the comments are for (e.g., the blog post).

<article>
  <h2>My blog post</h2>
  <section>
    <h3>Comments</h3>
    <article id="comment-1"></article>
    <article id="comment-2"></article>
    <article id="comment-3"></article>
  </section>
</article>

If you allow replying to comments and display them nested, the replies should be part of the parent comment:

<article>
  <h2>My blog post</h2>
  <section>
    <h3>Comments</h3>
    <article id="comment-1"></article>
    <article id="comment-2">
      <article id="comment-2-1"></article>
      <article id="comment-2-2"></article>
      <article id="comment-2-3"></article>
    </article>
    <article id="comment-3"></article>
  </section>
</article>

Semantically, there is no need for a list here. Thanks to using sectioning content elements (section, article), the comment section and each comment are part of the document outline, which can allow quick on-page navigation.
Adding a list wouldn’t be wrong, though, but I would recommend against it in this context (following my two rule of thumbs)

Using blockquote for comments wouldn’t be appropriate. This is their canonical/original location, you are not quoting from somewhere else. Thanks to using article, you already semantically convey that the content inside could be from another author than the content outside of it (because article allows you to "scope" the address element and the author link type).

Answer 4

If you want to provide more semantic value than you would using ol/ul, then article would be the best option in my opinion.

About blockquote from w3schools:

The <blockquote> tag specifies a section that is quoted from another source.

I would say that "quoted from another source" does not really apply to comments.

About article from w3schools:

The <article> tag specifies independent, self-contained content. An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.

All of these points probably apply to your comments, so I would recommend going with <article>.