将纯文本与 中的其他元素放在一起是个好主意<div>吗？

Question

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标签中"浮动"？

Answer 1

这里没有对错之分。

然而，就我个人而言，我会将文本包装在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
{
}

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

当然。这是完美的，除非你需要以某种方式格式化它。

Answer 5

来自W3C

当没有其他元素合适时，div元素用作不得已的元素。否则，会导致读者

DIV没有语义，因此在内容确实具有某些含义的情况下，残疾人不太容易访问它。

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

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

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

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

<section id="site-master-social"> 
<h1>Find us at:</h1> 
<ul> 
<li>facebook</li> 
<li>google+</li> 
etc...
</ul> 
</section>