自分がよく使うパターンをメモ。
文書の最初からheadまでの記述
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>タイトル</title>
<meta name="description" content="ディスクリプション">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/function.js"></script>
html・head・body要素はいずれも、開始・終了タグともに、特定条件下で省略可能。
ここではhtml要素にlang属性を指定するために開始タグのみ記述する。
記述順
head要素内の子要素は、記述順に注意する必要があるものが多い。
- 文字コードの指定
日本語が出て来る前に記述したほうがいいらしい。重要なので最初に記述する。 - ビューポートの指定
- タイトル、ディスクリプション
- IE互換モードの指定
cssを読み込む前に指定する。
ただし、titleタグ・metaタグの前には書かないほうがいいというのを見かけた。
理由はよくわからなかった。 - CSS読み込み
- JavaScript読み込み
レンダリングを妨げるため、body内の最下部がいいとも聞く。
ほかの解決策として、async属性というものもあるが、なにやら注意が必要とのこと。
タグごとの説明
<html lang="ja">
ブラウザに日本語のサイトと認識させるためにlang属性をつける。
これがなかったり、値がenになっていると、翻訳しますか？と出てしまうことがある。
emmetの初期設定だとenになっているので注意する。
<meta charset="utf-8">
HTML5ではUTF-8を使用することが推奨されているそう。
使える文字が多かったり、多言語対応していたり、いいことが多い。
コーディングエディタによっては、Shift_JISやEUC-JPが対応していなかったりする。
<meta name="viewport" content="width=device-width">
スマートフォン用のビューポートの指定。
widthはdevice-widthにしてレスポンシブにする。
initial-scaleは上記を記述して、きちんとコーディングすれば自動的に1になるので不要。
user-scalableを無効にするのはアクセシビリティ的によろしくないらしいのでしない。
レスポンシブではない場合はdevice-widthの部分を任意の値を設定する。
<title></title>
タイトルの指定。
検索結果はもちろん、ブラウザのタブやブックマークに表示される。
<meta name="description" content="">
ディスクリプション（＝直訳すると説明）の指定。
検索結果に出る文章。ただし、場合によっては他の文章が使われることもある。
他にも設定していないとOGPで使われたりする。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEの互換モードを防ぐ指定。
これをユーザーがONすると古いドキュメントモードで表示されてしまう。
元々はIE8で古いサイトを見ると崩れてしまうため、後方互換させるために実装されたもの。
<link rel="icon" href="favicon.ico">
ファビコンの指定。ブラウザのタブやブックマークで表示される。
rel属性にshortcutは不要。拡張子がicoならばtype属性も不要。
マルチデバイス対応で細かく設定していくとかなりの量になるため、ジェネレーターを使うとよさそう。
しかし、サイトをホームに追加する人がどれだけいるのだろうか。
ホーム画面以外でも、ブラウザのブランク画面などでも表示される場合があるため、設定した方がよさそう。
つい先日知ったが、Androidでホーム画面に追加することでアプリのように振る舞う、プログレッシブWebアプリなるものもある。
<link rel="stylesheet" href="css/style.css">
外部スタイルシートの読み込み。
type属性は初期値がtext/cssになったため、不要。
バックスラッシュも不要になった。
CSS同士の読み込み順にも注意する。
HTTPリクエストを減らすため、Sassを使ってまとめるといい。
<script src="js/function.js"></script>
外部スクリプトの読み込み。
type属性は初期値がtext/javascriptになったため、不要。
CSS同様に、読み込み順にも注意する。