エンジニアステップ

初心者・未経験エンジニア向けの技術ブログ

【HTMLの基本】HTMLのひな形について解説【Emmetの「!」展開】

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が普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです

引用元:DOCTYPE-HTML5タグリファレンス

 

 <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の「!」展開】というお話でした。