23

顧客が要求した (特定の制限を含む) デザイン/レイアウトを達成しながら、html5 セクション要素と見出しを使用して正しいセクションを実装しようとしています。

一般的なレイアウトは次のようになります。

<body>
  <header>
    <nav class="breadcrumbs"><ol /></nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
    <nav class="main_navigation"><ul /></nav>
  </header>
  <div class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
  </div>
  <footer>Footer stuff<footer>
</body>

今気になっているのは、html5 アウトライナーを使用すると、ブレッドクラム ナビゲーションとメイン ナビゲーションが無題のセクションとして表示されることです。階層的な見出し構造に従っているため、h2 より下に見出しを付けることはできません。もちろん、見出しをまったく「タイトル」にすることはできず、CSS で見出しを隠して「タイトル」にすることは間違っていると感じます。

意味的に正しいままにし、seo 基準を確認し、それらが無題のセクションとして表示されないようにする最善の方法は何ですか?

4

4 に答える 4

7

どうやら、nav要素は断面要素であるため、無題です。

アウトラインにタイトル付きのセクションとしてそれらを含める必要がある場合は、それらの中に見出しを追加する必要があります。

この場合、次のことができます...

<nav class="breadcrumbs">
    <h2>Breadcrumb navigation</h2><ol />
</nav>
    <h1>page title</h1>
    <p>visual title</p>
    <p>sponsor</p>
<nav class="main_navigation">
    <h2>Main navigation</h2><ul />
</nav>

次にh2、css で s を非表示にします。

ところで、おそらくよりセマンティックに変更divする必要があります... heresection

<section class="main_content">
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
    <article><h2>Article title</h2></article>
</section>
于 2011-08-25T13:41:37.550 に答える
5

edx コースで言及されているように、w3c からの推奨されるアプローチは次のとおりです。

ベスト プラクティス 1: 見出しのコンテンツを画面に表示しないために推奨される手法は、Steve Faulkner によるこの記事で説明されています。CSS スタイルシートで display:none または visibility:hidden を使用しないでください。その場合、見出しのコンテンツがスクリーン リーダーによって、より一般的には支援技術によって読み上げられることはありません。

記事のコード例:

.offscreen
{
position: absolute;
clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
clip: rect(1px, 1px, 1px, 1px);
padding: 0;
border: 0;
height: 1px;
width: 1px;
overflow: hidden;
}

<div class="offscreen">This text is hidden.</div>
于 2015-06-27T11:15:33.203 に答える
3

ページ全体で h1 を 1 つだけに制限する必要はありません。必要な数だけ使用できます。ヘッダーはセクション要素によって分割され、各セクションは h1 から始まる独自の階層構造を持つことができます。必要に応じて、セクションごとに多数の h1 を持つこともできます。セクションは、それぞれ独自の独立した構造を持つセクション内にネストされます。それはすべて、ページ/アウトラインをどのように構成したいかによって異なります。

また、この例では 3 つのレベルしか使用していないため、nav ヘッダーに対応するために記事を h3 または h4 に非常に簡単に下げることができます。ヘッダー (非表示またはその他) を持つことは、セクショニング要素に意味的にタイトルを付ける正しい方法です。

http://html5doctor.com/outlines/ http://www.456bereastreet.com/archive/201103/html5_sectioning_elements_headings_and_document_outlines/

于 2013-04-16T03:16:46.223 に答える
1

HTML5 アウトラインでのみ重要な見出し用の CSS クラスを作成しました。

h1.outline, .outline {
  display: none;
}

...そしてhtmlで

<nav>
  <h1 class="nocontent outline">--- Main Navigation ---</h1>
  <a href="/about">About Us</a>
  <a href="/products">Products</a>
  ...
</nav>

...アウトラインでは、これは次のように表示されます

 1. --- Main Navigation ---

編集: 「nocontent」クラスは、Google の SEO アルゴリズムに、タグに SEO に関係のない「ボイラープレート」コンテンツがあることを知らせるために重要です。そのため、サイトの検索エンジンのランキング にカウントされたり、逆にカウントされたりしません。https://support.google.com/customsearch/answer/2364585?hl=jaページによると、「nocontent」で他のクラスを組み合わせてもOKです。

編集: 私は自分のサイトで次の手順を実行しませんでした。Google ウェブマスター ツールによると、ペナルティは課せられず、非表示のタイトルによって警告やフラグが作成されることもありませんでした。ただし、Google のドキュメントでは、「nocontent」クラスを有効にするために、この最終ステップを推奨しています。

Google のランキング用に「nocontent」クラスを有効にするには、サイトのコンテキスト ファイルを変更します。

  1. コントロール パネルの左側のメニューで、[詳細設定] をクリックします。
  2. [コンテキストのダウンロード] セクションで、[ XML 形式でダウンロード] をクリックします。
  3. ダウンロードしたコンテキスト ファイル cse.xml を編集して、新しい属性 enable_nocontent_tag="true" を CustomSearchEngine タグに追加します。たとえば、 に変更します。
  4. [アップロード コンテキスト] セクションで、[アップロード] をクリックし、更新された cse.xml ファイルをアップロードします。

これにより、ユーザーには表示されない見出しがナビゲーションに追加されましたが、アウトライン ビューがクリーンアップされ、より意味のあるものになりました。

于 2013-11-22T03:31:14.740 に答える