12

HTML5 でサイトのタイトルを適切にマークアップするには? 通常、私はウェブサイトの名前を次のようにマークアップします:

<h1>
    <a href=#>Website Name</a>
</h1>

最近、HTML5 Document Outlining Algorithm に出会いました。また、サイト名を h1 タグでマークすることは意味がないように思われることも読みました。これは、ウェブサイト名に加えて、すべてのページに異なるメイン ヘッダー (h1) が含まれている可能性があるためです。

Facebook で、Facebook のロゴ/タイトルのマークアップが<h1>タグで囲まれているとします。次に、すべての投稿が<article>タグでラップされている場合。例えば：

<article class="post">
    <h5 class="post-header">
         <a href="#">Someone has shared Blah Blah's photo</a>
    </h5>
     <div class="post-body">...</div>
</article>

ドキュメントの概要は次のようになると思います

  1. フェイスブック

    1.1 誰かが Blah Blah の写真を共有しました

    1.2 その他の投稿

    1.3 その他の投稿

それは大丈夫ですか？

4

2 に答える 2

9

特にアウトラインのため、使用するのが理にかなっていますh1。

ウェブページがウェブサイトの一部である場合、各ページh1には、サイト タイトル、サイト ロゴ、またはその両方を含む サイト ヘッダー が必要です。このサイト ヘッダーは、セクション要素 ( / / / )の子ではないことが重要です。sectionarticleasidenav

したがって、ページのトップレベルの見出しは常にサイトの見出しになります。そして、サイト ナビゲーション、ページのメイン コンテンツ、セカンダリ コンテンツを含むサイドバーなどはすべて、そのトップレベルの見出しの「子」になります。

したがって、ブログ投稿ページの単純な構造は次のようになります。

<body>
  <h1><img src="logo.png" alt="John's blog"></h1>

  <nav><!-- the site-wide navigation --></nav> 

  <article>
    <h1>My first blog post</h1>
    <p>…&lt;/p>
    <footer><!-- this footer applies to the article only--></footer>
  </article>

  <footer><!-- this footer applies to the whole page (→ the site)--></footer>

</body>

これにより、次のようなアウトラインが作成されます。

1 John's blog (→ body>h1)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

でサイトのタイトル/ロゴを使用しない場合h1、ページには無題のトップレベル アウトライン エントリが含まれます。

1 untitled (→ body)
  1.1 untitled (→ body>nav)
  1.2 My first blog post (→ body>article>h1)

h1また、サイトのタイトル/ロゴにaを使用せず、メイン コンテンツにセクション要素を使用しないとしたら…</p> 

<body>
  <img src="logo.png" alt="John's blog"> <!-- omitted h1 -->

  <nav><!-- the site-wide navigation --></nav> 

  <!-- omitted article -->
  <h1>My first blog post</h1>
  <p>…&lt;/p>

</body>

… 2 つの最上位エントリを含むアウトラインが得られます。

1 untitled (→ body)
  1.1 untitled (→ body>nav)
2 My first blog post (→ body>h1)
于 2013-02-17T10:39:12.367 に答える
7

私はそれをheader要素に入れます：

header 要素は通常、セクションの見出し (h1–h6 要素または hgroup 要素) を含むことを意図していますが、これは必須ではありません。ヘッダー要素は、セクションの目次、検索フォーム、または関連するロゴをラップするためにも使用できます。

このような：

<header>
  <a href="/"><img src="..." alt="Foo Company Home"></a>
</header>
于 2013-02-16T17:25:24.097 に答える