HTML5の基本テンプレート

2018年01月02日 HTML

HTML5の基本テンプレートを以下に示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ページのタイトルが入ります</title>
</head>
<body>
    ページの表示内容が入ります。
</body>
</html>

ワードプレスやウェブアプリなど、HTML5で作成する全てのHTML文書はこの形をとります。

<!DOCTYPE html>

この部分は文書型宣言といいます。
HTMLはたくさんある文書型のひとつなのですが、HTML4以前の文書型にはさまざまな種類が存在し、
ブラウザによって表示のされ方が異なるなど、とても不便なものでした。

HTML5では仕様が統合されたため、文書型を明示的に宣言する必要がなくなったのですが、
世の中にはHTML4以前の文書型宣言で作成されているウェブサイトもたくさんあるので、
それらと区別するために、記述しなければなりません。

<html lang="ja">
～～～
</html>

htmlタグで囲まれた部分はHTML文書の具体的な内容を表します。lang属性は、この文書内で使用されている基本言語を明示するために指定します。日本語ならja、英語ならenを指定します。

<head>
    <meta charset="utf-8">
    <title>ページのタイトルが入ります</title>
</head>

headタグで囲んだ部分は、このHTMLに関する様々な文書情報を表します。たとえば次に解説する文字コードやタイトルのように、ブラウザの画面には表示されない情報を記述する場所です。

<meta charset="utf-8">

metaタグは、様々な文書情報を定義するために使う汎用的なタグです。charsetは文字コードを意味し、このHTML文書がutf-8という文字コードで作成されていることを表します。

<title>ページのタイトルが入ります</title>

titleタグは、このHTML文書のタイトルを表します。titleタグに記述した内容はGoogle検索などインターネット検索結果のページに表示されるほか、一般的なブラウザではウィンドウ上部のタブに表示されます。

<body>
    ページの表示内容が入ります。
</body>

bodyタグで囲んだ部分は、ブラウザの画面に実際に表示するコンテンツを表します。

モバイル対応（レスポンシブ）の場合

タブレットやスマホでも閲覧できるレスポンシブなウェブページを作成する場合は、上記テンプレートに次の一行を追加したものが基本テンプレートになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ページのタイトルが入ります</title>
</head>
<body>
    ページの表示内容が入ります。
</body>
</html>

viewportはビューポートと読み、ブラウザの表示領域を表します。
width=device-widthは、ビューポートの横幅を、デバイスのディスプレイの横幅に合わせるための指定です。