web-dev-qa-db-ja.com

新しいhtml5要素でどこに線を引きますか

私はこの記事を読みました http://diveintohtml5.org/semantics.html#new-elements html5のさまざまな新しい要素について。次に、この新しいマークアップを使用して新しいポートフォリオを作成します。コンテンツがクローラーによって可能な限り適切にインデックス付けされ、同時にhtml5の記述方法の例を設定することは私にとって非常に重要です。

注：これは単なる例であり、実際にはこれを行っていません

私のスキルのページがあるとしましょう。通常、私はこのようなものを持っているでしょう：

<div><!-- header -->
  <ul id="menu">the menu</ul>
  <h1>My Skills</h1>
</div>

<div><!-- content 1 -->
  <h2>html</h2>
  <p>tell the people about the html skills</p>
</div>
<div><!-- content 2 -->
  <h2>css</h2>
  <p>tell the people about the css skills</p>
</div>

<div><!-- footer -->
  <p>some footer text</p>
</div>

かなり基本的です。それでは、これをhtml5でどの程度取りますか。ヘッダー、セクション、nav、およびフッターが重要であることがわかりますが、それは内部で行います。ずっと行くの？

<header><!-- header -->
  <nav>the menu</nav>
  <h1>My Skills</h1>
</header>

<section><!-- content 1 -->
  <header>
    <h2>css</h2>
  </header>
  <section>
    <p>tell the people about the css skills</p>
  </section>
</section>

<section><!-- content 2 -->
  <header>
    <h2>css</h2>
  </header>
  <section>
    <p>tell the people about the css skills</p>
  </section>
</section>

<footer><!-- footer -->
  <p>some footer text</p>
</footer>

このような小さな例には内部要素が必要ですか？そうでない場合、いつ内部要素を使用しますか？

website-designhtml5semantic-web
6
Saif Bechan

Smashing Magazineの記事を読むことをお勧めします。 " HTML5 And The Document Outlining Algorithm " HTMLの構造化方法についての詳細な説明があります。

5
Osvaldo