HTML5で最低限覚えておいたほうがいいタグの使い方

HTMLという構造を作る言語に触れてから約15年の月日が流れました。

私が触った頃はXHTMLというXMLとHTMLを融合した仕組みで、 開始タグには必ず閉じタグが必要というXMLの概念を取り入れて厳格化したHTMLといった感じです。

そしてHTML5になってから、タグによって閉じタグが必要ないものがあったりして XHTML時代よりはHTMLの記法がラフになったような感じがします。

「HTML5の正しい書き方」というのを調べてみても、ユーザーによって書き方はまちまちで どれが正しいのかが初学者にとってすごく分かりづらいんじゃないかなと思います。

XHTMLであれば厳格化されているのでここはここで使う。

っていうのがはっきりしてたのですが、HTML5になってからは 別にそこまで厳格じゃないけどちゃんとタグの並びや入れ子がおかしくなければなんでもいいよ。

っていう感じにゆるくなったので、几帳面な人にとっては色々悩んでしまうんじゃないかなと思います。

おそらく正解はW3C(HTMLやCSSを標準化している団体)の公式サイトを見てもらうべきなのですが、 正直なところ基本的なところを知っていればあとは独自の組み方でいいんじゃないかなと思います。

なので今回は私が使っている最低限のタグとその使い方や置き方なんかを残しておきます。

初学者は参考の１つとしてみてもらえれば幸いです。

ただ、これはあくまで私のやり方であって正しいかどうかは不明です。 おそらくは問題ないと思いますが、人によってはタグの組み方が違ったりします。

初学者は一人のやり方ではなくて色んな人のやり方を覚えて自分なりの正しいと思えるHTML5の組み方を覚えましょう。

  1. <header>タグについて
  2. <main>タグについて
  3. <section>タグについて
  4. <footer>タグについて
  5. <article>タグについて
  6. HTML5で追加されたタグにスタイルをあてるべきではない

<header>タグについて

headerタグはその名の通りヘッダーを表します。

使用箇所は主にサイトのロゴやメニュー等。 どのページにいっても変わらないような部分に使用します。

他にもタイトルや投稿日付なんかがまとまっている記事の上部にも使えます。

私の使い方としてはやはりロゴやメニューの部分のラッパーとして使ってますね。

以下のような感じの定義になります。

<body>
  <div class="all--wrap">
    <header>
      <div class="header--wrap">
        <h1>タイトルロゴ</h1>
        <ul>
          <li><a href="#">メニュー01</a></li>
          <li><a href="#">メニュー02</a></li>
          <li><a href="#">メニュー03</a></li>
          <li><a href="#">メニュー04</a></li>
        </ul>
      </div>
    </header>
    <main>
      <!-- 省略 -->
    </main>
    <footer>
      <!-- 省略 -->
    </footer>
  </div>
</body>

まずはbody直下の中に入るタグを1つのdivに包んでラッピングしてます。

ここはお好みなのであってもなしでも大丈夫です。

デザインの都合上こういった書き方をしておいたほうが色々と便利だったりするだけです。

注目するべきはheaderタグの中の要素を囲むdivが直後にあることですね。

headerタグで囲んでいるからそれを使えば直下のdivいらなくない？

って思うかも知れませんが、HTML5のタグの目的はあくまで｀構造を定義｀することであって スタイリングをするべきものでないと言われています。

もちろんheaderタグをdisplay:blockにしてdivの代わりにつかうというのは 別にやってもSEOの評価が下がったりすることは特になく別にダメなことではありませんが、 htmlというのは構造を定義する言語であってデザインする言語ではないことを頭の隅に置いててください。

デザインはCSSに任せましょう。

記事内のheaderの扱い方

これは正直最近必要あるのかわからないのですが、 記事単体だけでも要素としてヘッダ、コンテンツ、フッタと分けることが出来ますね。

そのヘッダとしてheaderタグを使うことも可能です。

サンプルとしては以下になります。

他のタグを省略しているのに気をつけてください。

    <main>
      <article>
        <section>
          <header></header>
          <div class="entry"></div>
          <footer></footer>
        </section>
        <section>
          <header></header>
          <div class="entry"></div>
          <footer></footer>
        </section>
        <!-- 記事繰り返し -->
      </article>
    </main>

headerにh1タグを入れて記事のタイトルを入れていく感じです。

XHTML時代はH1タグが1ページに1つという決まりだったのですが、 html5はその決まり事がなくなりブロックごとにH1タグを使っていいことになりました。

各記事にh1を使ってもいいということですね。

ただ、個人的にトップページの構造としてはh1は「記事一覧」みたいな部分にあてて その後に続く記事一覧のタイトルはh2をつけるべきかなと思ってます。

以下のような感じ

    <main>
      <article>
        <h1>記事一覧</h1>
        <section>
          <header>
            <h2>記事タイトル01</h2>
          </header>
          <div class="entry"></div>
          <footer></footer>
        </section>
        <section>
          <header>
            <h2>記事タイトル02</h2>
          </header>
          <div class="entry"></div>
          <footer></footer>
        </section>
        <!-- 記事繰り返し -->
      </article>
    </main>

こんな感じに。

一応この上にタイトルロゴにh1を使っているので複数のh1が存在することになってますが、 タイトルロゴのh1はあくまでサイトのヘッダーのh1という扱いなので、記事一覧のh1とは競合しないということです。

h1～h6タグは本の目次を意識すれば自ずと使い方がわかります。

余談ですが、Bootstrapはh1タグとかをデザインに使ってるので好きではないです。

