html5 で Web ページを作成する場合の基本的なひな形

はじめに

2017 年になり Web サイトを html5 で作成することが当たり前となっています。そこで html5 で Web ページを作成する場合の基本的な書き方をまとめてみました。

目次

html5 で書く場合のひな形

html5 でWebサイトを作成する場合のひな形は以下のようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>タイトル</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<h1>Hello World!!</h1>
<script src="js/index.js"></script>
</body>
</html>

HTML5の書き方

HTML5 で Web ページを書く場合の項目について説明していきます。

DOCTYPE 宣言

ファイルの先頭に書くことでこの文章が HTML5 であることを宣言しています。HTML5 の DOCTYPE は以下のように非常にスッキリしたものとなっています。

<!DOCTYPE html>

htmlタグ

ドキュメントのルート要素として記述します。ドキュメントの言語コードを指定するために html タグに lang 属性を指定することが推奨されています。

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

lang 属性を正しく指定することで翻訳ツールがどの言語を使用するかなどに役立ちます。lang 属性は現在、BCP47(RFC5646 と RFC4647) によって規定されています。
基本的な言語コードは以下の通りです。

  • ja : 日本語
  • ja-jp : 日本国の日本語
  • en : 英語
  • en-us : 米国の英語
  • zh : 中国語
  • zh-cn : 中国の中国語(簡体字)
  • zh-tw : 台湾の中国語(繁体字)
  • ko : 韓国語

head タグ

html の最初の要素としてドキュメントのメタ情報を head 要素内に記述します。

<head>
......
</head>

文字エンコーディング指定

ドキュメントの文字エンコーディングを指定します。以下の例は、文字エンコーディングが UTF-8 であることを示しています。

<meta charset="UTF-8">

viewport 指定

viewport はモバイルブラウザに対して、Web サイトの表示幅と初期ズーム倍率などを指定できます。

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

この場合の viewport 指定は、以下のような意味になります。

  • width=device-width : Web ページの幅を、デバイスの画面幅に合わせる
  • initial-scale=1.0 : Web ページが読み込まれた時の、初期のズーム倍率が 1.0

X-UA-Compatible 指定

Internet Explorer で、互換表示を常に最新にするために指定します。

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

title タグ

ドキュメントのタイトルを記述します。

<title>タイトル</title>

description、keywords 指定

description にはページの説明、keywords にはページに関連するキーワードを記述します。

<meta name="description" content="">
<meta name="keywords" content="">

description の内容がページの説明を正しく表している場合、検索エンジンの検索結果に、description で指定した内容が表示されます。そのため、文字数は 120 文字程度にしておくと、ページの説明が省略されることなく表示されます。 keywords に関しては、google がサポートしていないため必ずしも記述する必要はありません。

stylesheet 指定

外部スタイルシートを読み込む場合は以下のように記述します。href に読み込むファイルの場所を相対パスまたは絶対パスで指定します。

<link rel="stylesheet" href="css/index.css">

ドキュメント内にインラインで記述する場合は <style> タグを使用します。

<style>
html {
  font-size: 16px;
}
</style>

script タグ

javascript ファイルを読み込む場合に記述します。

<script src="js/index.js"></script>

以前は、script タグを head 内に記述していましたが、head 内に記述した場合、script の読み込みの間ページのレンダリングがストップします。
ほとんどの script はページが表示された後に実行されるため、body の終了直前に記述することで、ページのレンダリングを止めることがなくなり、ページの表示速度が向上するため、body の終了直前に記述しています。