HTML の基礎

HTML の雛形

HTML の雛形は次のとおりです．

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>ホームページ</title>
</head>
<body>
  ホームページを作ってみます。
</body>
</html>

<!DOCTYPE html>

1行目の <!DOCTYPE html> はこの文書が HTML Living Standard （または 2021年1月までの W3C による HTML5）で記述されていることを意味するものです．この記述がない HTML 文書はさらに古い HTML4 等で作成されたものです．

<html lang="ja">

2行目の <html lang="ja"> と 10行目の </html> で囲まれる範囲が HTML 文書になります．2行目の lang="ja" は HTML が日本語であることを意味しています．

<html lang="ja"> と 10行目の </html> の中には，<head> ... </head> と <body> ... </body> のブロックを記述します．

<head> ... </head>

3行目の <head> から6行目の </head> までの範囲はヘッダー部と呼ばれ，文書のタイトルや文字コード，検索エンジンに対する指示などを記述します． <meta charset="utf-8"> は文書が UTF-8 という文字コードで記述されていることを意味し，この情報を用いて Web ブラウザが文字コードを判断します．<title> ... </title> の中には，文書のタイトルを記述します．この内容は Web ブラウザのタブ（またはタイトルバー）に表示されます．

<body> ... </body>

<body> ... </body> の中に本文を記述します．</html> の後に本文を記述しないように気をつけよう．

Visual Studio Code で Emmet を使う

Visual Studio Code を利用している場合は Emmet で簡単に HTML の雛形を生成（入力）することができます．空の html ファイルを作成し（Visual Studio Code の言語モードが HTML になっていることを確認し），html:5 と入力した後，Tab または Enter を押します．あるいは ! だけを入力してTab または Enter を押します．この操作で次のような雛形が生成できます．

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

上のコードで2行目の言語設定が en になっているのでこれは ja に変更します．なお，Visual Studio Code の設定を変更することで，言語設定が ja となって雛形を生成できるようにもなります．設定方法はこちらを参照してください．また，5行目の <meta name="viewport" content="width=device-width, initial-scale=1.0"> はスマートフォンなどに対応するレスポンシブWebデザインを利用するときに必要になる記述です．現時点では5行目の記述を削除してしまっても問題ありません．

« 戻る次へ »

目次