语义 HTML 实践答案

【问题标题】：Semantic HTML Practice语义 HTML 实践
【发布时间】：2011-06-07 20:54:21
【问题描述】：

我在网上阅读了语义 HTML...

语义 HTML 意味着使用 HTML 标记来表达它们的隐含意义，而不是仅仅使用（无意义的）div 和 span 标记来表达绝对的一切。

如果您使用<h1> 代替<div class="header"> 和<h2> 代替等等，Google 和其他搜索引擎会将您的标题解释为您页面中的重要标题。这样，当人们搜索您的标题和子标题中的单词时，您的页面将被认为更相关（并且排名更高）。此外，它更短更简洁。

所以，下面是语义，

<h1>My Website Name</h1>
<h2>My Website Tagline </h2>

下面这个呢？

<div id="header">
  <h1><span class="hide">My Website Name</span></h1>
  <h2><span class="hide">My Website Tagline</span></h2>
</div>

我倾向于像上面那样将 h 标签与 div 和 span 标签结合起来——这种做法是否被认为是缺乏语义？

我之所以使用 hide 类是因为我想显示站点徽标而不是文本。所以使用 CSS 将 h1 的背景设置为图像，然后隐藏文本。这是不正确的做法吗？

那么，如果我不使用div，我可以用什么在h1和h2周围做一个盒子呢？

据我所知，html 5 还没有完全准备好，我们还不能使用<header>，不是吗？？

谢谢。

【问题讨论】：

HTML5 的 header 元素已经准备好用于生产，IMO。不过，请为 IE8 使用 HTML5shiv。
我相信@David Storey 的回答更准确。应该使用
标签而不是 div

标签： xhtml html semantic-markup

【解决方案1】：

如果您想显示徽标而不是文本，请使用图像。 Google say so（即使他们不知道标签和属性之间的区别）。顺便说一句，标语不是副标题（网站名称（以及徽标）通常只是主页上的标题）。

<div id="header">
  <h1><img src="foo.png" alt="My Website Name"></h1>
  <p><img src="foo.png" alt="My Website Tagline"></p>
</div>

【讨论】：

感谢您的链接，虽然我不喜欢隐藏文本......但是当我从 s Spider 的预期中想到它时......最好将文本作为页面的标题而不是让 SE 从 ALT 标签中找出答案。你不觉得吗？
@ifaour — alt attribute 包含图像的等效文本。该图像位于<h1> 元素中。因此，文本等价物也在<h1> 元素中。没有弄清楚。这就是 HTML 的工作原理。所以不，我不这么认为，正如链接所示，谷歌（在搜索引擎领域有一些专业知识）也没有。
据我所知，alt 属性在搜索图像和有替代方案时很有帮助。但是我的意思是……例如在 SERP 中，如果您在标题中搜索文本，您的标题将突出显示（在标题链接下方）..但我不知道其中的 alt 标签案例，这就是我问的原因..
当在搜索结果中显示为纯文本摘要时，图像将被替换为它们的替代品。

【解决方案2】：

不幸的是，Internet Explorer 8 不能识别许多 HTML5 标记，例如，当我对其进行测试时，我无法为

标记设置 CSS 值。所以现在我建议你继续使用 div 标签来分组你的语义。

作为旁注，Google 不喜欢隐藏文本，如果你有很多隐藏文本，它会认为它是欺骗性编码。一个可能没问题，但最好在图像标签上使用 alt 属性。

【讨论】：

【解决方案3】：

没有人建议您根本不应该使用 DIV...语义 HTML 并不意味着您的代码中不能有 div 或 span 标签。它只是意味着只要有可能（有一个特定的标签可用于特定的语义含义）您应该尝试赋予语义含义。

h2 不能用于标语，正如其他人已经建议的那样。

另外，在我的解释中（有些人会争辩），h1 不是您网站的名称。它是特定页面上内容的标题。

【讨论】：

【解决方案4】：

我同意@David Dorward 的观点，标记行应该在p 标记中。

您的示例（用div 包装标题元素）是完全可以接受的，但我想提出一个小警告：请注意不要养成将所有内容包装在div 标记中的习惯。例如：

<div class="content">
    <div class="list">
        <ul>
            <li>something</li>
            <li>something</li>
            <li>something</li>
        </ul>
    </div>
</div>

由于ul标签已经是块元素，上面的标记最好是这样：

<div class="content">
    <ul class="list">
        <li>something</li>
        <li>something</li>
        <li>something</li>
    </ul>
</div>

然后将ul 设置为看起来像div。

关于将标志显示为图像的问题：

如果您的徽标是基于文本的，或者其中包含文本，您最好执行以下操作：

HTML

<div id="header">
    <h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>

CSS

.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
      /* Also add height and width based on your logo height and width */

【讨论】：

标语可以使用 h* 元素。在 HTML5 中，这通常被包裹在一个 hgroup 元素中，以显示它是一个子标题并将其隐藏在分段算法中。

【解决方案5】：

如果我要使用 HTML5，我会执行以下操作：

<header>
  <hgroup>
    <h1>My Website Name</h1>
    <h2>My Website Tagline</h2>
  </hgroup>
</header>

记得在 CSS 中添加 display: block; to the HTML5 elements and createElement for IE。 header 元素显示该块是一个标题，而 hgroup 元素用于显示第二个 h* 元素是一个子标题，因此在计算文档中的标题级别时不应考虑。

如果您还不想使用 HTML5，那么您可以使用 div 代替新元素，并使用 HTML5 元素名称作为类值。当您在实时站点上使用 HMTL5 感到自在时，这将使切换变得更容易。

您实际上并不需要使用 span 元素。您可以使用一些技巧，例如在 CSS 中使用较大的负文本缩进来隐藏屏幕上的文本。

【讨论】：