HTMLは、すべてのWEBページの基礎といえる、コンピューターに情報を伝えるための言語です。
この言語を使うことで、今見ているようなWEBページを実際に作ることができます。
また、コンピューターに情報を伝えるための言語は目的ごとにたくさんの種類がありますが、HTMLは他の言語に比べてやさしく、理解しやすい優れモノです。
本記事では、WEBページに関する知識がまったくないという人や初心者というような人に向けて、HTMLとはどのような言語で、何ができるのか、どのようにして使うのかといった基礎的な知識を紹介していきます。
HTMLとは？
HTML（HyperText Markup Language/ハイパーテキスト マークアップ ランゲージ）は、WEBページを作成するための基本的なマークアップ言語です。
マークアップ言語とは、コンピューターによって処理される人工言語の種類の1つです。
テキストデータの一部を“タグ”と呼ばれる特別な文字列で囲うことにより、タイトルやハイパーリンクなどの文章構造や、文字の大きさや色などの修飾情報を文章中に記述します。
WEBページは基本的にHTMLから成り立っており、ページ内の文章はもちろんのこと、他のページへ飛べるリンクや異なる色・大きさの文字もHTMLによって機能しているのです。
HTMLには大きく分けて3つのバージョンが存在しており、一般的に使われている“HTML4.01”、HTML 4.01からの派生で要素（タグ）を拡張できる“XHTML1.0”、使用可能なタグが増えて書き方もシンプルになった最新バージョンの“HTML5”が存在します。
HTMLはプログラミング言語なのか？
“HTMLとは？”の項を読んで、一部の人は“HTMLはプログラミング言語でもあるのではないか？”と考えたかもしれません。
結論から言えば、その疑問の答えはNOです。
プログラミング言語とは、計算機に対して動作の手順、方法、内容などを適切に指示するために使われる、人工的に構成された言語体系のことです。
電卓で“1＋1＝”と操作すると“2”が表示されるような、動作に対して結果が出力される言語のことを言います。
対して、マークアップ言語で行われているのは、タグによる文字や画像といった情報の出力なので、プログラミング言語の定義にはあてはまりません。
ただし、プログラミング言語とまったく関係がないかというと、そうでもありません。
なぜならば、HTMLはダイアログボックスなどのユーザーインターフェイス（UI）をHTMLで定義して配置することが可能であるからです。
UIの定義はプログラミング言語の分野であり、これを満たすHTMLはかなりの広義でいえばプログラミング言語、あるいは少なくともプログラミングに用いることが可能な言語とも言えます。
HTMLの使用例とソースコード
HTMLの身近な使用例
先述した通り、HTMLはWEBページを作成するための言語なので、HTMLの身近な使用例といえば、我々が普段目にしているWEBページとなります。
また、電子メールでもHTMLが使用されている場合があります。
画像が表示されていたり、リンクによって他のWEBページへ移動できたりする電子メールにも、HTMLが使用されているのです。
その他、モバイルアプリにもHTMLが使用されている場合があります。
iOS/Androidで動作するモバイルアプリには、HTML5を使って開発できる“ハイブリッドアプリ”という種類が存在しているのです。
WEB制作の知識があれば、それを使ってモバイルアプリを開発することができます。
ソースコード
ソースコードは、プログラミング言語で書かれたコンピュータプログラムを表現する文字列のことです。
例えば、WEBページのソースコードにはページ内における文字や画像の表示、リンクを表現する文字列が記述されています。
WEBページを右クリックして“ソースを表示する”の動作を選択すれば、実際のソースコードを見ることができます。
▲ゲームクリエイターズのWEBページ。
▲ゲームクリエイターズのWEBページを構成するソースコードを表示した状態。
HTMLの基礎知識
HTMLタグとは？
タグとは、“<”と“>”の記号で囲まれた半角の英数字のことで、文章の構造を明確にする役割を果たしています。
基本的に“開始タグ”と“終了タグ”が存在しており、開始タグから終了タグまでの記述のひとかたまりを要素と呼びます。
例えば、“<title>タイトル</title>”という記述があった時、“<title>”が開始タグ、“</title>”が終了タグ、“<title>タイトル</title>”の全体が要素となります。
HTMLタグにはtitleタグ、bodyタグ、pタグなどのさまざまな種類があり、それぞれ本文や段落などの意味を持っています。
これらのHTMLタグを使用してHTML要素を記述し、ブラウザを使用して読み込むことでホームページを見ることができるようになります。
Hyper Link
Hyper link（ハイパーリンク）は、複数の文書を結び付ける役割を担う参照情報やそのような情報が設定された文字や文章などの要素で、単に“リンク”とも呼ばれます。
もっとも身近な例は、ホームページにおいて特定のテキストや画像、ボタンをクリックすると別のページに移動する仕組みです。
使用頻度の高いHTMLタグ
htmlタグ（<html>、</html>）
HTMLで書かれた文書であることを指定するタグです。
“<html>”がHTMLによる記述の開始、“</html>”が記述の終了を表しており、文書の最初から最後までを囲う形になります。
headタグ（<head>、</head>）
文書のヘッダ（文書の説明、タイトルなどの情報）部分を指定するタグです。
htmlファイルの情報を宣言するものであり、htmlタグの次に書きます。
なお、headタグの中に記述した内容はブラウザの画面上に表示されません（ただし、titleタグといった例外が存在します）。
titleタグ（<title>、</title>）
文書のタイトルを指定するタグで、headタグの中に記述します。
記述内容がWEBブラウザの上部タイトルバーや検索結果のタイトルとして表示されるため、文書を端的に表す内容とする必要があります。
また、title要素として記述された文字列には強い重み付けが行われるため、SEOの観点では非常に重要なタグです。
bodyタグ（<body>、</body>）
文書の本文をはじめとした、ブラウザ画面上に表示される内容を指定するタグです。
ページ全体の設定も可能で、ページの背景色、背景画像、本文の文字の色、リンク色などの属性を指定できます。
なお、背景色や文字色は表示色設定の組み合わせによっては見づらくなるケースがあることから、5つセットで指定することが推奨されています。
pタグ（<p>、</p>）
段落を指定するタグで使用頻度が高く、もっとも使われるHTMLタグの1つです。
<p>と</p>で囲んだテキストを1つの段落として示します。
その特性から、pタグの要素の中に他のタグの要素が内包されることも珍しくはありません。
なお、一般的なブラウザの場合はpタグの要素の前後で1行分改行が行われます。
段落の間隔調整をはじめとした文書の見栄えを設定したい場合は、CSS（Cascading Style Sheets/カスケーディング・スタイル・シート）を使用することが推奨されています。
※CSS
HTMLと組み合わせて使用する、WEBページのスタイルを指定するための言語。
WEBページが表示される際の色・サイズ・レイアウトなどの表示スタイルやプリンタなどで印刷・出力される際の出力スタイル、などを指定できる。
hタグ（<h〇>、</h〇>）
文書の見出しを指定するタグで、〇の部分には1～6の数字のいずれかが入ります（例:<h1></h1>、<h6></h6>）。
h1がもっとも大きい（上位）見出しを表しており、数を追うごとにより小さい（下位）見出しとなります。
同じ数値のhタグが複数ある場合は、同じランクとして扱われ、個別のセクションとみなされます。
1つのセクションにおいて、上位から下位の順に見出しが続いていく場合は、そのセクションの一部であるサブセクションが開始されたとみなされます。
aタグ（<a>、</a>）
リンクを指定するタグで、リンクの出発点（クリックでリンク先に移動する）や到達点（リンクをクリックしたときの移動先）を作ることできます。
HTML5では、aタグの中にdivタグなどを含めてもよいことになっています。
逆に言えばバージョンごとにルールが異なるので、何らかの理由で異なるバージョンのHTMLを扱う際には注意が必要です。
imgタグ（<img>）
画像を表示するタグで、終了タグなしで使います。
WEB上では画像形式を指定することができます。
ブラウザ上での画像表示サイズも指定可能なので、ブラウザがページを読み込む際に指定したサイズ分の画像スペースを先に表示し、テキスト部分の読み込みを始めるといった動作を行わせることもできます。
bタグ（<b>、</b>）
文字を太字にするためのタグで、似た効果を持つタグとしてstrongタグが存在します。
HTML5では、特別の意味合いを持たせることなく他と区別するテキストを表すタグとして扱われています。
strongタグをはじめとした他に適切なタグがある場合は、そちらを使用することが推奨されます。
strongタグ（<strong>、</strong>）
テキストの強調を表す際に使用するタグで、bタグと似た効果であるという点は前述の通りです。
<strong>と</strong>で囲まれたテキストは強調され、Internet ExplorerやNetscape Navigatorなどのブラウザでは太字で表示されます。
ブラウザにより強調表現は異なる他、音声ブラウザでは強調部分が強く発音されることもあります。
brタグ（<br>）
改行を行うためのタグで、終了タグなしで使います。
pタグと似た働きをしますが、こちらは文章を明示的に改行するために使用されます。
ユーザーの環境によって行間や改行部分が変わるため、使用するとかえってテキストが読みづらくなるケースがあるので注意が必要です。
HTMLファイルの作成方法
HTMLファイルとは
HTMLファイルとは、HTMLのルールにそって記述されているテキストファイルのことで、拡張子は“.html（.htm）”です。
本質的には文字だけのファイルであるため、PCに備え付けられているテキストエディタのみで作成可能です。
なお、より編集に適した専用のテキストエディタも存在します。
HTMLタグの挿入機能や内臓ブラウザのプレビュー機能など、HTMLファイルを作成する際に非常に役立つ機能が搭載されているため、基本的にはこちらの使用が推奨されます。
HTMLファイルの作成方法
本項では、実際にHTMLタグを使ってWEBページを構成するHTMLファイルを作成します。
テキストエディタを立ち上げ、HTMLタグによるソースコードを作成していきます。
この時は、htmlの要素の中にheadの要素やbodyの要素を、さらにその中にtitle、h1、pといった細かい要素を記述していきます。
==========※カコミ==========
※サンプル
<html>
<head>
<title>（タイトル）</title>
</head>
<body>
<h1>見出し（h1）</h1>
<h2>見出し（h2）</h2>
<p>（h2で使用する文章）</p>
<h2>見出し（2つ目のh2）</h2>
<h3>見出し（h3）</h3>
<p>（h3で使用する文章）</p>
<h3>見出し（2つ目のh3）</h3>
<p>（h3で使用する文章）</p>
<p>改行<br>
<a href=https://game-creators.jp/media/ target=”_blank”>リンク</a></p>
</body>
</html>
==========※カコミ==========
ソースコードを作成したら、ファイルを保存します。
メモ帳で行う場合は、保存時に表示される“ファイルの種類”を“すべてのファイル”に変更して、拡張子が“.html（あるいは.htm）”の状態で保存します。
この作業によって、ソースコードがHTMLファイルとして保存されます。
なお、保存したHTMLファイルは自分が使用しているウェブブラウザのものになります。
保存したHTMLファイルをダブルクリックすると、WEBブラウザが立ち上がり、WEBページが表示されます。
▲作成したHTMLファイル。
▲作成したWEBページ。
▲作成したWEBページのソースコード。
段落分けを行う方法
使用例
HTMLにおける段落は通常の文章におけるそれと同じで、長い文章をいくつかのまとまった部分に分けた、その一区切りのことを指します。
pタグを使用することでその要素を段落として表示させ、段落ごとの文章を視認しやすい状態に調整できます。
タグの書き方
pタグを使用する際の基本的な形は“<p>（テキスト）</p>”です。
開始タグに手を加えて左、右寄せなどのレイアウト変更（<p align="left">、<p align="right">）や均等割付（<p align="justify">）を行うことができますが、大抵の場合は基本的な形を使用します。
文章の中で強調したい部分がある場合は、pタグによる要素の中にbタグやstrongタグの要素を作ります。
==========※カコミ==========
※サンプル
<p>（テキスト）</p>
<p align="right"><strong>（テキスト）</strong></p>
<p align="justify">（テキスト）</p>
==========※カコミ==========
リンクの表示方法
使用例
aタグを使用することで、WEBページでリンクを表示することができます。
さまざまな形式を指定可能で、リンクを貼るのはテキストか画像か、クリック時に別のウインドウで開くか否か、リンク先は別ページか同ページ内はたまたファイルか……と、詳細に決めることができます。
タグの書き方
aタグを使用する際のもっとも基本的な形は“<a href="（URL）">（リンクにしたいテキスト）</a>”の形です。
テキストを1つの段落として示すpタグの中にこれを書くことで、リンクが表示されるようになります。
別画面でリンクを開く場合は、“"（URL）"”の後ろの部分に“ target="_blank"”を記述します。
同ページ内で移動を行う場合は少し特殊で、リンクの出発点と到達点を作る必要があります。
下記のように、出発点を“<a href= "#（移動したい場所の名前）" >（テキスト）</a>”、到達点を“<（任意の開始タグ） id="（移動したい場所の名前）">”の形で記入することで、同ページ内で移動できるリンクが表示されます。
==========※カコミ==========
※サンプル
<h1 id="001">サンプル</h1>
<p>・<a href= "#002" >セクション1</a></p>
<p>・<a href= "#003" >セクション1-1</a></p>
<p>・<a href= "#004" >文章へ移動</a></p>
<h2 id="002">セクション1</h2>
<h3 id="003">セクション1-1</h3>
<p id="004"> セクション1-1の文章。</p>
<p> 文中に<a href= "#001" >リンク</a>を設置することもできます。</p>
==========※カコミ==========
画像の表示方法
使用例
文書に画像を加えることで、よりわかりやすく直感的なページを作成できます。
HTMLでは、imgタグ祖使用してJPEG形式（.jpg）、PNG形式（*.png）、GIF形式（*.gif）などの画像形式による画像ファイルを表示させることが可能です。
タグの書き方
imgタグによる要素の基本形は“<img src="（表示したい画像ファイル名）">”となっており、終了タグは必要ありません。
この時、“htmlファイルと画像ファイルを置く”あるいは“表示したい画像ファイルがある場所も記入する”のどちらかを満たしていないと、画像が表示されないので注意しましょう。
後者の方法で表記する場合、例えば“画像”というフォルダの“image.png”という画像を表示したい場合は“<img src="画像/ac.jpg">”と記述します。
その他、“title="（テキスト）”で画像のタイトルを表示できるようにしたり、“height="（数値）"”や“width="（数値）"”で画像の高さ、横幅を指定したりすることもできます。
==========※カコミ==========
※サンプル
<p><img src="（表示したい画像ファイル名）"></p>
<p><img src="（表示したい画像ファイル名） title="（テキスト） height="（数値）" width="（数値）""></p>
==========※カコミ==========
おすすめのHTMLの学習サービス
Progate
メールアドレスの他、FacebookやTwitterのアカウントでログイン可能なオンラインプログラミング学習サービスです。
プランは無料会員と有料会員（980円/月）があり、無料会員ではHTML＆CSSコースの初級編を体験でき、実際にWEBページを作りながら学ぶことができます。
コースは初級、中級、上級の3つに分かれており、段階的に基礎知識を覚えていくことができます。
また、見本のデザインをヒントに実践を行う道場コースも用意されているので、それぞれの学習コースで学んだことを実践的にアウトプットできます。
ドットインストール
HTMLについて動画で学習できるWEBサイトです。
アカウント登録なしで利用でき、無料会員用の動画は1レッスン2、3分ほどの内容で基本に関する学習を進めることができます。
プレミアム会員（980円/月）になると中上級者向けの学習も行えるようになる他、動画再生速度やボイスを変更できるようになります。
CODEPREP
最初から最後まで完全に無料で学習できる学習サイトです。
講座は入門編、基礎編、実践編にわかれており、実践編では実際にWEBアプリの作り方を学習でき、講座を完了するとアプリが完成します。
穴埋め方式で学習が進む他、1からコードを書くわけではないので、復習用としての利用など、他のサービスと併用することでより高い効果を得られます。
おすすめのHTMLの学習本
『スラスラわかるHTML＆CSSのきほん 第2版』
小さなサイト作りを通してHTMLとCSS（Cascading Style Sheets：HTMLやXMLの要素をどのように表示するか指示する仕様の一つ）の基礎を学べる入門書です。
第2版への改訂により、PCだけでなくスマホやタブレットにも対応したサイトが完成するようになっています。
図解が多く用語の補足も付いているので読み進めやすい一冊です。
ソースコードは現在のトレンドに合わせたものになっているので、現在の主流かつ最新となる知識を学習できます。
また、実習に必要なアプリも用意されているので、紙面と自分のパソコンの画面を見比べて確認しながら作業を進められます。
『よくわかるHTML5＋CSS3の教科書【第3版】』
HTMLとCSSの学習を同時進行で行える一冊で、覚えた内容をすぐにブラウザでの表示結果として確認できるので、退屈せずに学習を進められます。
使用するプロパティとその機能や書式を厳選し、一般的な制作で必要となる主要な機能にしぼって解説されています。
HTMLを学んでからCSSに進むという従来の学習方法が上手くいかなかった人には特にオススメです
『ゲームを作りながら楽しく学べるHTML5＋CSS＋JavaScriptプログラミング 改訂版』
通常、HTMLの学習書はサイトを作って学んでいくものが一般的ですが、本書は簡単なゲームを作って学ぶという一風変わった学習所です。
前半ではプログラミング経験のない人を対象に、HTML、CSS、JavaScriptの基本知識が解説されており、豊富なサンプルと演習も用意されています。
後半では、ブロック崩しや落ち者パズルのようなゲームを作成していきます。
また、改訂にあたりダウンロードサービスも用意されています。
まとめ
HTMLに関する知識は奥深く、本記事で紹介したものはその入り口のごく一部です。
しかし、それだけでもWEBページを作成可能になるほどHTMLはわかりやすい言語となっています。
また、特別な準備が必要なく、資料や学習手段が豊富なので、知見を深めていくことも難しくありません。
冒頭で話した通り、HTMLはプログラミング言語ではありませんが無関係というわけではなく、プログラミングの分野への入門につながります。
WEBページを作ってみたいという人だけでなく、これからプログラミングを始めたいという人にもHTMLの習得はオススメです。