URUOSHI管理人の、SUMMY（@URUOSHI）です。
本記事ではそんな悩みを解決します。
この記事はこんな方におすすめ
- HTML4とHTML5の違い
- HTML5でのソースの基本的な書き方
- HTML5のタグの意味と使い方
目次
HTML4とHTML5の違いとは
最近HTMLのプログラムを始めた方でしたら、もしかしたらHTMLにバージョンなんてあったの？
そう思う方多いのではないでしょうか？
HTML5自体それほど新しいものではなくて、HTML4で作成された大企業のホームページもまだあったります。
HTML5では出来る事の範囲が、動的に作らなくてもタグで実現できるようになった。
これが大きな違いだと思います。
具体例をざっとみてみます
動画や音声の埋め込みが簡単
HTML4までは、ホームページで動画を再生させる方法として「Flash」という技術を使って作成していました。
FlashはHTMLと違うプログラムが必要な為、作成するのにもう一つプログラムを勉強する必要があったのです。
HTML5では後述しますが、<video>タグですぐさま動画呼び出すことが出来たりするんです。
Flashもやっていた僕からすると、なんて良い時代なんだ…と思います。
HTMLの文章構造がシンプル
HTML4で書かれたソースコード見て頂くのが一番早いと思いますが、HTML5と比べるとソースコードが長く煩雑なものが多いです。
HTML5では「ここはこういう場所だよ！」とわかりやすく構造化できます。
例えば、「ヘッダーだよ」、「ナビゲーション」だよとタグで定義出来るので、余計なiｄやclassの表記が不要になってるんですね。
HTML構造化とは
では構造化とは何かですが、「ホームページの構造を検索エンジンにより分かりやすく伝えるために、HTMLにマークアップする専用のコードのこと」を指します。
なんですかそれ…？ってなりますよね。
HTML5で構造化を意識してコーディングすれば、クローラーがコンテンツ内容を認識しやすくなるます、その結果ホームページのインデックスが促進されたりします。
すると、SEOの神様であるGoogleに評価されやすくなるので、SEO効果が見込めるというわけです。
HTML構造化ではこうして、クローラーが来てもこのソースは分かりやすいね！とアピールして、検索エンジンに認識されやすいホームページになると、SEO対策で上位表示に繋がります。
これが俗にいうSEO内部対策の一つでもあります♪
HTML構造化のソース例
それではざっくり、HTML5のテンプレートはどんなものなのか見ていきます。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>サイト内タイトル</h1>
</header>
<nav>
<ul>
<li><a href="#">ナビ1</a></li>
<li><a href="#">ナビ2</a></li>
<li><a href="#">ナビ3</a></li>
<li><a href="#">ナビ4</a></li>
</ul>
</nav>
<article>
<section>
<header>
<h1>ここにタイトル</h1>
</header>
<p>ここにテキスト</p>
</section>
</article>
<footer>
<address>Copyright(C)なたのサイト名Allright Reserved.</address>
</footer>
</body>
</html>
本当にノーマルなHTML5のテンプレートです。
HTML4のソースと頭だけ比べてみます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
頭の長さだけで、こんだけ違うんです…。
各HTMLタグについて
それではhtml5の主要タグを解説していきます。
1.<!doctype html>
このテキストはHTMLだとブラウザに説明するための宣言です。
2.<html lang="ja">
このHTMLは日本語を扱うとブラウザに説明するための宣言です。
3.<meta charset="UTF-8">
このHTMLの文字コードはUTF-8だとブラウザに説明するための宣言です。
4.<head></head>
この中にmetaタグやtitleタグ、スタイルシート（CSS）の読み込み、スクリプト(JavaScript)の読み込みを記入したりします。
5.<body></body>
ざっくり言うと、見える部分をここに記入します。（厳密には必ずしも見えるとは限りません。）
6.<header></header>
ヘッダーと呼ばれる部分です。Webサイトの頭の部分なので、サイトのタイトル（titleタグとは異なります。h1タグを使うことがほとんどです。）などを記入しましょう。
ナビゲーションと呼ばれる部分です。よく見るこのような部分です。
8.<article></article>
その名の通り、記事などで使います。
9.<section></section>
導入部分、新着情報、お知らせなどひとつのまとまりとして使います。
著作者情報などを書きます。
主なタグはこのような感じです。
どのように使われているかは、実際みなさんの目でhtml5構造のサイトを見て、分解していく方が勉強になると思います。
HTML構造化でSEO内部対策に注力しよう！
HTML構造化は「タイトル」、「キーワード選定」、「コンテンツの書き方」というSEOを大きく上げる要素と比べると、そこまでの力は持っていません。
しかしプログラミングとしてHTML構造化を覚えておくと、SEO対策の一環にもなりますし無駄なコードを書かなくてもよくなります。
「HTML構造化はSEO対策の一部である」というのを知って頂ければ良いと思います。
それでは最後までお読み頂きありがとうございました♪
