最佳HTML5結構，其中標題/標題是文章標籤外

包括的商品標籤中的側邊欄，即使它不是特定具有商品標籤

外標題文章

目前，我有商品標籤外的冠軍，但驗證告訴我，itemprop =「標題」不是任何項目的一部分。

什麼是構建這個最好的方法？是否有用於將標題與文章相關聯的for屬性？

如果您想知道什麼樣的佈局會迫使我做出這樣的選擇，那麼這是一個全寬的標題部分，然後是下面的文章和邊欄。

編輯

簡化代碼

<div class="page-wrap"> 
    <header class="article-header" itemprop="headline"> 
     <h1>This heading section spans the width of the page</h1> 
    </header> 
    <div class="content-wrap"> 
     <nav class="submenu"> 
      <p>The submenu is here in the markup so that it appears above the content on mobiles, but it gets pulled to the side on wider screens.</p> 
     </nav> 
     <article class="content"> 
      <p>Article content...</p> 
     </article> 
     <aside class="sidebar"> 
      <p>This sidebar is not related specifically to the article on the page.</p> 
     </aside> 
    </div><!-- .content-wrap --> 
</div><!-- .page-wrap -->

來源

2014-02-07 GusRuss89

您是否忽略了您的示例中的整個Microdata，還是僅使用這個'itemprop'屬性？你爲什麼使用WAI-ARIA標籤（在你的例子中沒有包含WAI-ARIA，也沒有提到它）？ – unor

-1

而不是包木窗你的網頁在此：

<div class="page-wrap">...</div>

敷在此：

<body>...</body>

我從來沒有用過itemprop =「標題」。這是一個新的HTML5屬性。它在許多瀏覽器中不受支持。看到這裏http://en.wikipedia.org/wiki/Microdata_(HTML)#Support

這裏是關於微數據（這是itemprop是什麼）的文章。 http://html5doctor.com/microdata/

這個Stackoverflow問題解釋了爲什麼你不能爲微數據添加Javascript支持。 Add microdata using javascript

所以你可以使用WAI ARIA。它的工作原理是這樣的：http://mcdlr.com/wai-aria-cheatsheet/

爲什麼你有一個子菜單？主菜單在哪裏？如果您的標題不佔用太多空間，您應該將主菜單包含在標題中。

來源

2014-02-07 08:08:34

沒有辦法指定它所屬部分的以外的標題。

因此，如果h1是article內容的標題，則它需要是article的子項。否則，文檔大綱將是不正確（→會有一個多餘/不用輸入，由article創建）：

1. This heading section spans the width of the page 1.1 (implicit heading from the 'article' element)

注意：如果子菜單（nav）是用於導航的article（例如，就像Wikipedia文章的ToC一樣），它也應該是article的孩子。

來源

2014-02-08 02:41:50 unor

最佳HTML5結構，其中標題/標題是文章標籤外

回答

相關問題