div 包装器“语义”HTML 内的标头内是否有 Span？

问题描述 投票：0回答：5

我在线阅读了有关语义 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 类的 span 的原因是我想显示站点徽标而不是文本。所以使用CSS将h1的背景设置为图像，然后隐藏文本。这是错误的做法吗？

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

据我所知，HTML 5还没有完全准备好，我们还不能使用

<header>
，不是吗？？

xhtml html semantic-markup
5个回答
6
投票

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

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

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

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

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

6
投票

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

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

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

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

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

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

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

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

我同意@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 */
2
投票

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

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

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

2
投票

我同意@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 */
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.