この動画はメンバー限定動画です
全ての講座が
月額990円で学び放題
HTML入門HTMLタグを書いてみよう
記事を共有：
HTML（Hyper Text Markup Language）とは、Webブラウザ上に表示する「Webページ」と呼ばれる文書を作成するためのコンピュータ言語です。
まずは早速作成してみましょう。
エディタを準備しよう
HTMLを作成するには、「テキストエディタ」と呼ばれる文書を作成するためのソフトが必要です。さまざまなものがありますが、ここでは無償で利用できる「Visual Studio Code（VSCode）」というエディタソフトを利用します。
またセットアップなどをしていない方は、次の講座からVSCodeについても学んでみてください。
HTMLを書いてみよう
それでは、エディターが起動したら「ファイル→新しいテキストファイル」メニューをクリックして、次のように入力しましょう。文章自体は適当で構いません。
HTMLとは
HTMLとは、Hyper Text Markup Languageの略で・・・
タグとは
タグとは・・・
ファイルを作ったら、「ファイル→名前をつけて保存」メニューでデスクトップなど、分かりやすい場所に保存しましょう。ここでは「index.html」というファイル名で保存します。
HTML文書はファイルの拡張子（. 以降の数文字の英数字）を「.html」または「.htm」とするのが一般的です。これによって、HTML文書であることを明確することができます。
Webブラウザに表示しよう
作ったHTMLファイルを、Webブラウザで表示してみましょう。Webブラウザの「ファイル」メニューから開くこともできますが、ファイルを直接ドラッグすることでも開くことができます。開くと、図のように改行はなくなってしまっていますが、一応文章の内容がWebブラウザに表示されます。
文章にタグで意味をつけよう
今、この文書はなにが見出しで、なにか本文かという区別がつきません。よく、メールなどでは文章の頭に記号を付加することで、見出しであることを示したりすることがあります。
これと同様に、Webブラウザにもどこが見出しで、どこが本文かを指示する必要があります。ここで使われるのが、「HTMLタグ（または略してタグ）」という記号です。
先頭の行を次のように変更してみましょう。残りの内容は削除してしまって良いでしょう。
<h1>HTMLとは</h1>
これで再度、Webブラウザで表示してみましょう。文字が大きくなりました。
この前後に挿入した「<h1></h1>」という記号が「HTMLタグ」です。続きの行にもそれぞれ挿入してみましょう。次のようになります。
<h1>HTMLとは</h1>
<p>HTMLとは、Hyper Text Markup Languageの略で・・・</p>
<h2>タグとは</h2>
<p>タグとは・・・</p>Webブラウザに表示すると、書式が整って表示されるようになりました。
HTMLタグの書式
HTMLタグは、次のような書式で作られます。
<要素名>要素</要素名>この時、先頭に書いたタグを「開始タグ」、終わりに書いたタグを「終了タグ」と呼び、HTMLタグは基本的に開始タグと終了タグがペアで利用されます。
このペアで文章を挟むことで、「ここからここまでが見出しですよ」とか「本文ですよ」という「範囲」を示すことができるというわけです。この作業のことを「マークアップ」と言います。
タグの種類（要素名）の部分は、あらかじめ各キーワードが決められていて、例えば段落は「p（Paragraph：段落）の頭文字）」、見出しは大見出しが「h1」で中見出しが「h2」など、文字列とその意味が決められています。現状100種類以上あり、これをある程度覚えて組み合わせて使っていくことになります。
すべてのタグは、次のリファレンスサイトなどで確認ができますが、最初からすべてを覚える必要はありません。
HTMLの基本タグ
ここまでのサンプルでも、Webブラウザには一応正しく表示されていましたが、「HTML文書」としては少し情報が足りていません。通常は、「決まり文句」のような基本タグをいくつか加えます。仕上げていきましょう。
DOCTYPE宣言
HTMLファイルの先頭は「DOCTYPE宣言（ドックタイプ宣言）」と呼ばれる、その文書がどのような種類のものであるかを宣言するところから始めます。ここでは、HTML文書を表すために次のように記述します。
<!DOCTYPE html>これにより「HTMLの最新バージョン」と言うことを表します。詳しくは後述します。
htmlタグ
次に、どこからどこまでがHTMLであるかを示すために、<html>タグで囲みます。ただしこれはほぼ決まり文句で「先頭から終わりまで」を囲むという事以外の用途は現状ありません。
<!DOCTYPE html>
<html>
</html>headタグ、bodyタグ
続いて、Webブラウザに表示する領域か、それともそれ以外の情報を示すものかを表します。表示する領域は<body>タグで、それ以外を<head>タグで囲みます。ここまで書いてきた内容は、<body>タグの中に移動しておきましょう。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...
</body>
</html>
meta charaset
<head>タグの中には、その文書のさまざまな情報を書き込みます。代表的なのは、その文書がどのような「文字コード」で書かれているかを示すための<meta>というタグを挿入します。日本語の場合、「UTF-8」という文字コードが利用されます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>HTMLとは</h1>
<p>HTMLとは、Hyper Text Markup Languageの略で・・・</p>
<h2>タグとは</h2>
<p>タグとは・・・</p>
</body>
</html>HTMLのバージョン
先のDOCTYPE宣言で「HTMLの最新バージョン」という言葉が出てきました。実は、HTMLには「バージョン」という概念があります。
昔の入門記事などで、HTML5とかHTML4.01等HTMLの後に数字が付加されていることがあります。実際に、HTMLは5までは番号でそのバージョンが管理されていました。この番号に沿って、HTMLの「仕様」というものが改訂され、使えるタグが増えたり減ったり、使い方が変わるといったことの足並みを揃えていたというわけです。
DOCTYPE宣言は本来、「どのバージョンのHTMLを採用しているか」を示すために使われていて、その当時は次のようにかなり複雑な書式で構成されていました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">この場合、HTML 4.01で作られていることを示しています。
しかし、HTML5を最後にHTMLは番号で管理することを辞めて、常に最新の仕様が公開される形に変わりました。これを「Living Standard」と呼び、現在では単に「HTML」と呼ぶ形に変わっています。そのため、DOCTYPE宣言もかなりシンプルな形になり、これによって「最新バージョン（Living Standard）のHTMLを採用している」と言うことを示す形になりました。