メモ・HTML5 セクション要素について

その他メモ

• セクション
  
  セクション→章・節・項などの範囲
• セクションの範囲をあらわす要素は4種類
• section
• article
• aside
• nav

<section>や<article>という要素。つかいこなせる気がしない。
  HTML5流のタグの書き方で特に難しいと感じました。 

勉強している本には「section要素はセクションに対して使う」という説明。
だから、セクションって何？？？

「章・節・項」もぼんやりしててよく分からない。
学術論文の書き方を勉強した人なら分かるのかもしれません。
文章量が多いWebサイトなら便利なのかも。

本の後半にはお約束の「WEBサイトをまるごと作ってみよう」という章があります。
ここでは主要な部分をHTML5未満と同じようにマークアップしています。

---

<header>
<ul>
　<li>メニュー1</li>
　<li>メニュー2</li>
</ul>
</header>
<main>
　　メインコンテンツ
</main>
<div id="sub">
　　サブコンテンツ
</div>
<footer>
　フッター
</footer>

---

マークアップがある程度できてから
「このままでも問題ありませんが、せっかくですのでHTML5から新しく導入されたセクション関連の要素でもつけてみましょう」と以下のようにしています。

<header>
<nav> …ナビゲーション
<ul>
　<li>メニュー1</li>
　<li>メニュー2</li>
</ul>
</nav>
</header>
<main>
<section>…主コンテンツ
　　メインコンテンツ
 </section>
</main>
<div id="sub">
<aside>…主コンテンツではないセクション
<section>
　　サブコンテンツ
</section>
</aside>
</div>
<footer>
<aside>…主コンテンツではないセクション
<section>
　フッター
</section>
</aside>

</footer>

---

書くことだけ増えてメリットが少ないような・・・。
セクションを示すメリットは

• セクション（章）の範囲が明確に分かる
• 親子関係・文章構造が明確になる
• 検索エンジンの検索精度を向上させる？

注意したいこと。

• 書く順番はarticle＞section 
• CSSでのデザイン目的でセクションを使わない。
  (代わりにdiv要素を使うことが推奨される。)

文章量の多いコンテンツで使いこなせば、「何でも<div>で囲ってしまう」モヤモヤを解決してくれそう。

セクション=章である。
「章」っぽい内容は<section>でマークアップできる。（必須ではない）と解釈しています。

このあたりはHTML5が広まりつつあるなかで、まだ転換期だそうで。

参考リンク　※これから読む

・第5回目　HTML5で新しく定義された新要素「article要素」の使い方の基本をまとめよう（MdN Design Interactive > 特集記事 > Web デザイン）
・HTML5の勉強を始めた際に使い方に迷う新要素「section要素」の基本と使い方をまとめてみました【MdN連載第4回目】
・HTML5“とか”アプリ開発入門（文書構造編：前編）HTML5のセクションで“文書構造”を理解する (1/2) - ＠IT
・section 要素 - html5doctor - HTML5.JP
・HTML5 アプリケーションをビルドする - HTML5 によるアクセシビリティの設計

最近、自分に「リンクを貼ったら満足して中身を読まない」癖があると気づきました。
とりあえずリンク、とりあえずブックマーク、というのは便利だけど、危ないですね。