近年、パソコンやスマートフォンの普及により、インターネットを介したオンラインでの企業活動がますます重要になっています。
中でも、Webの仕組みの根幹を成している「HTML」を理解しておくことは大切です。
HTMLとは、ホームページなどのWebサイトをつくる上で欠かせない言語ですが、その内容について「何から学べばよいのか」と課題を抱えている企業や、「わかりそうでわからない」と難しく感じている担当者も少なくないでしょう。
本記事では、初心者でも簡単に学べるHTMLの基本やその活用シーンについて、また、理解しておきたい「HTMLタグ」や「CSS」の基礎構造も、わかりやすく解説します。
目次
HTMLとはどんなもの？
HTMLとは、簡単に表すと、インターネットで閲覧しているWebサイトに表示される画面をつくっている言語です。
「Hyper Text Markup Language（ハイパーテキストマークアップ言語）」を略したもので、わかりやすくいえば、Web上で公開しているページのテキスト（文書）やレイアウトなどの構造を定義している書式となります。
「マークアップ言語」というと難しく感じられますが、Webサイト内のどこにタイトルや本文を配置し、段落のどこまでをひとまとまりにするかなど、文章の構造を明確にする役割で、基本的には世界中の作成者にとって使いやすい仕様を目指しているものです。
Webサイトの見た目を変化させるために「HTMLタグ」という目印を使って、作成者がコンピューターに指示を出しているものと理解しておきましょう。
●HTML誕生の背景
HTMLとは、1980年代にその前身である「SGML（Standard Generalized Markup Language：標準汎用記述言語）」から生まれた言語です。
当時ISO（国際標準化機構）で標準化されていたSGMLは、表現の自由度は高いものの使いこなすのが難しく、さまざまな環境で多くの人々が簡単に利用できるような、わかりやすい構造を定義していく必要がありました。
そこで誕生したのがSGMLの機能をベースにしたHTMLです。
1989年、世界規模の技術研究所「CERN（欧州原子核研究機構）」にプログラマーとして勤めていたティム・バーナーズ=リー氏（以下、バーナーズ=リー氏）が、どのような機種・ソフトからでもサーバーにある情報を閲覧可能にするインターネットシステム「WWW(World Wide Web)」を開発。
そのシステムの一部が、HTMLの初期バージョンである「HTML0」でした。
1994年には、バーナーズ=リー氏によって設立された国際団体「W3C（World Wide Web Consortium)」において、Webページを表現する言語「HTML」を国際標準技術として策定。世界中で広く普及されることになりました。
HTMLは1993年にHTML1.0、1995年にはHTML2.0、1997年はHTML3.2と、年々進化し続け、2014年には現在の最新バージョンであるHTML5が勧告されています。
●XMLやXHTMLとの違い
HTMLを学ぶ上で、よく比較されるのが、同じくマークアップ言語である「XML」や「XHTML」です。
XMLはHTMLと同様にSGMLの機能をベースにした言語になります。
HTMLとは「人間側にとって見やすい情報表示を行うためのもの」ですが、XMLは「機械側にとってわかりやすく情報伝達するためのもの」で、それぞれがまったく異なる特徴を持っていることがポイントです。
XMLはプログラム仕様であるため、HTMLよりも拡張性が高く、データの並べ替えや交換、重要度を認識・管理させる作業に活用されていると理解しましょう。
一方、XHTMLは、XMLの機能をベースにしながらHTMLの特性も併せ持っている、ちょうど中間的な言語だといえます。記述のルールがHTMLよりも厳密なため、手順は多くなりますが、表現の自由度が高いことがポイントです。
HTMLよりもはるかに認知度が低く、十分な学習機会がないことから、普及は進んでいない状況です。開発自体は2009年に終了しているため、新しいXHTMLが今後誕生することはおそらくありません。Webサイトを作成する場合にどちらを使うか迷った場合には、一般的なHTMLを使用するとよいでしょう。
HTMLタグの基本とは？
ホームページなどのWebサイトを作成する際に活用するHTMLタグとは、文章の構造をコンピューターに指示し、見出しや段落、画像の表示や他の文書へのリンクなどを指定する言語です。具体的にどのようなものなのか、基本の構造を確認していきましょう。
●HTMLタグの代表的な種類
|
<h1>〜<h6> |
見出しを作成するタグ（数字が小さいほど大きい見出し） |
|
<a> |
リンクを埋め込むタグ（他のページへリンク先の指定） |
|
<p> |
段落指定するタグ |
|
<br> |
改行指定するタグ |
|
<hr> |
罫線を水平歩行に引くタグ |
|
<img> |
画像を挿入するタグ |
|
<button> |
ボタンを作成するタグ |
HTMLタグは100種類以上あり、上表のような目印（タグ）を使って、表示する文字に意味を持たせることができます。
例えば、「HTMLとは何か？」という見出しを作成する場合は
|
<h1>HTMLとは何か？</h1> |
HTMLタグ「<h1>」を使って、見出しだとわかるように開始と終了部分を囲みます。見出しは「<h1>〜<h6>」まで、表したい文字の大きさによって選定可能です。
同様に、「HTMLタグ」というボタンを作成したい場合には、以下の囲みで作成できます。
|
<button>HTMLタグ</button> |
ボタンのタイプ（種類）は「type=””」で表しましょう。例えば、汎用ボタン（クリック時の動作が決まっていないもの）で「ボタン」を作成する場合は
|
<button type=”button”>ボタン</button> |
となります。表したいボタンをタイプで指定することがポイントです。
囲みの終了タグには、基本的に</h1>や</button>のようなバックスラッシュが入ります。
ただし「HTML5」の場合、「br」「hr」「img」などの「空要素」と呼ばれるタグはバックスラッシュをつけなかったり、「p」のバックスラッシュは省略可能だったりと、記述方法が異なるため注意しましょう。
HTMLタグでSEO対策
HTMLタグに間違いがあったとしても、基本的に検索エンジン（GoogleやYahoo!などの検索プログラム）から罰則等はありません。
例えば、Googleの巡回プログラムである「クローラー」は、インターネット上にあるWebサイト・画像・PDFなどのさまざまな情報を日々取得しており、HTML構造のエラーやミスも補正して判断できるといわれています。
ただし、クローラーがHTML内のリンク間を移動して解析・データベース化した情報をもとに、検索エンジンの結果が表示されているため、作成したページを正しく認知してもらうことは重要です。
クローラーに認識されなければ、自社のWebサイトを検索結果として表示してもらうことはできません。作成したサイトが検索結果の上位に表示され、多くの人に見てもらうためにはHTMLの最適化を行い、効果的なSEO対策を施すことが必要となります。
具体的には、「h1～h4」に適切な配分でキーワードを入れること、また、クローラーの回遊率を上げるために「タグ」の埋め込みリンクには適切なキーワードを入れること、リンク切れに注意すること、などが挙げられます。
|
h1 |
大見出し（タイトル） |
|
h2 |
中見出し（章・目次など） |
|
h3 |
小見出し（各章のポイント） |
|
h4 |
超小見出し（h3よりも小さい補足） |
ユーザーと、検索エンジンの両者にとって重要なのが見出しのタグ「h1～h4」です。そのWebサイトの内容を知るために、見出しは重要な手がかりとなります。よく検索されているキーワードや、ユーザーが見つけやすいキーワードを見出しに入れておきましょう。
「<a>タグ」のリンクも同様に、内容がよくわかる適切なキーワードを入れ込むことが大切です。
CSSとは？
HTMLを理解する上で、「CSSとは何か」「CSSとHTMLの違いはどこにあるのか」といった疑問を持つ人は多いでしょう。CSSの基礎や具体的な活用例は以下になります。
●CSSの概要と歴史
CSSとは「Cascading Style Sheets」の略称で、HTMLと同様、W3Cにより勧告された「文章のスタイルを指定する言語」です。
1994年にホーコン・ウィウム・リー氏が初めて提案し、1996年に「CSS1」が誕生。その後「CSS2」「CSS2.1」を経て、現在は「CSS3」が最新のものとなります。
HTMLが文章構造自体を指定する言語なのに対し、CSSは文章にどのような装飾（デザイン）を行うかを指定できる言語です。
わかりやすくいえば、文章の内容を表すのがHTML、その文章の色やサイズなどを指示するのがCSS。
HTMLタグやHTMLファイル（HTMLタグで囲んだ文章を集めたファイル）に直接記述したり、CSSファイル（外部に作ったファイル）に記述したりして作成します。
●CSSでできること
CSSを活用すれば、見出しを吹き出しや帯（リボン）の形にすること、背景にグラデーション効果を施すこと、アニメーションを作ることなども可能です。
1文字ずつ時間差で登場するテキストアニメーションや、波紋のように円が広がるアニメーション、さまざまな種類の回転や紙吹雪もCSSで指定することができます。
アニメーションでさらに動きを出したいときは、JavaScript（動作を定義するプログラム）と組み合わせて表現するとよいでしょう。
Webサイト（ホームページ）の多くはHTML、CSS、画像、JavaScriptのデザインで作られています。
競合企業のHTMLやCSSを参考にしながら、自社のオリジナルデザインを構築しましょう。
まとめ
Webの仕組みの根幹となるHTMLとは、文章の構造を指定するための言語です。
Webサイト（ホームページ）の作成方法を学ぶ際には、HTMLタグの基本やHTMLとCSSの違いを理解すること、また、閲覧するユーザーや検索エンジンを意識しながらSEO対策を行うことがポイントになります。
さまざまなWebサイトの基礎構造を参考に、HTMLを習得していきましょう。
