2017-08-23 90 views
0

假设有一个主标题,并且它有几个可通过给予单独标题进行分类的子标题,但是它们在视觉上的沟通方式不同,而不是给它们单独的标题。同一级标题,但不同类别

即:

在我们应该如何使用标题标签这样的情况?

我认为应该做的正确的事情(但不确定)是为这两个类别添加单独的section元素。

这样的:

有什么建议?

回答

1

请注意,section元素是一个切片内容元素。这意味着它会在文档大纲中创建一个条目。如果您想根据大纲中的相应排名使用h1 - h6,则标题应该为h3标题。

另请注意,建议您在适当的地方(例如,至少在任何地方使用标题元素)明确使用分段内容元素,因此您可能也想要使用section作为“我们做什么”等。

所以轮廓相关的结构看起来是这样的:

<body> 
    <h1>Xyz Company</h1> 

    <section> 
    <h2>About us</h2> 

    <section> 
     <h3>What we do</h3> 
    </section> 

    <section> 
     <h3>Where we are?</h3> 
    </section> 

    <section> 
     <h3>Where we do?</h3> 
    </section> 

    </section> 

    <section> 
    <h2>Attributes</h2> 

    <section> 
     <h3>Respect</h3> 
    </section> 

    <section> 
     <h3>Responsibility</h3> 
    </section> 

    <section> 
     <h3>Growth</h3> 
    </section> 

    </section> 

</body> 

每个(在这种情况下每个切片根元素,即body)切片内容元素都有自己的标题,并没有标题没有明确的部分。

即使您不想提供“关于我们”和“属性”标题,您仍然可以保留两个section元素。不理想,但比没有这些更好,因为它们使目标文档大纲清晰。 (妥协可能是用CSS在视觉上隐藏这两个标题。)

1

从纯技术的搜索引擎优化的角度来看,它会更好,如果这两部分都有自己的标题,这些部分的内容有自己的副标题,所以你要寻找的是这样的:

<main> 
    <h1>Your Company Name</h1> 
    <section> 
      <header> 
        <h2>About Us</h2> 
        <h3><a href="#what_we_do">What we do</a></h3> 
        <h3><a href="#where_we_are">Where we are</a></h3> 
        <h3><a href="#where_we_do">Where we do</a></h3> 
      </header> 
      <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section> 
      <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section> 
      <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section> 
    </section> 
    <section> 
      <header> 
        <h2>About Us</h2> 
        <h3><a href="#what_we_do">What we do</a></h3> 
        <h3><a href="#where_we_are">Where we are</a></h3> 
        <h3><a href="#where_we_do">Where we do</a></h3> 
      </header> 
      <section id="what_we_do"><p>Lorem Ipsum Dolor Sit Amet...</section> 
      <section id="where_we_are"><p>Lorem Ipsum Dolor Sit Amet...</section> 
      <section id="where_we_do"><p>Lorem Ipsum Dolor Sit Amet Dolor...</section> 
    </section> 
</main> 

通常我喜欢做的是看看没有任何CSS/JavaScript的页面,看看它的外观。如果你有相同的流量,并且事情看起来像是他们应该默认的,那么你就是在正确的轨道上。 搜索引擎足够聪明,可以理解你的意思,即使你使用div来处理所有事情,但在语义上正确的话可能会增加他们对干净和有组织的代码的喜好程度。

为这两个部分添加部分可能会有所帮助,但更有帮助的是,此页面会讨论除多个之外的特定主题。所以我建议您改为为每个关于我们和属性制作一个页面。如果看起来过于矫枉过正,你可以只用一页去;这将是正确的,但在搜索引擎眼中并非最佳 - 他们确实喜欢每个主题都有一个页面,并且它们在域中是唯一的。

+2

从非常高的角度给出建议 - 我想我们应该欢迎您来到社区Pedro。玩的开心! –

+0

欢迎佩德罗来社区,事实上,你的方法是理想的场景,感觉就像我试图抛弃一个标题:) –