HTML5の基本についてまとめました。HTML5とはどういったものなのか、その基礎知識から基本的な使い方まで。ビギナー向けに解説しているので、エンジニア初心者やWeb系ではないエンジニアでも理解できるよう進めていきます。ディレクターやデザイナーなど、実際にはコーディングをしない方にも基礎知識として参考にしていただければと思います。
HTML5の基礎知識
それでは、HTML5の基礎知識から解説していきます。
HTML5とは？
はじめにHTMLとはどういった言語なのか復習しておきましょう。
HTML（HyperText Markup Language）とは、Web上の書類を書くためのプログラミング言語のことです。ホームページやLP、Webアプリケーションなど、インターネット上に存在するWebページはHTMLなしには存在できません。
HTML5はHTMLの最新版にあたるバージョンで、2008年1月にドラフト（草案）の発表が、2014年10月に勧告が行われました。
HTMLとCSS、それぞれの役割
ところで、同じくWeb制作で使われる言語としてCSSもありますね。両者の違いは何なのでしょうか？
HTMLはWebページをつくるための言語だと述べました。もう少し具体的に言うと、ページの構造やコンテンツを記述しています。一方で、CSSはページのレイアウトやデザインを担っているのです。
HTML5の特徴（メリット）
さて、HTML5はHTMLの最新バージョンだと述べました。以前のHTML（HTML4など）と比べて、どんなメリットがあるのでしょうか？その特徴について確認しておきましょう。
HTMLの記述がシンプルになった
HTML5では、以前のバージョンと比べて記述がシンプルになっています。例として、HTMLの冒頭に書かれる文書型宣言を取り上げてみましょう。HTML4では下のように記述する必要がありました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
それが、HTML5では下のように非常にシンプルになっています。
<!DOCTYPE html>
文書型宣言以外にも、記述がシンプルになっている部分が多数見られます。Webページの開発や保守管理もし易くなるでしょう。
リッチな表現が可能になった
リッチな表現が可能になったことも、HTML5の大きな特徴です。HTML5では、audioやvideo、canvasなどの新しいマルチメディア要素が追加されています。従来はAdobe FlashやMicrosoft Silverlightなどに依存していたコンテンツも、HTML5だけで制作できるようになったのです。
またjQueryプラグインなど外部のライブラリに頼っていた機能も、HTML5なら作っていくことができるようになりました。有名なところで言うと、Drag & Drop APIがありますね。ファイルや画像をドラッグアンドドロップすることで、Webページに反映してくれる機能のことです。この他にも便利なAPIや機能があり、WebページやWebアプリケーションに機能を付けやすくなったと言えます。
HTML5への対応状況
HTML5はまだ新しい仕様ですが、主要なモダンブラウザであればHTML5は問題なく使えます。詳細な対応状況については、下記のサイトで確認することができます。
» Can I use… Support tables for HTML5, CSS3, etc
ページ上部の入力欄にタグなどを入力すると、各ブラウザの対応バージョンがリスト形式で確認できます。このツールは日本語には対応していないのですが、タグを入力するだけなので英語でも問題なく使っていけるでしょう。
HTML5の使い方
それでは、HTML5の使い方について解説していきましょう。
基本的な書き方
HTML5の基本的な書き方です。実際にWebページを制作する時に使う、主要なタグを順に見ていきましょう。
※ご紹介したタグをまとめたサンプルは、記事の後半に掲載しています。
DOCTYPE
文書がHTML5で記述されていることを示します。上でご紹介したように、HTML5になってから記述がシンプルになりました。
<!DOCTYPE html>
html
htmlタグです。このタグ内に、後述するheadタグやコンテンツを載せるbodyタグを書いていきます。
<html lang="ja"></html>
langの部分は、Webページで使用している言語によって値を変えます。日本語の場合は、上のようにjaと記述します。英語の場合はenと書きます。
head
headは、そのページのヘッダー情報を書き込む部分です。
<head></head>
headタグ内に記述する内容についても見ていきましょう。代表的なタグを4つご紹介しておきます。
title
ページのタイトル（表題）を記述するタグです。ページには表示されませんが、Googleで検索されたときの検索結果には表示されます。
<title></title>
meta
metaタグには、ページの付加情報を記述します。さまざまな情報が指定できるのですが、欠かせないのはページのエンコードを指定するmeta情報でしょう。下の例では、エンコードをUTF-8として記述しています。
<meta charset="UTF-8">
また、ページの説明文（要約）にあたるdescriptionも大切です。contentの部分に、ページの説明文を書きます。
<meta name="description" content="">
link
外部のCSSファイルを指定する方法です。下の例にある、hrefの部分に読み込むCSSファイルを書きます。
<link rel="stylesheet" href="">
CSSファイルが同じ階層にない場合は、下のようにパスも含めて指定しなければいけません。
<link rel="stylesheet" href="./css/style.css">
link要素では、CSSだけでなくfaviconを指定することもできます。faviconとは、ブラウザでタブの上部に表示されている小さいアイコン画像のこと。faviconを指定しなくても何ら問題はないのですが、見栄えも向上するので設定しておくことをおすすめします。
<link rel="shortcut icon" href="favicon.ico">
script
JavaScriptを読み込む場合は、下のようにscriptタグを使います。srcの部分に、JavaScriptのファイル名を記述します。
<script src=""></script>
CSSファイルを読み込むときと同じように、ファイルパスを含めて書くことが多いです。
body
headタグの次に書くのが、body要素です。その名の通り、Webページの本体となるコンテンツを記述していく部分にあたります。
<body></body>
bodyタグ内には、非常にさまざまな要素が書き込まれます。その中から、ここではページの骨格となるような、重要なタグに絞ってご紹介していきます。
section
sectionとは、コンテンツの一つのまとまり（セクション）を示すタグのこと。HTML5になってから新しく追加されたタグです。
<section></section>
セクションを表すタグは他にもいくつかあります。例えば、後述するheaderやnav、articleなどのタグがあります。sectionはそれらのセクションタグとは異なり、特別な意味を持っていません。汎用的に使われるセクションタグ、ということですね。
header
グローバルナビゲーションやヘッダー画像など、ページのヘッダーコンテンツを指定するタグです。headerタグはHTML5から新しく追加されたタグの一つです。
headerタグを使わなくてもヘッダーコンテンツは作れますが、ヘッダーであることを明示的に記述できるので積極的に導入した方が良いでしょう。
<header></header>
※ページのヘッダー情報を指定するheadタグとは、全くの別ものです。混同しないよう注意しましょう。
footer
headerに対して、フッターコンテンツを指定するタグがfooterです。一般的には、copyrightや作成者の情報などを記述することが多いですね。こちらもHTML5から追加された、新しいタグの一つです。
<footer></footer>
nav
ナビゲーションであることを示すタグです。HTML5からの新しいタグの一つです。navの中にはグローバルナビゲーションなど、他の主要なページへのリンクを記述することが一般的です。
<nav></nav>
article
一つの記事であることを示すタグです。articleが一つの記事として完結している必要があるので、例えば記事一覧では複数のarticleタグが使われることになります。
記事だけでなくコメントにも使われますし、入れ子にして階層構造をつくることもよくあります。
<article></article>
h1
最後は見出しタグのh1タグです。
<h1></h1>
見出しタグは、h1の他にもh2、h3、h4などがあります。h1タグはその中でも、ページの大見出しにあたる最も上位の見出しタグです。
サンプル
ここまででご紹介してきたタグを使えば、Webページの基本的な骨格は出来上がります。下にサンプルとしてまとめておきましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページのタイトル</title> <meta name="description" content="ページの説明文" /> <link rel="stylesheet" href="./css/style.css"> <script src="./js/script.js"></script> </head> <body> ページのコンテンツ </body> </html>
SEO対策！重要タグ活用のポイント
最後に、SEO対策を行う上で重要なタグと、活用のポイントについてまとめておきましょう。
SEOとは、Googleなどの検索エンジンで上位に表示されるための手法のこと。SEOには2種類あって、WebページのHTMLやページ構造を対象とした内部対策と、被リンクをかせぐ外部対策とがあります。
HTMLの重要タグについて理解しておくことで、内部対策に強いWebページを作れるようになります。Webページを制作したり運用する際に、参考にしていただければと思います。
title
前述の通り、titleタグはページのタイトル（表題）のことでした。このtitleタグは、内部対策では非常に重要です。SEO対策の一環として、必ず取り組むようにしてください。
titleタグが重要な理由は2つあります。一つは、Googleなどの検索エンジン（のクローラー）がtitleタグを重要視しているから。もう一つは、ユーザーが見る部分だからです。
Googleなどの検索エンジンでは、検索結果の画面に各ページのタイトルが表示されていますよね。titleタグに書いた内容は、ここに表示されているのです。ユーザーはタイトルを見てページを訪問するかを決めているので、titleタグの重要性はおわかりいただけるかと思います。
さて、titleタグを意識するとはいっても具体的には何をすればいいのでしょうか？いくつかのポイントがあるので、順に見ていきましょう。一つ目は、文字数です。Googleの検索結果では、表示されるタイトルの文字数が決まっています。目安としては、32文字に収まるようにするといいでしょう。
二つ目のポイントは、キーワードを前半に配置することです。ページごとにターゲットとしているキーワードがあるかと思いますが、それをタイトルの前の方に配置するのです。
三つ目は、コンテンツの内容を明確に表現していることです。titleが魅力的でも、ページの内容と食い違っていたらダメです。ユーザーに支持されないだけでなく、検索結果も悪いものになるでしょう。ページのコンテンツを的確に表していることが大事なのです。もちろん、各ページで固有の内容にすることも忘れずに。
meta description
次は、meta情報の一つであるdescriptionです。以前はkeywordsもSEOに効果があると言われていたのですが、現在ではdescriptionだけに注力すればいいとされています。
descriptionが重要な理由について解説しておきましょう。titleと同じく、descriptionはGoogleなどの検索結果に表示されます。ページタイトルの下に表示されている、説明文がありますね。ここがdescriptionの内容です。Googleもユーザーも、この内容を基にページを評価しています。
※なお、descriptionを設定していない場合は検索エンジンが自動的に関連する文章を抜粋して検索結果に表示します。
descriptionを最適化する方法です。まずは文字数。120文字におさまる文字数が良いとされていますので、それを目安に記述するようにしてください。
次はキーワードの配置です。titleと同じく、前半にキーワードを盛り込むようにしてください。Googleの検索結果では、キーワードは太字で表示されます。三つ目のポイントは、titleと同じです。ページの内容を適切に表現していること。
titleはしっかりと設定しているのに、descriptionはないがしろにしているケースも散見されます。titleと同様、しっかりと対策をするようにしましょう。
h1
3つ目は、見出しタグのh1です。ページの大見出しとなる重要なタグなので、内部SEOを行う時はtitleやdescriptionと一緒に対策を忘れないようにしてください。
h1タグが大切な理由について確認しておきましょう。h1は、ページコンテンツの大見出しとなるタグでした。Googleもそれはわかっていて、クローリングする時にh1を参考にページの内容を理解しているのです。つまり、正しく効果的にインデックスしてもらうためにはh1が欠かせないと言うことなのです。
h1タグを最適化するには、どうすればいいのでしょうか？文字数の制限はありませんが、コンテンツの内容がわかりやすく伝わる文章であることが大切です。ページを訪問してくれたユーザーの目線に立って、h1を作っていくといいでしょう。
ところで、h1を画像に設定しているケースを多く見かけます。もちろんそれでもいいのですが、その場合は必ずalt属性を設定するようにしてください。alt属性とは画像が表示されなかった時に代わりに表示される文章なのですが、これはクローラーも参考にしています。少し面倒ですが、画像にh1を設定する場合は忘れずにalt属性を指定するようにしましょう。
あとがき
HTML5の基礎知識と基本的な使い方についてご紹介しました。ご紹介した内容はHTMLの基礎にあたる内容ですが、HTML5をより深く理解するキッカケにしていただければ幸いです。