HTMLの意味や使い方を解説！

この記事を監修した吉田です。
2021年5月現在で成功者続出の秘密のノウハウを期間限定で公開します。
今すぐ確認してください。

→クリックして"1300万円稼いだ方法"を読んでみる。

吉田

プログラミングを学ぶ時にほとんどの人が最初に触れるのが「HTML」です。しかし、初心者の人にとっては「そもそもHTMLって何？」「どうやって使うの？」と分からないことだらけではないでしょうか？

この記事ではプログラミングの初心者向けにHTMLの意味や使い方を分かりやすく解説します。後半には自分でHTMLを書いて、ブラウザに表示させる実践編も用意しました。初心者のあなたでも読み終える頃には簡単なHTMLが書けるようになっていることでしょう。

初心者でもわかるHTML

WEBサイトやブログを作成するときに欠かせない「HTML」について、初心者にもわかりやすく説明します。

HTMLとは？

HTMLとはウェブサイトを作成するためにコンピュータ向けに開発された言語のことです。例えば、この画像を見てみて下さい。

まるで暗号を見ている気分になりますが、これをブラウザ（WEBページを見るためのソフト）で読み込むと下の画像のようになります。

実はこれはYahoo!JAPANのソースコード(裏側のコード)でした。同じように世界中にあるあらゆるWEBサイトはHTMLを使って作られています。WEBサイトで右クリックをして「ページのソースの表示」を選ぶと、どのページでもHTMLが表示されます。

HTMLの例を見てみよう

では、実際にHTMLの例をひとつ見てみましょう。文章の中で別のサイトへのリンクを貼りたいときは下記のようになります。

Yahoo!の公式サイトは<a href=https://www.yahoo.co.jp/>こちら</a>から

この中の「<a href=https://www.yahoo.co.jp/>」がHTMLタグです。

これは<a>と</a>に挟まれたテキストを「href=リンク先のURL」で指定したリンク先に飛ばすことができるHTMLタグです。リングタグ（aタグ）と呼ばれています。

これをブラウザを通して見ると

Yahoo!の公式サイトはこちらから

となります。

HTMLはGoogleが読みやすくするための言語？

HTMLタグは、「Google」や「Yahoo!」などの検索エンジンが読みやすくするための言語でもあります。Googleは同じWEBサイトを見ていてもあなたとは見方が違っています。

</p></div><h2>HTMLとは？</h2><p><dfn><abbr title=Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）>HTML</abbr></dfn>とはWEBページを作成するときに使う特別な言語のひとつです。</p>

慣れない人がパッと見ただけでは記号が多くて難しいですが、上のコードで<h2>と</h2>という文字が見つけられるでしょうか？ 

<h2>HTMLとは?</h2>

HTMLとは?という言葉を<h2>と</h2>で囲んでいます。

この2つをセットで<h2>タグと呼び、見出しを表すタグのひとつです。この2つのコードで囲まれた内側（ここではHTMLとは？の部分）がGoogleには「見出し」として認識されます。

人間向けの読みやすさとGoogle向けの読みやすさ

人間向けの「読みやすさ」と、Googleなどの検索エンジン向けの「読みやすさ」は異なります。人間は見た目を変化させることで文章が読みやすくなります。

例えば文字の背景を赤くする、文字を大きくするこなどの工夫で、この部分が「見出し」だと認識できます。しかし、Googleはこれを「単に背景を赤くして、大きくした文字」 としか認識できず、見出しとは認識できません。

Googleに見出しを認識させるために使うのがHTMLです。「見出しタグ」である<h2>と</h2>というコードに挟まれている部分だけを「見出し」だと認識します。逆に言うと見出しタグを使わなければ、どんなに見た目を工夫しても見出しとは認識されないということです。

なぜGoogleに認識される必要があるの？

ではなぜGoogleに「ここが見出し」だと認識される必等があるのでしょうか？それはGoogleが検索順位を決めているからです。Googleにとってわかりやすいと判断されると検索順位が上位になり、逆にわかりにくいと判断されれば検索順位は下がってしまいます。では具体的にわかりやすいとはどういうことでしょうか？

この例のように文章をただ並べるだけではなく、見出しタグ（<h2>など）や箇条書きタグ（<ul>など）で適切なHTMLで記述することです。同時にCSSを使って人間にもわかりやすいデザインにすることも大切です。CSSもWEBサイトを作成するときに使う言語で、デザインや装飾をするための言語です。

HTMLについて詳しく解説

HTMLについて基本的な意味や必要性が分かったところで、HTMLについてもう少し詳しく説明していきます。

HTMLは何の略？

HTMLとは、「HyperText Markup Language」の頭文字をとったものです。

HyperText(ハイパーテキスト)：通常のテキストを超えた「超テキスト」というような意味

Markup:（マークアップ)：文書に目印を付ける（マークアップする）ことで、その部分の文書の中の構造（段落、見出しなど）を示すという考え方

Language: マークアップをどんなルールで行うかを表す文法

まとめると、「超テキストのための、文書に目印を付けるための文法の約束」ということになります。

