语义HTML实践

Question

我在线阅读有关语义HTML的内容......

语义HTML意味着使用HTML标签来表达其隐含意义,而不仅仅是使用(无意义的)div和span标签来表示绝对的一切.

如果你使用<h1>的不是<div class="header">,而<h2>替代,等等,谷歌和其他搜索引擎将解释你的头在你的网页是重要的头衔.这样,当用户搜索您的标题和子标题中的字词时,您的网页将被视为更相关(并且排名更高).此外,它更短更清洁.

所以,下面是语义,

<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标签结合起来 - 这是否被认为是缺乏语义？

我有隐藏类的跨度的原因是我想显示站点徽标而不是文本.因此,使用CSS将h1的背景设置为图像,然后隐藏文本.这是不正确的做法吗？

然后,如果我不使用div,我可以使用什么来围绕h1和h2制作一个盒子？

据我所知,html 5尚未完全准备好,我们一定不能使用,我们必须<header>吗？

谢谢.

Answer 1

如果要显示徽标而不是文本,请使用图像.谷歌这样说(即使他们不知道标签和属性之间的区别).标语BTW不是小标题(站点名称(因此徽标)通常只是主页上的标题).

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

Answer 2

如果我打算使用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中的大型否定文本缩进等技巧来隐藏屏幕上的文本.