Webマーケティングに関わる人なら、HTMLという言葉を一度や二度は耳にしたことがあるでしょう。しかし、「HTMLって何？」とあらためて聞かれると、答えに詰まってしまう方も少なくないのではないでしょうか？

この記事では、Webサイト構築に無くてはならない要素であり、かつSEO対策においても重要な鍵を握る「HTML」について、マーケ担当者がぜひとも押さえておきたいポイントをご紹介します。

そもそもHTMLとは…

HTMLはHyper Text Markup Language（ハイパーテキストマークアップ言語）の頭文字を並べたもので、Webページを記述するために使われる一種のプログラミング言語です。より厳密に表現すると、Google ChromeやFireFox、Microsoft EdgeといったWebブラウザ上で表示するコンテンツを作成するために使用するマークアップ言語、ということになるでしょうか。HTMLで記述したコンテンツ（HTML文書）は、Webブラウザを使って、指定したとおりの構造で表示することができます。

【図：HTML、Webページ、Webブラウザの関係】

HTMLのタグについて

HTMLではタグと呼ばれるもので文字列などを囲む形でコンテンツを記述します。タグは< と > で決められたキーワードを囲んだもので、HTMLにはや

タグにはそれぞれ決められた役割があり、たとえば と記述しておくと、通常はWebブラウザのタイトルバーに「はじめてのHTML」と表示されます（※1）。

※1：「タグには決められた役割がある」と書きましたが、実際にはWebブラウザによって微妙に動作が異なる場合があり、これがいわゆる「ブラウザ間の互換性」という問題を引き起こすことがあります。

HTMLとCSS、JavaScriptの関係

ここでひとつ注意しておきたいのは、HTMLはあくまでも文書の「構造」、つまり、文書のタイトルや段落、見出し、強調する箇所などを表現するための言語であり、デザインやレイアウトを表現するためのものではないということです。

もちろん、工夫次第ではHTMLを使ってレイアウトを整えたり、デザイン的な要素を実現したりすることも可能です。実際、インターネットが普及し始めた頃は、HTMLのtableタグという表組み用のタグを駆使して複雑なレイアウトを実現するテクニックが流行したことがありました。

けれど、現在ではこうした使い方は推奨されていません。というのは、文書構造の定義とレイアウト・デザイン的な要素は分離した方が分かりやすいからです。また、Webページを制作する際にも、文書の作成作業とデザイン作業とを分業で進めやすくなります。

こういった背景のもと、Webページのデザインを表現するための技術として登場したのがCSS（Cascading Style Sheets／カスケーディング・スタイル・シート）です。CSSを使うと、HTML文書内の様々な要素に色付けやフォントサイズ、表示位置の指定などを行うことが可能です。

HTML文書と組み合わせて使われる技術としては、JavaScriptも重要です。JavaScriptは簡単にいうとWebページ上で動的な処理を実行させるために使われる技術です。JavaScriptを利用すると、問い合わせフォームの送信ボタンクリック時に入力エラーをチェックしたり、ショッピングカート内で購入数を変更した際に金額を自動計算したりといった動きを実現することが可能です。

【図：HTML、CSS、JavaScriptの関係】

HTML5についても知っておこう

HTMLにはいくつかのバージョンがありますが、現在の最新はHTML5（HTML改訂第5版）とよばれるものです。

HTMLが誕生したのは1989年のことですが、1999年2月にHTML4が発表されて依頼、このHTML4が長い間利用されてきました。その後、2014年10月にHTML5が発表され、現在はこのバージョンが多く使われるようになってきています。

HTML4とHTML5の違いとしては、文書構造がシンプルになったこと、動画や音声の埋め込みを簡単に行えるようになったこと、新しい要素（タグ）が追加されてより柔軟な表現が可能となったことなどが挙げられます。

また、かつてはJavaScriptを使わなければ実現が難しかったような動的な処理を、HTMLだけで実現できるようになったことも大きな変更点だといえるでしょう。HTML5を使えば、画像のポップアップ表示やフェードアウト、ドラッグ＆ドロップといった操作をHTMLだけで実現することが可能です。

 

SEO対策で重視されるHTMLタグ

最後に、HTMLとSEO（Search Engine Optimization／サーチエンジン最適化）対策の関係について触れておきましょう。

SEO対策ではWebページを検索エンジンに上位表示させるために様々な取り組みを行いますが、中でも重視されるのがHTML文書のチューニングです。

SEOとは、突き詰めていえば「検索エンジンにWebページの存在を正しく認知/理解してもらうための活動」です。そして、コンピュータ・プログラムの一種である検索エンジンは、HTMLで書かれたコードを解読することによってWebページの内容を理解しようとします。このため、検索エンジンが正しく理解できるようなHTMLコードを書くことが重要なSEO対策となるのです。

ここでは、SEO対策で特に重視されるタグをいくつかご紹介しておきましょう。

 

titleタグ

titleタグは文字通り文書のタイトルを定義するためのタグです。

タイトルは文書を総括するものであるため、検索エンジンはこのタグを重視すると考えられています。SEO対策としては、titleタグ内に上位表示させたいキーワードを自然な形で含めることが重要だと言われています。

h1タグ

h1タグは文書の大見出しを定義するためのタグです。

大見出しは通常、一つのページに一つだけ定義するもので、タイトル同様に文書の概略を表す重要な要素です。検索エンジンが文書の内容を理解する際にもこのタグが重視されると言われています。h1タグの要素におも、上位表示させたいキーワードを自然な形で含めるようにしましょう。

metaタグ（description）

metaタグはHTML文書に関する様々なメタ情報を記述するためのタグで、通常はmeta と共にオプションをつけて使われます。中でも特に重要とされているのがdescriptionというオプションで、その文書の概要を記載しておくのに使います。

ここに記載した内容は、検索結果ページにページの説明として表示されます。検索エンジンはこのタグの内容を重視しないという意見もありますが、上記のような理由により、このタグには適切な内容を記述しておくように心がけるべきです。

なお、metaタグにはkeywordというオプションがあります。keywordオプションは、そのページにとって重要なキーワードを記述するためのもので、かつては検索順位を上げる上でこのタグが重要視されていたことがありました。しかし、現在ではSEO面での効果は低いと考えられています。とはいえ、このオプションを全く使用しなくても良いということではありません。過剰な対策は不要ですが、ページを表現する適切なキーワードを指定しておくように心がけましょう。

SEO対策はリバースエンジニアリング

GoogleやYahoo!などの検索エンジンは、表示順位を決定するアルゴリズム（方式）を正式に公開しているわけではありません。このため、SEO対策は実際の表示結果を元に逆引きで検索エンジンの動きを探る、一種のリバースエンジニアリングのような形で行わざるを得ません。また、検索エンジンのアルゴリズムが予告なく変更される可能性も十分にありえます。

上記にて「SEO対策において重視されるタグ」をご紹介しましたが、あくまでも現時点では広く一般にこのように考えられているというレベルの話です。これらのタグについて対策しさえすれば必ず上位表示されるというものではありませんし、人によって異なる解釈がなされている場合も少なくありません。あくまでも一つの目安として捉えておいてください。

まとめ

以上、この記事ではHTMLの概要を解説し、SEO対策時に重視されるタグをいくつかご紹介しました。近年になってCMSが普及し、HTMLのコードを手で入力してWebページを作成する機会は減りつつありますが、基本的な知識を押さえておくに越したことはありません。

特にSEO対策に取り組む方には、この記事を手始めとして、HTMLについての知識を深めてみることをお勧めします。