3

新的 html - 正确地做它是新的。

我有一个简单的问题，但它支持我将继续做出的许多决定，因此需要正确开始。

        <div id="site-master-social">Find us at:
            <a href="http://www.OurWebsite.com"><img src="/Images/icon_fb.png" alt="Facebook" title="Find us on Facebook" /></a>
        </div>

问题是关于下面的 html 片段。在包装 Div 中，有一些元素 - 一些文本、超链接和图像。问题是，文本“Find us at:”是否应该包含在诸如 span 之类的标签中，或者是否可以仅在 Div 标签内“浮动”？

4

5 回答 5

3

这里没有对错。

但是我个人会将文本包装在span标签中。这意味着将来如果您希望专门针对文本的样式，这将更容易做到：

<div id="site-master-social">
    <span>Find us at:</span>
    <a href="http://www.OurWebsite.com">
       <img src="/Images/icon_fb.png" alt="Facebook" title="Find us on Facebook" />
    </a>
</div>

#site-master-social span
{
}

但是正如我所说，这只是个人意见。您的标记是完全语义化的。

于 2013-07-15T09:13:25.437 回答
2

如果你需要它，把它包起来，否则我会说把它打开。

这就像阅读一本书或一篇文章。如果您以某种方式将您的文本标记为“特殊”，在您的情况下，通过将其包装在一个<span>元素中，您可以告诉屏幕阅读器等工具，该文本在某种程度上是特殊的。如果您不包装它，他们只会正常阅读它，在这种情况下我假设这就是您想要的。

（但是，屏幕阅读器往往更关注类似<em>或相似的元素，span 可能会被忽略。）

于 2013-07-15T09:16:47.743 回答
0

从技术上讲，它还可以，但我不推荐它。它使文本成为某种隐含的伪元素。<span>在这种情况下，可能会建议将此类文本放入 a中。如果以下元素是相关的输入字段，那么它将是一个标签。如果它是比它更多的文本，它可能应该在一个<p>.

这些选项中的每一个都使您可以更直接地控制该显式内容/元素。

于 2013-07-15T09:12:40.590 回答
0

来自W3C

当没有其他元素适合时，div 元素被用作最后的元素。否则，它会导致读者的可访问性较差。

DIV 没有语义含义，因此如果内容确实具有某些含义，那么残障人士就不太容易获得它。

这也意味着您将更难专门设计这个短语。更重要的是，如果您以后想以某种方式（正则表达式等）对其进行操作，则很难使用 javascript 访问此 textNode 属性。

span也没有特殊含义，但您可以更轻松地为它分配类和随后的 javascript。

为了完整起见，我将添加 Paul D. Waite 和我之间讨论的结论：（见评论）

所以我建议将文本包装在 a 中span并添加一个class属性对于这种特定情况，我会考虑使用<h1>，因为 html5 具有分段范围，并且它看起来像是本节的标题。

<section id="site-master-social"> 
<h1>Find us at:</h1> 
<ul> 
<li>facebook</li> 
<li>google+</li> 
etc...
</ul> 
</section>
于 2013-07-15T09:15:20.597 回答
0

当然。这是完美的，除非您需要以某种方式对其进行格式化。

于 2013-07-15T10:07:35.037 回答