2017-08-23 97 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

歡迎佩德羅來社區,事實上,你的方法是理想的場景,感覺就像我試圖拋棄一個標題:) –