HTMLを書き始めたばかりの方が、VS Codeなどでコード補完を使う際によく疑問に思うのが、
「html:5」と「!」って何が違うの？
という点です。
どちらもHTMLのひな形を素早く生成できますが、使い方や現在の主流には違いがあります。
今回は、その違いをわかりやすく解説します。
html:5とは？
html:5 は、Emmet（エメット）という入力補助機能で使える省略記法の一つです。
入力してTabキーを押すことで、HTML5の基本構造を自動生成できます。
生成される内容例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
!とは？
! も同じくEmmet記法で、現在はこちらの方がより簡単で主流です。
! を入力してTabキーを押すだけで、ほぼ同じHTMLテンプレートを生成できます。
html:5と!の違い
共通点
どちらもHTML5の基本テンプレートを生成
Tabキーで展開
VS Codeで利用可能
違い
html:5 → 少し古めの書き方
! → より短く、現在主流
! の方が入力が早い
どちらを使うべき？
結論として、
基本的には「!」がおすすめです。
理由：
入力が最短
現場でもよく使われる
学習コストが低い
VS Codeとの相性が良い
初心者が覚えるべきポイント
HTML制作では、毎回手打ちするよりも補完機能を活用した方が効率的です。
おすすめ
! → 普段使い
html:5 → 補足知識として理解
注意点
Emmet機能が有効になっていない場合、展開されないことがあります。
その場合は、
VS Codeを使用
ファイル拡張子を .html にする
Emmet設定を確認
これで解決するケースがほとんどです。
まとめ
html:5
HTML5テンプレート生成
やや古い入力方法
!
HTML5テンプレート生成
より短く主流
初心者にもおすすめ
結論
「!」を使えばOKです。
html:5 も間違いではありませんが、現在はよりシンプルな ! が一般的です。
HTMLやWeb制作では、こうした小さな効率化の積み重ねが作業速度に大きく影響します。
まずは ! を覚えて、スムーズにコーディングを始めましょう。
