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

スポンサーリンク

はじめに

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(RFC5646RFC4647)によって規定されています。
基本的な言語コードは以下の通りです。

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>

タイトルはブラウザのツールバー、ブックマーク、検索エンジンの検索結果などに表示されるためドキュメントの内容がわかるようなものにします。長くても30文字程度にすると検索結果で省略されずに表示されます。

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の終了直前に記述しています。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする