【HTML5】HTML5をちゃんと学習する_明確な文書構造について①【3日目】

はじめに

この記事から、「HTML5で出来るようになること」を掘り下げながら学んでいきます。

1日目の記事のHTMLで出来るようになることに記載しました、以下の4つです。

  • より明確に文書構造を示すことができる
  • フォームの入力補助やチェック機能を属性で指定できる
  • 動画や音声データをHTMLからシンプルに扱える
  • 様々なAPIの追加により、ウェブアプリケーションが構築しやすくなる

上から順にやっていこうと思ってます。

※ とりあえずこんな形でしばらくやっていこうかと思ってますが、「こんなとこもやっといたらええで」的なものがあればアドバイスいただけるとありがたいです。。

"より明確に文書構造を示すことができる"とは

HTML5リファレンスより、

HTMLはマークアップ言語であり、HTML 4以前でも文書構造を示すことはできました。
ただ、今までは適切な要素が無い場合には、何でも<div>でくくってしまうことが多かったように思います。 HTML5では、文書構造を表す新しい要素が加わることで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになります。

とのこと。

詳しくは参照先の画像にも表されていますが、HTML4.01までのdivタグで文書構造を組み立てていた頃と違い、
HTML5では文書構造を組み立てる際に、様々なタグ(header, section, article, nav, footer等...)を利用することになります。
こうすることで、より明確な文書構造を示すことができるようになるというわけですね。

タグを使い間違えたらどうなるか

こうなると、構造がわかりやすくなって良いな〜といった印象を持ちますが(当然)、
「じゃあ使い間違えたらどうなるのよ???」と思いました。

見た目は?

見た目は変わるのか?試してみた

wrong.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトルhogehoge</title>
</head>
<body>
  <footer>
    <p>ヘッダーテキスト_wrong</p>
  </footer>
    <nav>
    <ul>
    <li><a href="#">nav1</a></li>
    <li><a href="#">nav2</a></li>
    <li><a href="#">nav3</a></li>
   </ul>
    </nav>
  <article>
    <h1>HTMLの構造</h1>
    <section>
      <h2>header</h2>
      <p>headerタグはヘッダーのまとまりを表現するタグです。</p>
    </section>
    <section>
      <h2>footer</h2>
      <p>footerタグはフッターのまとまりを表現するタグです。</p>
    </section>
  </article>
  <header>
    <p>コピーライトテキスト</p>
  </header>
</body>
</html>

さて、というわけでこんなhtmlを書いてみました。
スタイルとかは特に適用させずに書いてますが、どこがおかしいかは一目瞭然ですね。

「headerとfooterの意味知ってる???(煽」 という間違いです。
これをブラウザで表示させてみましょう。


※わかりづらかったんで水平線で区切ります
wrong.html


これを踏まえて、続いて以下のhtml。

correct.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトルhogehoge</title>
</head>
<body>
  <header>
    <p>ヘッダーテキスト_correct</p>
  </header>
    <nav>
    <ul>
    <li><a href="#">nav1</a></li>
    <li><a href="#">nav2</a></li>
    <li><a href="#">nav3</a></li>
   </ul>
    </nav>
  <article>
    <h1>HTMLの構造</h1>
    <section>
      <h2>header</h2>
      <p>headerタグはヘッダーのまとまりを表現するタグです。</p>
    </section>
    <section>
      <h2>footer</h2>
      <p>footerタグはフッターのまとまりを表現するタグです。</p>
    </section>
  </article>
  <footer>
    <p>コピーライトテキスト</p>
  </footer>
</body>
</html>

こちらはheaderとfooterタグを入れ替えて、正しいであろう形にしております。
ブラウザでみてみましょう。


correct.html


結論から言うと、見た目にはなんの違いもありません。

「え、じゃあ別にそこまで敏感にならなくてもよくねえか???」って思ったりした時代もあったわけなんですが()

何が良くない??

個人的には特に以下の2点かなと思います。

HTMLをみた人が構造を理解しづらい

画面のソースコードを見る人はたくさんいるはずです。

特に、チーム開発をしていて、HTMLを書く立場には様々あると思いますが、
例えば複数人で開発している場面だと、構造が明確になっていないと、わけがわかりません。

一つの画面のHTMLを誰かが書いたとして、その人が書いたHTMLを他の誰かが見て、
CSSやJSを書いたりするときに、HTMLが訳のわからない構造をしていると、CSS, JSを書く側の人間はたまったもんじゃないでしょう。

「なら無理にHTML5を使う必要ないじゃん...」となるかもですが、明確に文書構造を表しやすくするためにこれだけの種類のタグがあるので、正しく使えると、チーム内みんなハッピーになると思いませんか?
私は思います。そしてそんなハッピーな場に当事者として居合わせてみたい。(切実)

SEO的にイイ!!

いつかも言った気がしますが、SEO的にもイイです。

参考:https://creive.me/archives/8814/

上記の参考記事にも書いてありますが、構造を明確に正しく表すことで、検索結果にも大きく影響してきます。
サイトの訪問者増加にもかなり大きく影響をもたらすでしょう。

先ほどは「他の人にもわかるように」でしたが、検索エンジンも同じです。
Google先生も喜んでくれます。
いつもお世話になっているのだから、私たちからできることはちゃんとして、Google先生にも喜んでいただきましょう(?)

次回

少し短いですが、今回は以上です。
次回は文書構造を構成する上で利用する各タグについて掘り下げて見ていこうと思います。
https://qiita.com/mgr/items/3c1b5aaf00fb8bd50f15

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.