当前位置 : 主页 > 网页制作 > html >

我应该使用,还是使用语义HTML进行评论?

来源:互联网 收集:自由互联 发布时间:2021-06-12
我做了一些研究,没有找到合适的答案.我想知道是否最好继续使用li元素作为评论列表或者切换到文章元素? 例1: ol class="comment-list" li class="comment" figure class="avatar" img ... /figure span cla
我做了一些研究,没有找到合适的答案.我想知道是否最好继续使用li元素作为评论列表或者切换到文章元素?

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

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

什么是最好的解决方案?

更新1

例3(一个更好的例子):

<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>
如果你想提供比使用ol / ul更多的语义价值,那么文章将是我认为最好的选择.

关于w3schools的blockquote:

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

我会说“引自其他来源”并不真正适用于评论.

关于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.

所有这些要点可能都适用于您的评论,因此我建议您使用< article>.

网友评论