HTML5で最小構成の文書

更新日：2021年10月20日

HTML5の最小構成の例

HTML5でWebページを記述する上で最小の構成は次のようなものになります。ここではCSSスタイルシートとJavaScriptも使用するものとします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>HTML5の最小構成</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <p>
      HTML5でWebページを記述する上で最小の構成は次のようなものです。
    </p>
  </body>
</html>

では、これらの要素をこれから一つずつ見ていきましょう。

DOCTYPE

HTML5のDOCTYPEは次のように非常にシンプルなものになりました。

<!DOCTYPE html>

これはブラウザを標準モードで実行させるため、つまりはブラウザに正しく解釈・レンダリングさせるために記述しておいた方が良いものです。あまり深く考えずに、決まり文句として記述しましょう。

<title>タグ、<html>タグ、<head>タグ、<body>タグ

これらのタグは通常省略するものではないので、明示的に記述すれば良いでしょう。その際に文書全体の主言語を以下のように設定するのが良いでしょう。

<html lang=ja>

<meta>タグ

従来は以下のように記述していたものが、簡潔に指定できるようになりました。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML5では以下のように記述します。

<meta charset="utf-8">

CSSスタイルシートの指定

CSSの外部スタイルシートのの指定の仕方もHTML5では簡潔になっていて、以下のように指定します。

<link rel="stylesheet" href="style.css">

JavaScriptの指定

JavaScriptスクリプトをページにリンクする必要がある場合は、次のように記述します。 </script>終了タグも必要です。

 <script src="script.js"></script>

まとめ

HTML4の時代に比べると、HTML5ではだいぶ記述が簡潔になったと思います。

HTML5ではXHTMLの文法で記述できたり、HTMLとXHTMLの記述を混ぜて使うことができるなど、記述方法についてかなり寛容な部分があります。そのため、ここで紹介した書き方とちっと違った書き方をしている文書を見ることがあるかもしれません。正しい唯一の書き方というものはありませんので、自分のスタイルで書き方を選びましょう。