BootstrapはもともとデザインができないエンジニアがWebアプリのUIとして使うもので作られたと思うので HTMLの構造はどうでもいいという認識でh3とかをスタイリングしているのですが、 最近は初学者が便利だと言って普通にWeb制作に使ってしまっているのがよろしくないかなと思います。

<main>タグについて

もうここまでにmainタグが出てきてしまっていますね。

そう、サイトのメインコンテンツの部分にmainタグで囲ってあげます。

ブログであれば記事の全体部分のラッパーとして使う感じです。

そしてmainタグは1ページに1つだけにしておきましょう。

1ページにメインコンテンツが何個もあるのはおかしいという意味合いからです。

使ってもいいですが、構造上無意味ですし検索エンジンスパム認定される可能性もあるので mainタグは1ページに1回だけ出てくるようにしましょう。

それ以外は特に語ることはありません。

<section>タグについて

HTML5の中で一番扱いづらいタグかなと思ってます。

sectionとはその名の通りセクションを表すタグとなっています。

要はコンテンツとしての1ブロックの扱いに使うものですね。

headerタグでも書きましたが記事１つ１つに囲んでいるのがわかります。

ただ、人によっては記事セクションの中のメイン記事３つのセクションを入れ子にする人も居ます。

    <main>
      <article>
        <h1>記事一覧</h1>
        <section>

          <section>
            <header>
              <h2>記事タイトル01</h2>
            </header>
          </section>

          <section>
            <div class="entry"></div>
          </section>

          <section>
            <footer></footer>
          </section>

        </section>
        <!-- 記事繰り返し -->
      </article>
    </main>

ヘッダセクション・記事内容セクション・フッターセクション

とセクションの中でセクションごとに区切っているという感じです。

おそらくこれも間違いではないのですが、冗長すぎる書き方だなと個人的には思います。

記事ごとにセクションで区切るのであれば、HTML全体もsectionで区切る必要が出てくるわけです。

それをやるとHTMLがsectionタグだらけになるのが用意に想像できるんじゃないでしょうか。

そして記事内のheaderタグやfooterタグも正直不要だなと思ってます。

html5はもっとシンプルであるべきかなって考えてるからです。

じゃないとXHTMLでいいでしょってなりますからね。

この辺の答えは正直人によりけりかなって思います。

自分なりの答えを持っておくと説明するときに説得力がでるので、 私の1つの考え方だけではなく、色んな人の考え方を持っておくといいでしょう。

<footer>タグについて

footerタグはセクションのフッターを表します。

サイト最下部の著作表示やカテゴリ一覧、その他情報等に使用するべきかなと思ってます。

あとは記事の最下部にカテゴリやタグなどの一覧を載せたり、 関連記事を表示したり記事の最後に置く部分に使ったりでしょうか。

コンテンツごとのフッターとして利用しておけばいいかなと思います。

<article>タグについて

articleもsectionと同じで複数使ってもいい感じのタグなのですが、 私はブログであれば記事全体を囲むだけにしか使いません。

ブログのメインコンテンツといえば記事ですからね。

トップページやカテゴリなら記事一覧を囲むのにつかったり、 記事単体であれば記事そのものを囲んだりする感じで使います。

MDN Web Docをみるとsectionのように使ってる例が出てきますが、 正直コレは人によって使い方が変わりそうです。

逆にsectionを記事全体のラッパーとして使って、 記事一覧の1つ1つをarticleで囲むというのは確かに理にかなっています。

    <main>
      <section>
        <h1>記事一覧</h1>
        <article>
          <header>
            <h2>記事タイトル01</h2>
          </header>
          <div class="entry"></div>
          <footer></footer>
        </article>
        <article>
          <header>
            <h2>記事タイトル02</h2>
          </header>
          <div class="entry"></div>
          <footer></footer>
        </article>
        <!-- 記事繰り返し -->
      </section>
    </main>

うーん、XHTMLをやってた身としてはどっちが正解なんだろうって思うのですが、 おそらくちゃんと構造を定義できていればどうでもいいというのが正解何じゃないかなと思います。

sectionで囲ってもいいですし、articleで囲ってもいい。

そしてGoogleの検索エンジンもよほどおかしいHTMLの構造じゃなければ 基本的に許容してサイトを評価してくれるので、こういう書き方をするとSEOに影響が出るかも って気にしなくてもいいと思います。

HTML5で追加されたタグにスタイルをあてるべきではない

最後に、序盤にもいいましたがHTML(ハイパーテキストマークアップランゲージ)というのは、 マークアップという文字列からみて構造を定義する言語なのはご周知かと思われます。

ゆえにHTML5タグにスタイリングを与えるべきではないんですよね。

HTMLとしてはスタイリングするためのタグはDIVタグをつかえという感じになっています。

DIVタグは単純なコンテナの役割なのでHTML構造という点では意味を持ちません。

ゆえにスタイリングするためのタグだと認識するべきでしょう。

headerタグやaritcleタグにstyle属性をつけたりクラスをつけてスタイリングするのは、 HTMLの使い方としては間違っているという感じです。

テーブルレイアウトと言われるTABLEタグを使った画面レイアウトが主流だった時代は HTMLでスタイリングしまくってた時期がありました。

HTMLはスタイリングするものではないということでCSSが生まれたのですが、 それでもなおHTMLでスタイリングする人がいます。

ちょっと冗長になるかもしれませんが、スタイリングをするならHTML5のタグの外側か中側に DIVタグを設けてそこを元にスタイリングしましょう。