developers blog

  1. TOP
  2. Webページを作成する場合の基本的なひな形について
webタグ：html

Webページを作成する場合の基本的なひな形について

htmlの仕様は時代とともに更新され、最新の仕様はHTML Living Standardによって決められています。これは最新の仕様に基づいて作成された新しくWebサイトを制作する場合のひな形です。
基本的なひな形であって、実際の制作ではここに足りない部分を追加していきますが、最低限これくらいは必要だと思われるものを書いてあります。

※この記事は、過去の記事を最新の環境に合わせて書き直したものです。

目次

Webサイトを新規で制作する場合のひな形

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

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta name="format-detection" content="telephone=no">
7<title>タイトル</title>
8<meta name="description" content="">
9
10<meta property="og:type" content="">
11<meta property="og:title" content="">
12<meta property="og:description" content="">
13<meta property="og:url" content="">
14<meta property="og:image" content="">
15
16<link rel="icon" href="/favicon.ico">
17<link rel="icon" href="/favicon.svg" type="image/svg+xml">
18<link rel="apple-touch-icon" href="/apple-touch-icon.png">
19
20<link rel="canonical" href="" />
21<link rel="stylesheet" href="css/index.css">
22</head>
23<body>
24<h1>Hello World!!</h1>
25<script src="js/index.js"></script>
26</body>
27</html>

DOCTYPE宣言

古いhtmlの互換性の問題からDOCTYPEはファイルの先頭に必ず指定する必要があり、この文章がHTML Living Standardであることを宣言しています。

1<!DOCTYPE html>
  • <!DOCTYPE html>の大文字と小文字は区別されません
  • 参考：The DOCTYPE

lang属性

ユーザーエージェントにドキュメントの言語コードを知らせるためにhtmlタグにlang="ja"属性を指定しています。

1<html lang="ja">

lang属性を正しく指定することで翻訳ツールなどが言語を特定するのに役立ちます。
基本的な言語コードは以下の通りです。

  • ja : 日本語
  • ja-JP : 日本国の日本語
  • en : 英語
  • en-US : 米国の英語
  • zh : 中国語
  • zh-CN : 中国の中国語(簡体字)
  • zh-TW : 台湾の中国語(繁体字)
  • zh-cmn-Hans : 中国語（簡体字）
  • zh-cmn-Hant : 中国語（繁体字）
  • ko : 韓国語

lang属性は現在、BCP 47によって規定されています。

文字エンコーディング

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

1<meta charset="UTF-8">

viewport

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

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

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

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

format-detection

モバイル端末で電話番号を自動的にリンクにする機能を無効にします。

1<meta name="format-detection" content="telephone=no">
  • 電話番号の自動検出が必要な場合は削除する

タイトル

ページのタイトルを記述します。

1<title>タイトル</title>
  • 文字数は30文字以内であれば、検索結果で省略される可能性が低くなります

description

現在のページの概要（要約）を記述します。

1<meta name="description" content="">
  • descriptionの内容がSEOに直接影響を与えることはありませんが、検索エンジンの検索結果に表示されるため、その内容次第でクリック率が変わってきます
  • 文字数は80文字程度にしておくと、ページの説明が省略されることなく表示されます
  • keywordsに関しては、googleがサポートしていないため記述する必要はありません

OGP(Open Graph Protocol)

SNSでシェアした場合の情報を指定するためにOGP(Open Graph Protocol)を指定します。

1<meta property="og:type" content="">
2<meta property="og:title" content="">
3<meta property="og:description" content="">
4<meta property="og:url" content="">
5<meta property="og:image" content="">
  • type : Webページはwebsite、記事はarticleなど
  • title : ページのタイトル
  • description : ページの概要
  • url : ページのurl
  • image : 比率が2:1ので情報が中央の正方形に収まるような画像

ファビコン

ページのファビコンを指定します。

1<link rel="icon" href="/favicon.ico">
2<link rel="icon" href="/favicon.svg" type="image/svg+xml">
3<link rel="apple-touch-icon" href="/apple-touch-icon.png">
  • favicon.ico : 古いブラウザ用の32×32pxのアイコン
  • favicon.svg : 新しいブラウザ用のSVG形式のファビコン
  • apple-touch-icon.png : Apple用の180×180pxのアイコン

canonical

canonicalタグにページのURLを指定します。

1<link rel="canonical" href="" />
  • 重複コンテンツがなければ必要なし

スタイルシート

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

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

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

1<style>
2html {
3  font-size: 16px;
4}
5</style>
  • スタイルシートのサイズが大きくなるとページの読み込み速度が遅くなるため、できるだけページで使用するスタイルだけ読み込むようにします
  • 可能であるなら、ファーストビューのスタイルをインラインで記述します

Javascript

javascriptファイルを読み込む場合、</body>タグの直前に記述します。

1<script src="js/index.js"></script>
2</body>
  • scriptタグをhead内に記述した場合、async,defer属性を付けていないと読み込みの間ページのレンダリングがストップするため読み込みが遅くなるためbodyの終了タグの直前に指定する