HTMLの主要タグ(body内利用【1】大枠を作るタグ)

HTMLの主要タグ(body内利用【1】大枠を作るタグ)

 ここではbodyタグ内で利用する主要なタグをまとめます。bodyタグ内で利用するタグは総称フローコンテンツと呼ばれます。
 その内ここでは全体の大枠をつくるヘッダー、フッターとセクショニングコンテンツ、ヘッディングコンテンツ、グルーピングコンテンツについてまとめます。


ヘッダー、フッターとセクショニングコンテンツ

 ヘッダーは<header>、フッターは<footer>、セクショニングコンテンツは<nav>、<section>、<aside>、<article>、<address>です。これらは特に画面上の表示に関係のないタグですが、SEO的には非常に重要です。HTML5より追加されたタグで、検索エンジンのクローラーがページの内容をより把握しやすくするため、ページ内の区切りを作るために利用します。セマンティクスと呼ばれる概念に従ったものです。


<header>

 ヘッダーであることを明示的にセクショニングします。中にはロゴ、ナビゲーションメニューなどを入れます。

<header> ~ ヘッダー ~ </header>


<nav>

 ナビゲーションメニューであることを明示的にセクショニングします。主に<header>タグ内で利用されます。

<header><nav> ~ ナビゲーションメニュー ~ </nav></header>


<section>

 段落であることを明示的にセクショニングします。中にメインコンテンツを入れます。<h1>~<h6>のヘッディングコンテンツとセットで利用します。

<section>
  <h1>タイトル</h1>
  <section>
    <h2>タイトル1</h2>
    <section>
      <h3>タイトル1-1</h3>
    </section>
    <section>
      <h3>タイトル1-2</h3>
    </section>
  </section>
  <section>
    <h2>タイトル2</h2>
  </section>
</section>


<article>

 記事であることを明示的にセクショニングします。少し分かりにくいのですが<section>のようにページ内のメインコンテンツをではなく、ページから独立した記事として扱われます。

<article> ~ 記事 ~ </article>


<aside>

 左右ナビゲーションであることを明示的にセクショニングします。

<aside> ~ 左右ナビゲーション ~ </aside>


<footer>

 フッターであることを明示的にセクショニングします。中には会社名、住所、連絡先、Copyrightなどを入れます。最近のデザインではサイトマップを入れることもよくあります。

<footer> ~ フッター ~ </footer>


<address>

 住所、連絡先であることを明示的にセクショニングします。<footer>タグ内で利用されます。最近のデザインでは<header>に入れることもよくあります。

<footer><address> ~ 住所、連絡先 ~ </address></footer>





ヘッディングコンテンツ

<h1>~<h6>

 <h1>~<h6>タグは、各段落つまり<section>タグごとに付ける見出しです。SEO的には<title>タグに次ぐ極めて重要なタグです。<h1>タグが一番見出しとしての重要度が高く、<h2>、<h3>の順で細分化されていきます。なお<h1>タグについては1ページに1回のみ利用することが推奨されており、あまり使いすぎるとSEOスパムとみなされる可能性があります。<h2>~<h6>については特に使用回数を気にせず利用できます。 また、<h1>~<h6>タグはあくまで見出しですので、1セクション内に複数の<h1>~<h6>タグを記述することは推奨されていません。


<!-- 〇 正しい使用例 -->
<section>
<h1>見出し1</h1>

  <section>
  <h2>見出し2-1</h2>
   ~ コンテンツ ~ 
  </section>

  <section>
  <h2>見出し2-2</h2>
   ~ コンテンツ ~ 
  </section>

</section>


<!-- × 間違った使用例 -->
<section>
<h1>見出し1</h1>

  <h2>見出し2-1</h2>
  <section>
   ~ コンテンツ ~ 
  </section>

  <h2>見出し2-2</h2>
  <section>
   ~ コンテンツ ~ 
  </section>

</section>




その他枠組みを作るタグ

<main>

 <main>タグは、名前の通りメインコンテンツ部分をマークアップするタグなのですが、セクショニングされる訳ではありません。有名サイトや大企業のサイトでも<mainタグ>が使われていたり、使われていなかったりです。そこまで意識して利用する必要はないタグかも知れません。
<main>タグは元々は1ページに1回のみ利用することが推奨されていましたが、HTML5.2勧告以降は何回利用しても良いということになりました。ただし、<nav>、<aside>、<article>、<header>、<footer>内でネスト(入れ子で使うこと)は不可です。


<main>メインコンテンツ</main>


<div>、<span>

 <div>、<span>タグは、それ自体何の意味も持たないタグです。主にグローバル属性であるid及びclassと併せて利用しCSSの適用範囲を指定するために利用します。


<div id="id001">コンテンツ</div>
<div class="class001">コンテンツ</div>

<span id="id001">コンテンツ</span>
<span class="class001">コンテンツ</span>


<p>

 <p>タグは、文章を表すタグです。ページ内で利用する一般的な文章として文字サイズ、文字色等CSSで指定して利用するのが一般的です。


<p>文章1</p>
<p>文章2</p>


<ul>、<li>

 <ul>タグ、<li>タグは、リスト表すタグで、主に<nav>タグ内でメニューとして利用します。


<ul>
 <li>リスト1</li>
 <li>リスト2</li>
</ul>




ここまでのサンプルコンテンツ

 ここまでで紹介したタグを利用して大枠のみ規定した基本的なHTMLページ例が以下です。


サンプルコンテンツ




 Copyright IT SKILL MAP. All rights reserved.