17

多くのマーケティング サイトやコンテンツ重視のサイトでは、大きなテキストや画像を使用してページの主要なコンテンツを紹介しています。場合によってはスライダーを使用し、サービスへのサインアップやアプリのダウンロードなどの行動を促すフレーズを含めています。このデザイン要素が何と呼ばれているかわからないので、twitter ブートストラップからヒーロー ユニットという用語を取得しました。

http://twitter.github.com/bootstrap/components.html#typography

ほとんどの人は、私が説明しようとしていることを知っていると思います...明確でない場合は、この質問にスクリーンショットまたはリンクを追加できます。

私はいくつかの異なるサイトを見ましたが、このヒーローユニットをASIDE要素内に配置するサイトもあればSECTION、ARTICLEを使用するサイトもありHEADERました。例として再び Twitter のブートストラップを使用します。

<header class="jumbotron masthead">
  <div class="inner">
    <h1>Bootstrap, from Twitter</h1>
    <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p>
    <p class="download-info">

HEADERこのタイプのコンテンツに最も適切なタグはありますか? ASIDEまたは、ARTICLEまたはを使用する必要がありますかSECTION？

4

2 に答える 2

9

メインコンテンツをマークアップする方法について議論しているHTML5 doctorから:

スクリーン リーダーのような支援技術は、ヘッダー、ナビゲーション、フッター以外のページ内の最初のものであるため、メイン コンテンツを見つけることができます。

だから私はあなたの「ヒーローユニット」をsection. sectionページ上の関連するコンテンツの各グループは、最初のセクションがメイン コンテンツの開始点となるように、独自の にグループ化する必要があります。

ただし、HTML5 アウトライナーを頻繁に使用するという @net.uk.sweet の提案には賛成です。また、 Mozilla Developers Networkの HTML アウトラインの記事もチェックしてください。これは私にとって非常に役に立ちました。

于 2012-06-19T09:14:12.480 に答える
2

使用を検討している各タグの w3 仕様を参照し、説明と使用例を読むことをお勧めします。もちろん、アーティクル タグをいつ使用するかなど、一見単純な質問によって引き起こされた議論を見るだけで、これがかなり主観的なものであることがわかります。ただし、仕様を読むことで、自分の意見をまとめやすくなります。

  1. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element
  2. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element
  3. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-article-element
  4. http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element

headerタグを含む要素内の他のページヘッダーと階層的に等しくならないように、タグをさらにセクション化要素に含める必要があると思います。そのセクション化要素がどうあるべきかは、「ヒーローユニット」のコンテンツと、そのコンテンツがページの残りの部分とどのように関連しているかによって異なります。

最後に、 HTML5 ドキュメント アウトライナーで作業を頻繁にチェックして、新しいセクションとそれを含むページの構造を把握してください。

于 2012-06-19T00:29:18.637 に答える