[HTML]最小構成のHTML

HTMLを記述する上での最小構成は結構長くて書くのが面倒だったりします。

この記事では、コピペできる最小構成のHTMLとその解説を行います。

最小構成のHTML

最小構成のHTMLは以下のように書きます。(最小構成と書いておきながらなくてもいいものも書いています)

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>タイトル</title>
  <meta name="description" content="サイトの説明を記載します">
  <link rel="icon" href="favicon.ico">
</head>
<body>
  <!-- ここにコンテンツを記載します -->
</body>
</html>

各タグについて以下で解説します。

DOCTYPE宣言

<!DOCTYPE html>は、「この文書はHTML5で記載されていますよ」ということを文書の先頭で宣言するために記載しています。

とりあえず最初にこれを書いておけばいいです。

htmlタグ

htmlタグは、タグで囲われた範囲をHTML文書としています。

基本的に、htmlタグは1つで、その子要素としてheadタグとbodyタグが1つずつ存在します。

lang=”ja”とすることで、「日本語で記述されていますよ」と明示的にしています。

headタグ

headタグは、コンテンツ上には現れない設定などを記載します。

タイトルの設定やCSSファイル、JavaScriptファイルなどへのリンクもheadタグ内に記載します。

bodyタグ

bodyタグは、実際に画面上に表示するコンテンツを記載します。

ここでは最小構成なので空としています。

metaタグ

metaタグは、サイトの情報を検索エンジンやブラウザに伝えるために記載します。

種類はいくつかありますが、ここで記載している2つについては以下の通りです。

<meta charset=”utf-8″>
文字コードがUTF-8であることを明示
<meta name=”description” content=”…”>
検索エンジンに表示されるサイトの説明

titleタグ

titleタグは、検索エンジンやブラウザのタブ上に表示されるタイトルを記載します。

今見ているこのページだと、「[HTML]最小構成のHTML | HISASYS」がタイトル指定されています。

linkタグ

linkタグは、ファビコンやCSSファイルへのリンクについて記載します。

relでリンクする対象の指定を、hrefでリンクするファイルの指定を行います。

Emmetを使うと「!」だけでOK

最小構成だけでも結構たくさんコードを書かなくてはいけないとげんなりする方もいるかもしれませんが、コード補完ツールのEmmetを使えば、「!」だけで勝手に最小構成のコードを作ってくれます。

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

上記が実際にEmmetで自動生成されたコードで、今回紹介したタグの中で省略されているものもありますが、書いても書かなくてもどちらでも良いです。

EmmetはIDEやエディタのプラグインとして提供されているので、お使いのIDEやエディタの名前 + Emmetで検索して使ってみてください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です