Question

我正在制作一个小型网络聊天工具，正在寻找有关用于消息的元素的建议。

以下是我正在考虑使用的内容：

<p id="message-1">
    <span class="timestamp" id="2009-03-10T12:04:01+00:00">
        12:04
    </span>
    <cite class="admin">
        Ross
    </cite> 
    Lorem ipsum dolor sit amet.
</p>

我在这里利用CSS在时间戳周围添加括号，cite d用户等的图标。我认为每个blockquote使用cite会很愚蠢（而且不正确）消息，虽然我认为span正确，因为它指的是发布消息的用户。

我知道这不是a）精确的科学和b）完全必要但我宁愿使用有意义的元素而不是{{1}}。我还应该考虑其他任何因素吗？任何微格式？

Answer 1

HTML在定制方式上不是非常语义。尽管如此，您的格式应该可以在任何浏览器中理解（使用适当的CSS，正如您所指出的那样）。

我在上面的代码示例中看到的与XML非常相似。根据您的需要，这可能很麻烦且过于苛刻，但我想指出您可以使用XML和XSLT作为（X）HTML的替代品。通过这种方式，您可以尽可能使标记符合语义，并且不需要牺牲HTML标记的限制。

w3schools有关于该主题的an article。我可以发誓，我在sun.com中看到了一个用XML完成的网页，但我再也找不到了。

如果您不打算由第三方软件解释或解析，我会建议不要使用此方法，并坚持使用经过验证的HTML。

Answer 2

对我来说似乎合理，除了'id'无效。 NAME令牌不能以数字开头或包含“+”。

另外，如果两个人一次发言，你就会拥有非唯一身份证。也许这些数据应该放在另一个属性中，例如'title'（这样你就可以悬停以查看确切的时间戳）。

Answer 3

如果您要使用语义HTML，您可能想知道HTML5不再认为您对<cite>元素的使用不再正确。

一个人的名字不是作品的名称 - 即使人们称那个人为一件作品 - 因此该元素不得用于标记人的名字。

Answer 4

<ol>
    <li class="message" value="1">
        <span class="timestamp" id="2009-03-10T12:04:01+00:00">
            12:04
        </span>
        <cite class="admin">
            <address class="email">
                <a href="mailto:ross@email.com">
                    Ross
                </a>
            </address>
        </cite> 
        Lorem ipsum dolor sit amet.
    </li>
</ol>

我会尝试类似上面的内容。请注意，我已将所有内容放在Ordered列表中，因为注释可以按照拟合有序列表的线性方式来解释。另外，我在你的Cite标签中嵌入了一个带有Anchor元素的Address标签。遗憾的是，名为Address的元素实际上是为了传达作者的联系信息，因此您可能希望链接到作者的电子邮件地址。

Answer 5

你的建议已经非常好了。如果你想更进一步，并且能够使用相同的标记允许大量不同的演示选项（以更重的html为代价），你可能想要做类似的事情：

<dl class="message" id="message-1">
    <dt class="datetime">Datetime</dt>
    <dd class="datetime">
        <span class="day">Wed</span>
        <span class="dayOfMonth">11</span>
        <span class="month">Mar</span>
        <span class="year">2009</span>
        <span class="hourMin">17:34</span>
        <span class="sec">33</span>
    </dd>
    <dt class="author">Author</dt>
    <dd class="author">Ross</dd>
    <dt class="message">Message</dt>
    <dd class="message">Lorem ipsum dolor sit amet</dd>
</dl>

Answer 6

由于您在问题中提到了微格式，因此您无疑已熟悉microformats wiki。它包含了大量不同情况的例子。

另一种可能性是借用SIOC的部分内容，其中包括论坛的本体论 - 与聊天非常相似。

通过重复使用现有格式，您可以利用Operator之类的插件和工具，并且可以免费从应用中获取更多信息。

Answer 7

我使用XML和XSLT来转换（样式化）数据。

这在语义上是有道理的，但你也有适当的存档格式（即XML） - 我假设你会有某种日志或'历史'。

Answer 8

正如@bobince所说，id="2009-03-10T12:04:01+00:00"无效。

你应该改变这个：

<span class="timestamp" id="2009-03-10T12:04:01+00:00">
    12:04
</span>

对此：

<time class="timestamp" datetime="2009-03-10T12:04:01+00:00">
    12:04
</time>

您可以在HTML5 Doctor和W3C获取有关time代码的更多信息：

HTML5上的time标记提供了一个新元素，用于明确地为机器编码日期和时间，同时仍然以人类可读的方式显示它们。

time元素表示24小时制的时间或者公历日历中的精确日期，可选择带时间和时区偏移。

...

我同意@Robotsu发布的有序列表（ol）解决方案，除了我刚刚发布的时间标记以及address标记内的cite标记错误！

消息的语义HTML

8 个答案: