HTML 入門
HTML の基礎をマスターしよう
HTML の雛形
ここからは HTML 言語の基礎をマスターしていきましょう．まず，HTML 文書の雛形は次の通りです．
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Web ページ</title>
</head>
<body>
Web ページを作ってみます。
</body>
</html>
<!DOCTYPE html>
上の雛形の1行目にある <!DOCTYPE html> はこの文書が HTML Living Standard（または 2021年1月までの W3C による HTML5）で記述されていることを意味するものです．この記述がない HTML 文書は更に古いバージョンである HTML4 等で作成されたものです．
<html lang="ja"> ... </html>
上の雛形の2行目の <html lang="ja"> と10行目の </html> で囲まれる範囲が HTML 文書になります．2行目の lang="ja" はこの HTML 文書が日本語で記述されていること意味しています．英語の Web ページを表示しようとしたときに Web ブラウザに「日本語に翻訳しますか？」というメッセージが現れた経験があるかもしれません．ブラウザはこの lang="..." の情報とユーザの言語環境を比較してそのようなメッセージを出力しています．
2行目の <html lang="ja"> と10行目の </html> で囲まれる範囲の中には，<head> ... </head> と <body> ... </body> の2つのブロックを記述します．
<head> ... </head>
3行目の <head> から6行目の </head> で囲まれる範囲は ヘッダー部 と呼ばれます．このヘッダー部には文書のタイトルや文字コード，検索エンジンに対する指示などを記述します．
例えば <meta charset="utf-8"> はこの文書が UTF-8 という文字コードで記述されていることを意味し，この情報を用いて Web ブラウザが文書に使用されている文字コードを判断します．もしも文書に使用されている文字コードと，charset で指定されている文字コードが異なればこの結果のように文字化けが起こることになります．なお，以前のHTML5 から文字コードには UTF-8 を使うことが世界的な標準になっています．
<body> ... </body>
また，<body> ... </body> の中に本文を記述します．慣れないうちは，</body> の後や </html> のあとに本文を入力しないように気をつけよう．
Visual Studio Code で雛形を生成する
上で説明した雛形を覚えるのは大変かもしれません．その都度このページを参照してしまえばよいでしょう．しかしながら Visual Studio Code を利用しているのであれば，Emmet という機能を使って簡単に HTML の雛形を生成（入力）することができます．次の手順を試してください．
任意のフォルダ（今回は改めて新規に作成した web フォルダ）を Visual Studio Code で開きます．次の画面のようにエクスプローラにある「新しいファイル」アイコンをクリックします．
作成するファイル名を入力するボックスが現れるので，「index.html」と入力します．ファイルを作成したらそのファイルを開きます．
ファイルを開いた状態です．画面右下のステータスバーに「HTML」と表示されていることを確認してください．これはファイルの拡張子から Visual Studio Code が自動的に言語モードを設定した結果です．
エディタの言語モードが HTML モードになっている状態で，1行目に html:5 と入力したあと，Tab または Enter を押下します．下図のように html と入力した時点で表示される候補から html:5 を選択してもよいでしょう．あるいは ! だけを入力した時点で雛形を選択することもできます．
上のような Emmet 表記によって次のような雛形が生成されました．
上のコードで2行目の言語設定が en になっているのでこれは ja に変更します．なお，Visual Studio Code の設定を変更することで，言語設定が ja となって雛形を生成できるようにもなります．設定方法はこちらを参照してください．また，5行目の <meta name="viewport" content="width=device-width, initial-scale=1.0"> はスマートフォンなどに対応するレスポンシブ Web デザインを利用するときに必要になる記述です．現時点では5行目の記述を削除してしまっても問題ありません．