HTML＆CSSコース
HTMLの基本

HTMLの基本構造

目次
  • 解説
  • 1. HTMLの決まり事
  • 2. head要素のひな型
進捗を変更する


このページは無料で始められるオンラインプログラミング学習サービス「DigSkill」の一般公開ページです。
この前後のページを見たい方や学習内容に興味を持たれた方は、こちらをクリックしてコース一覧をご覧ください！


解説

1. HTMLの決まり事

HTMLファイルをブラウザが正しく認識するには、いくつかのお決まりで記述するコードがあります。

『HTMLの基本 > HTMLとは > 作ってみよう』のページでは、ショートコード「html:5」でHTMLファイルのひな型を自動生成しました。このページではHTMLファイルのひな型の、各タグの役割について学習します。

HTMLファイルのひな型

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

順を追ってHTMLファイルの基本構造（ひな型）を見ていきましょう。

HTMLのバージョンを宣言する <!DOCTYPE html>

まずは !DOCTYPEタグを記述し、HTMLのバージョンを指定します。

<!DOCTYPE html>

※!DOCTYPEタグに閉じタグは必要ありません。 DOCTYPE は、ドックタイプと読みます。

「<!DOCTYPE html>」とすることで、最新バージョン（2021年現在）であるHTML5のファイルであることを宣言しています。
なお、!DOCTYPEタグでバージョンを指定することを、DOCTYPE宣言といいます。

htmlタグで全体を囲む

次に、DOCTYPE宣言の下にhtmlタグを記述します。htmlタグはDOCTYPE宣言を除いたすべてのコードを囲みます。

<!DOCTYPE html>
<html>

</html>

htmlタグのlang属性に、HTMLファイルで使用する主な言語を指定します。
日本語は「ja」、英語は「en」といったように、言語に応じて対応する属性値が決められています。

<!DOCTYPE html>
<html lang="ja">

</html>

htmlタグ内に headタグと bodyタグを記述する

次に、htmlタグ内にheadタグとbodyタグを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    
</head>
<body>
    
</body>
</html>

headタグの役割
HTMLファイル全体の設定や、情報（メタデータ）を記述します。

bodyタグの役割
これまでの学習で見てきたように、bodyタグ内に記述したソースコードがWebページのコンテンツとしてブラウザに表示されます。

headタグ内にHTMLファイルの情報を記述する

最後に、headタグ内にHTMLファイルの情報を記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

以上でHTMLファイルのひな型の完成です。headタグ内の各要素については次に解説します。

2. head要素のひな型

metaタグはHTMLファイルの情報を属性で設定することができます。

<meta charset="UTF-8">

HTMLファイルの文字コードを「UTF-8」に設定しています。「UTF-8」は、プログラムの世界で最も使われている、標準の文字コードです。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

「Internet Explorer」（昔のWindowsに搭載されていた標準のブラウザ）でHTMLファイルを表示する際に、表示モードを指定する設定です。

※現在のWindowsの標準ブラウザは、「Edge」に置き換わっているため、最近はこの設定を記述しないWebページが増えてきています。このコースに掲載しているサンプルコードも、必要性のない場合は省略して掲載しています。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

PC用に作成されたWebページを、スマホやタブレット端末の画面に適したサイズで表示するための設定です。

<title>Document</title>

titleタグ内に記述した文字は、ブラウザのタブに表示されます。ページの内容に応じて、適宜書き換えてください。