ハイパーテキストの誕生 

ハイパーテキストは文書を読んでいて、ある言葉に関する文書を読みたいと思ったとき、その言葉から直接関連する別の文書を呼び出すことができる機能を持っています。このように文書のある部分と別の文書を「関連づける」ことをハイパーリンク（あるいは単にリンク）といいます。そして、複数の文書を相互に関連付けた仕組みが「ハイパーテキスト」です。

ハイパーテキストは1945年にアメリカのバネバー・ブッシュがAs We May Thinkという論文で最初に提唱した概念です。ブッシュは人間の頭脳のように連想機能を持つ情報検索の仕組みを搭載したマシンの開発すべきだと主張しました。その架空のマシン、Memexは人間の脳回路のように情報を蓄積して、関連する情報を柔軟に探すことができる装置でした。

この理論上のアイデアは様々な人が応用し、ついに1989年にティム・バーナーズ＝リーがWWW (World Wide Web)という形で具体化しました。

WWWとハイパーテキスト

当時のティムはCERN（欧州原子核研究機構）研究所に勤めていました。そこでは欧州の数千人規模の科学者が入れ替わり立ち替わり研究に関わっていたため、お互いの研究の進捗状況や前任者の資料の在り処が分からないという問題が起きていました。更新されない情報なら1冊の本にまとめることもできますが、研究内容は日々変化していくものであり、本では対応できません。

その問題を解決するべく考案されたシステムがwww=World Wide Webです。

ティムは各研究者のコンピュータに保存されている研究に関するデータや文献を相互に「リンク」させるハイパーテキストの仕組みを使うことを計画し、実現しました。これはコンピュータの機種に関係なくお互いに情報を交換することができ、新しいアイデアや技術が生まれるのに合わせて、自動的に追加・拡張していくものでした。

文書の構成要素とマークアップ 

WWWには文書をコンピュータが分析することで、より強力な情報システムを作るという目標がありました。コンピュータが人間に代わって文書を正しく分析できるようにするためには、その文書がコンピュータに理解しやすい形で書かれている必要があります。人間は文書の内容、文字の大きさ、レイアウトなどから、タイトルや重要な部分がどこか判断することができます。

しかしコンピュータにはその判断ができないので、文書にコンピュータにも分かる「目印」を付けておくこと方法が考えられました。これがHTMLの「マークアップ」です。文書の中で見出しはどこか、重要な点はどこか、などの文書の構成要素をコンピュータに理解できるようにマークアップするルールがHTMLなのです。

よいHTMLを書こう

HTMLは世界中のネットワークにある文書を相互に関連づけ、コンピュータで分析できるようにする役目があります。検索エンジンによる検索データベースもコンピュータが「リンク」をたどって世界の文書を集め、その「構造」を分析・管理することで実現しています。

HTMLの機能が正常に働くためには、HTMLがルール通りに書かれていることが不可欠です。例えば、「見出し」を示すためのマークアップを別の目的に使われてしまった場合、コンピュータが収集した「見出し」集が役に立たないゴミになってしまう可能性もあります。

本来のHTMLはシンプルで使い方も簡単なものです。WWWが効果的に力を発揮できるよう、よいHTMLを使うことが自分のためにもなります。

HTMLを書くための道具

HTMLはコンピュータの機種に関係なく機能することを目標にしているため、全てを普通の文字で表現するテキスト形式ファイルになっています

テキストファイルを作成するために必要なのがテキストエディタです。Windowsなら「メモ帳」、Macintoshなら「Simpletext」というテキストエディタが最初から搭載されています。

最初はそれらを使い、慣れたところで他のテキストエディタに乗り換えていっても良いでしょう。テキストエディタはどのプログラムにも互換性があります。

HTMLを使ってみよう

HTMLについて理解を深めたところで、実際にHTMLを使ってみましょう。

HTMLタグとは？

HTMLタグとは、<h1> や <body>など<　>で囲まれたマークのことです。タグにはそれぞれ意味があり、文章構造を明確にする役割があります。

例えば、

<title>冷凍タラバガニをおいしく食べる方法</title>

これは「titleタグ」とよばれ、Webページのタイトルを表しています。上の例は「このWebページのタイトルは、冷凍タラバガニをおいしく食べる方法である」と解釈されます。

Internet ExplorerやGoogle Chromeなどのブラウザや、GoogleやYahoo!などの検索エンジンは、HTMLタグを読むことで文章構造を認識しています。

HTMLタグには「開始タグ」と「終了タグ」があります。例の<title>が開始タグで、</title>が終了タグです。開始タグにスラッシュ（/）を追加したものが終了タグで、「このタグはここで終わりです」という意味です。

また、開始タグから終了タグまでの囲まれた部分を「要素」と呼びます。上の例では「title要素」＝「タラバガニをおいしく食べる方法」となります。

代表的なHTMLタグ

ではHTMLで代表的なタグと役割を紹介していきましょう。まず文章の構造を示すHTMLタグです。

<html></html>：HTMLで書かれた文書であることを宣言

