Question

最近我开始成为一个有意义的标记怪物，所以现在我对我在页面中使用的HTML标记感到困惑。基本上我想显示一个故事列表，标题，作者，创建时间和一些内容。

<h2>Story 1</h2>
<em>by: Author X January 17, 2012</em>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>

那么，我应该用什么有意义的标记来制作上面标记的列表？

Answer 1

HTML5提供了各种新的语义标签。这是一个如何构建故事的例子。有关更多信息，只需谷歌“html5语义标签”

<article>
  <header>
    Title
    <address>Author</address>
    <time>...</time>
  <header>
  <section>
    lorem ipsum
  </section>
</article>

编辑：使用HTML4时，您可以坚持使用HTML4，这在我看来完全没问题。

Answer 2

h2标题将内容划分为多个部分。这是旧的HTML实践，除了您希望以某种特殊方式设置节或在客户端脚本或链接中将它们称为单元之外，您不需要任何其他操作。如果你确实需要这样的话，div和class是实用的方法。 HTML5的倡导者可能会建议section，但没有描述实际的好处，并且section需要额外的JavaScript代码才能将其引入旧版本的IE。

您不需要任何列表标记。只是连续两个或多个有些相似的元素并不意味着你需要一些元素列表的标记。 HTML列表元素ul（项目符号列表），ol（编号列表）和dl（命名描述列表）是专门的结构，通常用于由短文本组成的列表。表可以被视为共享相同结构的行列表，但这通常仅在行表示某种类型的“记录”时才有意义，并且您通过表格方式呈现它们确实获得了某些东西。

如果你的项目真的是故事的简短描述，而不是故事本身，它们可能被视为书目记录，因此列表。但实际上，这只有在以表格方式呈现它们才有意义时，每条记录都有一行。这意味着描述相当短。考虑是否需要表格式方法，例如使得可以重新排序记录（通过客户端脚本），将表格从HTML复制到文字处理器或Excel等。

Answer 3

对于列表而言，没有什么比列表元素更有意义了;）

如果故事的顺序是有意义的，我会使用<ol>，但如果不是，<ul>就足够了。关于每个列表项的内容，您可以使用<article>，因为列表中的每个项目代表一个单独的内容块，带有标题

Answer 4

我仍然认为桌子是最合乎逻辑的方法。请参阅this jsfiddle。

Answer 5

尝试使用<div>代码.. 然后在div标签内使用所有其余标签

HTML4 - 列表的有意义的标记

5 个答案: