语义HTML实践 [英] Semantic HTML Practice

问题描述

我在网上阅读了关于语义的HTML ......
$ b

语义HTML意味着使用HTML标记来表示它的含义，而不仅仅是使用没有意义的）div和span标签绝对是一切。

如果您使用< h1> ，而不是< div class =header> 和< h2> ，而不是等等，Google和其他搜索引擎会将您的标题解读为您网页中的重要标题。这样，当人们搜索标题和子标题中的字词时，您的页面将被视为更相关（并且排名更高）。

所以，下面是语义，

 < h1>我的网站名称< / h1> 
< h2>我的网站标语< / h2> 
  

以下情况如何？

 < div id =header> 
< h1>< span class =hide>我的网站名称< / span>< / h1> 
< h2>< span class =hide>我的网站标语< / span>< / h2> 
< / div> 
  

我倾向于将h标签与上面的div和span标签结合在一起 - 这被认为是缺乏语义

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

然后，如果我不使用div，我可以用h1和h2来制作一个盒子吗？

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

谢谢。

解决方案

我准备使用HTML5：

 < header> 
< hgroup> 
< h1 >我的网站名称< / h1> 
< h2>我的网站标语< / h2> 
< / hgroup> 
< /标题> 
< / code> 

请记住添加 display：block;到CSS中的HTML5元素和createElement 。标题元素显示该块是一个标题，hgroup元素用于显示第二个h *元素是一个子标题，因此在计算文档中的标题级别时不应将其考虑在内。

b
$ b

如果您不想使用HTML5，则可以使用div代替新元素，并使用HTML5元素名称作为类值。当你在现场使用HMTL5时，这会让你更容易切换。

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

I read about semantic HTML online...

Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.

If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.

So, below is semantic,

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

What about this below?

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

I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?

The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?

Then, if I don't use div, what can I use to make a box around the h1 and h2?

As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??

Thanks.

解决方案

I would do something like the following if I was going to use HTML5:

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

Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.

If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.

You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.

这篇关于语义HTML实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！