<head></head>：文書のヘッダ（文書の説明、タイトルなどの情報）を指定

<title></title>：文書のタイトルを指定

<body></body>：文書の本文を指定

<p></p>：段落を指定

<h1></h1>～<h6></h6>：文書の見出しを指定

※数字は見出しの大きさを示す。h1がも最も大きい見出し、以下h2、h3とより小さい見出しとなる。

これらのタグの関係性を簡単に表したものが、下の図です。

構造を示すHTMLタグは、入れ子方式で文章構造を表しています。html要素の中にhead要素やbody要素があり、さらにその中により細かい要素が含まれます。

HTMLタグには他にもリンクや画像の挿入、表記の指定などの役割を果たしています。

<a></a>：リンクを指定する

<img></img>：画像を表示する

<b></b>：文字を太字にする

<i></i>：文字を斜体にする

<small>文字を小さくする

<br>：改行する

<hr>：横罫線を引く

文章の中にこれらのタグを入れることで、ブラウザで閲覧することができるWebページができあがります。

htmlファイルを作ってみよう

では実際にhtmlファイルを作成して、簡単なWEBページを作ってみましょう。

htmlの作成に必要なのは、パソコンに必ず入っているテキストエディタだけです。Windouwsには「メモ帳」、Macには「テキストエディット」または「simple text」が搭載されていますので、それらを使いましょう。特別なソフトは必要ありません。

テキストエディタを開いたら、下のコードをそのままコピー＆ペーストします。

<html>
<head>
<title>ここにタイトルを書きます</title>
</head>
<body>
<h1>１．見出し（h1）</h1>
<h2>１－１．見出し（h2）</h2>
<h3>１－１－１．見出し（h3）</h3>
<p>本文を書いていきます。こうすれば文章構造が明確になって、文章の意味が理解しやすくなります。</p>
<h3>１－１－２．見出し（h3）</h3>
<p>このように、HTMLは構造を整えることができます。また、<a href=https://nandemo-nobiru.com/ target=_blank>リンク</a>を挿入することもできます。<br>
改行タグを使えば、改行も可能です。改行タグは、終了タグが省略されるタグのひとつです。</p>
<h2>１－２．見出し（h2）</h2>
<p>HTMLにおける文章構造は入れ子式です。論文などの構成を想像すれば、理解しやすいと思います。<br>
適切なタグ設定を行うことで、文章が読みやすくなりますね。</p>
</body>
</html>

ソースをテキストエディタに貼りつけたら、保存して下さい。仮にデスクトップに保存しておきましょう。

今回はファイル名を、「webpage.html」とします。このとき、「ファイルの種類」をデフォルトの「テキスト文書」から「すべてのファイル」に必ず変更して下さい。「テキスト文書」のままだと自動的に拡張子が.txtに設定されてしまい、「webpage.html」ではなく「webpage.html.txt」と認識されて、htmlファイルではなくテキストファイルになってしまいます。

ちなみに「拡張子（かくちょうし）」とはファイルの保存形式を指定するものです。「.html」や「.txt」が拡張子に該当します。htmlファイルとして保存すると、アイコンが使用しているブラウザのものになります。Chromeを使用している場合、下の画像のようにChromeのアイコンでファイルが表示されます。

これをダブルクリックすると、ウェブブラウザが開いて下の画像のようなページが表示されます。

これが、今回作成したWebページです。h1～h3要素として、見出し指定をしている文章は大きく表示されていることがわかります。また、HTMLタグが反映されたことで、改行タグを入れたところで文章が改行されていたり、a要素でリンクを指定した箇所はリンクが貼られています。

一般的なWebサイトには、他にも多くのHTMLタグが使われていたり、HTML以外の言語も使われています。しかし、HTMLタグなしにはウェブサイトを作ることはできず、あらゆるWebサイトの基礎がHTMLタグと言えるでしょう。

HTMLとCSSの役割分担

HTMLは段落、見出しなどの情報を表しますが、CSS (Cascading Style Sheets)は文字の色、フォント、大きさ、左寄せにするといったデザイン情報を表します。

CSSを活用するとHTMLは非常にシンプルになります。同じブログの文章でもCSSを切り替えることで、異なるデザインにすることができます。

HTMLはWebページの設計図

HTMLは例えるならWebページの設計図にあたります。建物を作る時の基礎や骨組み、間取りなどを決めるのが「HTML」、外装や壁の色などがデザインの担当が「CSS」ということです。

まとめ

WEBサイトの作成は奥が深いですが、簡単なものならすぐに作ることができます。最初はパソコンに標準にインストールされている「メモ帳」などでHTMLを使った文字表示から始めてみましょう。難しい場合はWordPressなどのCMS(コンテンツ管理システム)を使うことで、HTMLが分からなくても綺麗なWEBサイトを作ることができます。

しかし、あくまでHTMLがWebサイトの基本となります。自分でテンプレートをカスタマイズしたり、SEO対策をするためにも、少しずつでも勉強して使いこなせるようになりましょう。