※本サイトはプロモーションが含まれています
emmetを使って「!」と打つとHTMLの雛形が展開されます
↓
<!DOCTYPE html>
<html lang=”en”>
<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>Document</title>
</head>
<body>
</body>
</html>
この中身を簡単に解説します！
目次
EmmetのHTMlの雛形についての説明
EmmetのHTMlの雛形についての説明です。
<!DOCTYPE html>とは
<!DOCTYPE html>は、文書がHTML5で作成されたことを示すための「DOCTYPE宣言（ドキュメントタイプ宣言）」と呼ばれるものです。
DOCTYPE宣言によって、ブラウザに「標準準拠モード」であることを伝えます。
ウェブブラウザに正常に表示させるために必要なもの…という理解でOKです。
TYPE宣言の記述のしかたによって標準モードと互換モードが切り替わります。 標準モードは、CSSなどの仕様通りに正しく表示するモードで、 互換モードは、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです
<html lang=”en”>とは
<html lang=”en”>は、HTML文書の言語設定です。
ENはENGLISHの略で、英語のこと（世界的なスタンダードは英語です）。
我々が主に使うのは「JA」でJAPANESE（日本語）ですね。
<meta charset=”UTF-8″>とは
<meta charset=”UTF-8″>は文字コードを指定しています。
HTML文章で使う文字を示します。
基本的には「UTF-8」が世界で最も使われている文字コードです。
※厳密にはUCS Transformation Format 8が正式名称で、Unicodeの符号化方式…みたいな奥深い話があるのですが割愛です
他にもJISコードやShift_JISもよく使われる文字コードです。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>とは
「<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>」はいわゆるViewPointです。
「どんなモニターを想定していますか？（モニターサイズは何か？）」という指定です。
現代は様々なサイズのデバイスがあります（スマホも多種多様ですし、タブレットもあります）。
それらの違いはさておき、「デバイスに合わせたモニターサイズを勝手に決めてくれ！」という時に上記のような書き方をします。
※モニターサイズが決まっているときは、「width=device-width」ではなく「width=640」などと書きます
ちなみにAppleやGoogleもこの書き方なので、とりあえず右にならえでOKだと思います。
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>とは
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>は、MicrosoftのInternet Explorer対策のタグです。
IE（インターネットエクスプローラー）は、バージョンによって、挙動がまちまちです。
そんなIEに対して、「最新のモードでコンテンツを表示して」というのが「content=”ie=edge”」という指定です。
まとめ：HTMLの雛形について
HTMLの雛形についての簡単なまとめです。
<!DOCTYPE html>
→ドキュメントタイプ宣言（ブラウザがうまく表示するために必要）
<html lang=”en”>
→HTML文書の言語を指定する（基本的にはenではなくjaでOK）
<meta charset=”UTF-8″>
→HTML文書の文字コードを指定する（基本的にはUTF-8でOK）
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
→モニターサイズを指定する（GoogleやApple同様にwidth=device-widthで良いと思う）
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
→IEに最新バージョンを使えと指示する
という感じでした。
以上、【HTMLの基本】HTMLのひな形について解説【Emmetの「!」展開】というお話でした。