文章列表的语义HTML

前端之家收集整理的这篇文章主要介绍了文章列表的语义HTML前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。



在一个典型的文章索引(像没有摘录的博客)像这样的形象:

那些项目应该是列表(< ul>< li>)或只是div?

而且,他们应该是图/ figcaption?因为会有一些意义,而且…图片是艺术的一部分不是主要内容,所以也许标题/描述不是图片标题,而是文章标题.

你怎么看?

编辑:一个现场例证 – https://news.google.com/?hl=en

解决方法

我会为每个片段使用一篇文章(即新闻传讯).

每个文章包含标题的h1元素,图像的img元素和文本的p元素.

您可能希望链接到完整版本,您可以将所有元素包含在一个元素中(HTML5中允许的)或标题等.

所以可能看起来像:

<article>
  <h1><a href="" title=""><!-- news title --></a></h1>
  <img src="" alt="" />
  <p><!-- news description --></p>
</article>

只有使用图形,如果这个图像本身应该有一个单独的标题.新闻描述(这里包含在p中)通常不是该图像的标题.

您可以更改文章孩子的顺序.由于截面元素的工作方式,标题不一定是第一个元素.

你可以使用ul,但没有必要.然而,只有当订单对于理解内容真正有意义(即不同的顺序将改变文档的含义)时,才应该使用它.典型示例:如果项目按相关性排序(例如,顶部最相关的预告片),则应使用ol.

关于your question,如果传情者应该是一篇文章

不要将文章(HTML5元素)与术语“文章”(英文)混淆.文章有一个单独的definition,不一定与理解“文章”有关.

传情也应该是一篇文章 – 前导文章和全文都是不同的文章,尽管它们是指相同的实体.

猜你在找的HTML相关文章