カテゴリー

キーワード

 
> article,section,nav,aside,h...

article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編


2015 年 2 月 18 日 投稿    view: 25186
タグ:
このエントリーをはてなブックマークに追加

HTML5で書く 実践編(続き)

こんにちは。
Webマーケティング部の杉尾成行です。


前回の続きで、HTML5でのコーディングについてお話しさせていただきます。
よろしくお願いします。


※今回、新たに作成するものはございません。


前回はコチラ ⇒ HTML5で書く~まずは骨組みから HTML5実践編


前回のおさらい

前回出来上がったものは下記のような形でした。


<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>旅行したい国</title>
</head>
<body>
    <header>
        <h1>旅行したい国</h1>
        <nav>
            <ul>
                <li>ヨーロッパ編</li>
                <li>アジア編</li>
                <li>アフリカ編</li>
                <li>北米、南米編</li>
                <li>オセアニア編</li>
            </ul>
        </nav>
    </header>
 
    <main role="main">
        <article>
 
            <h2>ヨーロッパ編</h2>
 
            <section>
                <h3>イタリア</h3>
                <p class="test1">サッカー、ファッション、バッジョ</p>
            </section>
 
            <section>
                <h3>スペイン</h3>
                <p class="test2">サッカー、闘牛、イニエスタ</p>
            </section>
 
            <section>
                <h3>フランス</h3>
                <p class="test3">サッカー、オシャレ、プラティニ</p>
            </section>
        </article>
    </main>
 
    <aside>
        <h2>アジア編はこちら</h2>
        <p>1位はなんとあの国…</p>
    </aside>
 
    <footer>
        <small>Copyright 旅行したい国 All Rights Reserved.</small>
    </footer>
</body>
</html>

各要素の説明

各要素を簡単に説明したいと思います。


nav article section aside

これらはセクショニング・コンテンツです。
大雑把に言うと、セクショニング・コンテンツは『それ単体でページの骨組みを作るもの』です。
ですから、それぞれに見出しがなければなりません。(見出しとは、h1~h6のこと)


nav

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。


article

articleはサイト内コンテンツの独立した記事項目です。単独で意味をなす部分と言えます。
もっとくだけた言い方をすると、「その部分だけを誰かに見せても意味がわかる」というところです。


section

sectionは章や節を表します。
必ず見出しを伴います。見出しがない場合でも、暗黙的にあるものとみなされます。
段組みのために使うのはNGです。divの代わりに使ってはいけません。


aside

asideはその前後の要素のコンテンツに関係しているが、別のコンテンツとして分離されたものとみなされます。
補足的な情報であることが多いです。


header footer

header footerはページの構造化要素(フロー・コンテンツにしか属さないもの)です


header

headerはそれが入っているセクショニング・コンテンツ(nav article section aside)もしくはセクショニング・ルート(bodyなど)の前置きのコンテンツを表します。


イントロダクションやナビゲーションの助けとなるグループが入ります。
(見出しh1~h6は必須ではありませんが、入れる方が望ましいです)


直近の祖先に当たるセクショニング・コンテントやセクショニング・ルートが body 要素のとき、それはページ全体のheader要素ということになります。


footer

footerは、その直近の祖先にあたるセクショニング・コンテンツ、または、セクショニング・ルートのフッターを表します。


通常はページの最後に現れますが、必ず最後に置かなければならないというわけではありません。


main

そのページ特有のメインコンテンツを表します。
ですので、どのページにも共通のサイトロゴやナビゲーション、フッターなどは含みません。


main要素はセクショニング・コンテンツではありませんのでアウトライン(骨組み)に影響を与えません。
また、同ページに一つだけしか使用してはいけませんし、article, aside, footer, header, nav の子孫として使うことはできません。

h1 h2 h3 h4 h5 h6

ヘディング・コンテンツです。
セクショニング・コンテンツの見出しを表します。


前回、HTML5ではh要素の記述が変わったと述べました。
それは


<article>
    <h1>見出しレベル1</h1>
    <section>
        <h1>見出しレベル2</h1>
    </section>
    <section>
        <h1>見出しレベル2</h1>
    </section>
</article>

こういった書き方が認められるようになったということです。
HTML5以前ではh1が複数あるのはスパム行為としてペナルティを課せられていたのですが、それはなくなったということですね。


ちなみに上記の場合、article直下のh1の方が各section内のh1よりレベルが高いと判断されます。
セマンティックWebの考え方がこういうところで活かされるわけですね。


HTML5以前の書き方でも問題ありませんので、それで慣れている方はそちらを使った方が無難かと思われます。
ちなみに、どちらがSEO上有利不利ということもないようです。


その他

p

p要素は一つの段落を表します。


small

small要素は細則を表します。免責条項、警告、法的制約、著作権表記、ライセンス要件などを表記します。
テキストの重要性を弱めるものではありません。


まとめ

実践編と言いながら、今日は要素の説明だけになってしまいました。


次回はdivを使った段組みや、a要素を使ったリンクの作り方、img要素を使った画像の貼り方などを説明したいと思います。


【追記】書きました ⇒ HTML5におけるDIVタグの使い方を紹介します【HTML5実践編】

【追記】書きました ⇒ a要素、img要素、figure要素、figcaption要素を紹介します【HTML5実践編】


最後までお読みいただき、ありがとうございました。

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事