HTML Living Standard　　第１部 HTML　３ HTMLの構造

 

３ HTMLの構造

HTML の文書は、タグというものを使って書いていきます。

タグには、記述できる位置や属性が決まっていますが、それほど神経質に気を付ける必要はありません。C や Visual Basic などのプログラミング言語は少しでも文法が間違っていたらコンパイルエラーが出て実行できませんが、HTML の場合は、多少必要なタグがなかったり間違っていたりしても、ブラウザががんばって何かしらを表示します。

ですから、最初は細かいことを気にせず、とにかく HTML を記述してブラウザで表示してみましょう。そして、慣れてきたらタグの位置や使用方法などルールに沿った記述にしていきましょう。


HTML のもっとも基本的な構造は次のようになります。

記述例
<!DOCTYPE html>
<html>
  <head>
    ヘッダ情報
  </head>
  <body>
    コンテンツ内容
  </body>
</html>

HTML文書の先頭には、必ず

<!DOCTYPE html>

を書き、続いて HTMLのタグを記述していきます。


３．１ HTML ルート要素　(html)

<html> タグは、HTML文書であることを示す際に使用します。 <html>～</html>で定義される html 要素は、文書のルートとなる要素で、HTML文書の内容が始まることを表します。

<html>～</html>の中には、head 要素と body 要素がそれぞれ一つづつ、この順番で必要となります。

html 要素

HTML文書が始まることを示す、最上位（一番外側）に位置する要素である。この要素は、DOCTYPE宣言のすぐ後に配置する。

属性

属性名属性値説明必須
minifestマニフェストファイルのURIマニフェストとは、画像、映像や音声などキャッシュさせたいリソースを記述したファイルのこと　
キャッシュしてもよいのか毎回ネットワークから読み込むのかをリソースごとに指定する		×

HTML 文書の情報です。html 要素の中の最初に指定します。基本的には、この要素の内容はブラウザ上には表示されません。

head 要素

文書のヘッダ情報を html 要素の中の最初に指定する。例えば次のような要素が含まれる。title 要素以外の要素は必須ではなく、また順序もこの通りである必要はない（ただし、title 要素も、iframe 要素の中に表示されるような場合は必須ではない）。

  • <title>       タイトル
  • <base>        基準URI
  • <link>        リンク情報
  • <style>       スタイルシート
  • <script>      スクリプト
  • <meta>        メタデータ

属性

なし

記述例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
  </body>
</html>

ヘッダ情報には以下のようなタグが含まれます。

３．２．１ タイトル　(title)

文書のタイトルを指定しますので、必ず記述します。title 要素で文書のタイトルを指定する場合には、一つの文書に一つだけ配置します。 一つの文書内で複数の title 要素を指定することはできません。

title 要素

文書のタイトルを指定する。この要素は、head要素内に1つだけ配置する。基本的に title 要素は必須だが、iframe 要素の中に表示されるような場合などは必ずしも記述する必要はない。

属性

なし

記述例
  <head>
    <title>タイトル</title>
  </head>

タイトルは、 主に次の用途で使用されます。

  • ブラウザのタイトルバーやタブバー
  • 検索エンジンの検索結果
  • ブックマーク
  • 検索キーワード

スタイルシートファイルなどの外部リソースを指定します。

<link> タグを指定する場合には、href 属性と rel 属性が必須です。href 属性と rel 属性が指定されていない場合には、<link>タグの指定は無効となります。

href 属性には、リンクする外部ファイルのURIを、rel 属性にはリンクタイプを指定します。

記述例
  <head>
    <title>タイトル</title>
    <link rel="stylesheet" type="text/css" href="sample.css">    ← スタイルシートの指定
    <link rel="icon" href="sample.ico">                          ← アイコンの指定
  </head>

３．２．３ メタデータ　(meta)

meta 要素では、他のメタデータ・コンテンツ（title 要素、base 要素、link 要素、style 要素、script 要素）では表現できない、様々なメタデータを表します。

meta 要素

他のメタデータ・コンテンツ（title 要素、base 要素、link 要素、style 要素、script 要素）では表現できない、様々なメタデータを表します。

属性（主な属性のみ）

属性名属性値説明必須
charset文字エンコーディングUTF-8、Shift_JIS、EUC-JP などいずれか一つは必須
http-equivcontent-languageコンテンツ言語
content-typeファイルタイプや文字エンコーディング
default-styleデフォルトのスタイルシート
refresh指定秒後に再読み込み
nameapplication-nameウェブアプリケーション名
author文書の著者名
description文書の説明
keywords文書のキーワード
viewport文書の表示領域
contenthttp-equiv="content-language" のとき、文書の主言語　言語コード一覧http-equiv または name を指定している場合は必須
http-equiv="content-type" のとき、ファイルタイプ　MIME タイプ一覧
http-equiv="default-style" のとき、スタイルシート名
http-equiv="refresh" のとき、再読み込みまでの秒数
name のとき、属性値にふさわしい内容

記述例
  <head>
    <title>タイトル</title>
    <meta charset="UTF-8">                                       ← 文字コードの指定
    <meta http-equiv="refresh" content="60">                     ← 再読み込み時間の指定
    <meta name="author" content="KOJIMA Takashi">                ← 著作者
  </head>

３．２．４ 基準URI　(base)

base 要素は、相対パスの基準URIやリンク先ターゲットを指定します。

base 要素

相対パスの基準URIやリンク先ターゲットを指定する。この要素は、head要素内に1つだけ配置する。

他の要素でURIが指定されている場合、それよりも前に記述する必要がある。

属性

属性名属性値説明必須
href基準となるURIhref属性で相対パスを指定した場合、指定した基準 URI からの相対位置になるいずれか一つは必須
target_blank新規のウィンドウ
_self現在のウィンドウ（フレーム）
_parent親フレーム
_topフレームを解除したウィンドウ全体
ウィンドウ名、フレーム名指定したウィンドウやフレーム

記述例
  <head>
    <title>タイトル</title>
    <base href="http://www.foo.com/html/" target="_blank">
  </head>
  <body>
    <a href="page.htm">参照</a>  ← 新しいウィンドウで、http://www.foo.com/html/page.htm を開く
  </body>

３．２．５ スタイルシート　(style)

<style> は、スタイルシートを記述します。これによって指定されたスタイルは、<style> が記述されている HTML文書にのみ影響を与えます。

サイト全体に適用させたい場合には、link 要素を使った設定の方が効率がいいです。

style 要素

スタイルシートを記述する。

属性

属性名属性値説明必須
typeMIMEタイプスタイルシートのMIMEタイプ（規定値　text/css）
　MIME タイプ一覧		×
mediaメディア対象とするメディア（規定値　all）
　メディアタイプ一覧		×
title文字列代替スタイルシート名×

下の例の style 要素のスタイルは、p 要素にのみ適用されます。

記述例
  <head>
    <title>タイトル</title>
    <style>
      p {
        color: blue;
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <p>ここは青い文字です</p>

  </body>
表示例

スタイルシートの指定方法については、「第２部　スタイルシート」を参照してください。

３．２．６ スクリプト　(script)

<script> は、文書内にスクリプト（主にJavaScript）を埋め込むための要素です。

head 要素にも、body 要素にも配置することができます。

script 要素

スクリプトを記述する。

src 属性でスクリプトを記述したファイルを読み込むこともできる。

属性

属性名属性値説明必須
srcURL外部スクリプトファイルのURL（相対指定の場合は script 要素を記述したファイルが基準）を指定×
typeMIMEタイプスクリプトのMIMEタイプ（規定値　text/javascript）
MIME タイプ一覧		×
charset文字エンコーディングUTF-8、Shift_JIS、EUC-JP など×
defer文書の読み込みが完了した時点でそのスクリプトを実行する×
async文書の読み込み中にそのスクリプトが利用可能になった時点で実行する×
integrity文字列外部リソースの整合性を確認するためのメタデータ
例：sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC		×

記述例
  <head>
    <title>タイトル</title>
    <script src="example.js"></script>      <!-- スクリプトを example.js から読み込む -->
    <script>
      // スクリプトを記述する
      function message(m) {
        document.body.insertAdjacentHTML("beforeend", "<p>" + m + "</p>");
      }
    </script>
  </head>

詳しくは、「第３部　Javascript」を参照してください。

３．３ コンテンツ内容　(body)

body 要素に配置された内容がブラウザ上に表示されます。

body 要素

ブラウザ上に表示される文書の本体を html 要素の中の二番目（head 要素の後）に指定する。

属性

なし

記述例
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
  </head>
  <body>
    コンテンツ内容（ブラウザに表示される内容）
  </body>
</html>

コンテンツ内容として、適当にいろいろな文章やタグを記述していけば、それなりに表示されます。決して難しくはありません。

しかし、そうして記述された HTML文書は、どこがヘッダでどこがフッタなのか、また本文がどこで、本文中の語彙の解説はどれなのかが、きっと分かりにくくなっているはずです。

もちろん、タグに ID を付けることによって区別することもできます。しかし、ナビゲーション部分をある人は "nav" や "navigation"、またある人は "guide" などと付けているかもしれません。このようにどのような領域なのかを ID で識別することは、無理がありますし ID の本来の使い方でもありません。


そこで HTML5では、セクション、ナビゲーション、サイドバーなどの要素に、以下のような独自のタグが割り当てられました。これらは、ページの骨組みを作るセクショニング・コンテンツなので、それぞれに見出し（<h1>～<h6>）を含む必要があります。


また、これらのタグは HTML 文書の内容に構成上の意味を持たせるものですから、単にスタイルシートなどの装飾のためだけに使用すべきではありません。色を付けたり、マージン・パディングを取るためだけなら <div> や <span> を使用します。

３．３．１ メインコンテンツ　(main)

main 要素は、名前のとおり、HTML文書やアプリケーションの主要部分「メインコンテンツ」を表示する、その文書内で唯一の要素です。

「メインコンテンツ」は

  • 文書の中心的な話題・内容やアプリケーションの中心的な機能に直接関係するコンテンツ
  • それらをさらに発展的に詳しく述べたり表したりするコンテンツ

から構成されます。

また、いくつもの文書に渡り繰り返し表示される、例えば、ナビゲーションのためのハイパーリンク、著作権表示、サイトのロゴ、バナーなどは含まないようにします。

main 要素

HTML文書やアプリケーションの主要部分「メインコンテンツ」を表す。

１つの HTML文書内に、表示される「メインコンテンツ」としては１つ以上含めることはできません。

属性

なし

記述例
  <body>
    <header>
      ～
    </header>
    <main>
      <h1>タイトル</h1>
      ～
      本文
      ～
    </main>
    ～
  </body>

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。

ただし、他のページにリンクした箇所のすべてを<nav>～</nav>で囲む必要はなく、主要なナビゲーションとなる場合にのみ使用します。

しかし、nav 要素をたくさん書くとどれが主要なのかが分からなくなるので、nav 要素を複数記述するよりは、一つの nav 要素を section 要素で分ける方がよいかもしれません。

具体的には、次のようなリンクメニューがナビゲーションに該当すると思われます。

  • グローバルナビゲーション（主にヘッダやサイドバーに配置されるリンクメニュー）
  • パンくずリスト（階層を表すリンクメニュー）
  • ページャー（ページ送りのリンクメニュー）
  • ページ内リンク（各セクションに移動するためのリンクメニュー）

nav 要素

他のページやそのページ内の部分へリンクする、主要なナビゲーションとなるセクションを表す。

nav 要素は文書の中に複数記述することもでき、例えば、ひとつはサイトに関する主要なナビゲーションで、もうひとつはページ内での補助的なナビゲーションというように使用することもできる。

属性

なし

記述例
  <body>
    ～
    <nav>
      <section>
        <h1>ページ移動</h1>
        <ul>
          <li><a href="page01.htm">前ページ</a></li>
          <li><a href="index.htm">目次</a></li>
          <li><a href="page03.htm">次ページ</a></li>
        </ul>
      </section>
      <section>
        <h1>サイト内検索</h1>
        <a href="search.htm">検索</a>
      </section>
    </nav>
    ～
  </body>

逆に、次のようなリンクメニューは、HTML文書の主要な内容ではありませんので、nav 要素には適しません。footer など他の要素を考慮すべきです。

  • 規約や著作権ページなどへのリンク（主にページのフッタに配置されるリンクメニュー）
  • 外部サイトへのリンク集（おススメサイト集、営業所一覧、などのリンクメニュー）

３．３．３ 独立記事　(article)

article 要素はサイト内コンテンツの独立した記事項目です。その部分だけを抜き出しても意味が分かる部分です。

article 要素を入れ子にして使用する場合、内側の article 要素の内容は、原則として外側の article 要素の内容に関連していることを記述します。

具体的には、次のようなコンテンツで使用することができます。

  • ニュースの記事
  • ブログの記事
  • 掲示板の投稿

article 要素

その部分の内容だけを取り出した場合に独立したコンテンツとして成り立つ際に使用する。

article 要素を入れ子にして使用する場合は、内側の article 要素の内容は、原則として外側の article 要素の内容に関連していることを記述する。

属性

なし

記述例
  <body>
    ～
    <article>
      <h1>記事その1</h1>
      ～
      <article>
        <h2>後日談</h2>
        ～
      </article>
    </article>
    <article>
      <h1>記事その2</h1>
      ～
    </article>
    ～
  </body>

３．３．４ セクション　(section)

section 要素は、その範囲が意味的な1つのまとまりであることを表します。article 要素、aside 要素、nav 要素でもない場合に使用します。

一般的には、body の内容を章や節として分割する場合に使用します。

見出し要素（<h1>～<h6>）を section 要素の最初に記述することによって、その section 要素のレベル（階層の深さ）を指定します。

section 要素

意味や機能がひとまとまりになる部分に使用する。article 要素、aside 要素、nav 要素はそれぞれ記事、補足情報、ナビゲーションというより具体的な意味を持っているのに対して、section 要素はそれ以外の場合に使用する。

ひとまとまりになる部分なので、その部分の意味を表す見出しを h1 ～ h6 要素で付ける。 見出しを付けることができない場合は、その部分を section 要素で囲むのは適切ではないかもしれない。

属性

なし

記述例
  <body>
    ～
    <section>
      <h1>第１章</h1>
      <section>
        <h2>第１節</h2>
        ～
      </section>
      <section>
        <h2>第２節</h2>
        ～
      </section>
      ～
    </section>
    <section>
      <h1>第２章</h1>
      ～
    </section>
    ～
  </body>

３．３．５ 補足情報　(aside)

aside 要素は、その前後の要素のコンテンツに関係しているが、別のコンテンツとして分離されたものとみなされます。補足的な情報であることが多く、仮に取り除いたとしても本文には影響のない部分です。

例えば、次のようなコンテンツで使用できます。

  • 補足情報（本文を補足する記事・情報）
  • 余談（本筋から外れた余談・雑談・豆知識）
  • 用語説明（本文中の用語等に対する説明）

aside 要素

その前後の要素のコンテンツに関係している補足的な情報に使用する。したがって、仮に取り除いたとしても本文には影響があってはならない。

また、aside 要素要素は、あくまでも本文から外れる余談・補足情報なので、本文の流れの一部となる挿入句（カッコでくくって差し込むような内容など）に対して、aside 要素タグを使用するのは適切ではない。

属性

なし

記述例
  <body>
    ～
    <article>
      <section>
        <h1>第１章</h1>
        ～～～ むにゃむにゃ ～～～～～
        ～～～～～～～～
      </section>
      <aside>
        <h2>むにゃむにゃ</h2>
          むにゃむにゃとは～
      </aside>
    </article>
    ～
  </body>

３．３．６ アドレス　(address)

address 要素は、body 要素、または article 要素の中に記述し、それらの要素の連絡先情報を表します。

address 要素を含んでいる要素が body 要素の場合、address 要素に記述された連絡先情報は、文書全体に対する連絡先情報となります。article 要素の場合は、各記事の個別の連絡先情報です。

address 要素は、あくまでも内容に関する連絡先・問合せ先を表す要素です。文章中に住所が出てきたらからといって <address>～</address> でくくるのは誤りです。 このような場合には <p> タグなどを使用する方がよいでしょう。 また、address 要素の中には、連絡先情報以外の情報を含めてはいけません。

多くのブラウザでは斜体文字で表示されます。

address 要素

連絡先・問合せ先を表す際に使用する。通常はその文書の作者への連絡先情報を表すが、article 要素の中に配置されている場合には、その内容の作者への連絡先情報を表す。

あくまでも内容に関する連絡先・問合せ先を表す要素なので、関係のない住所、電話番号、メールアドレスなどを address 要素にすることは適切ではない。

属性

なし

記述例
<body>
～
<footer>
<address>
<p>このページへのお問い合わせは、<a href="mailto:admin@wasika.noor.jp">管理者</a> までメールをお送りください。</p>
</address>
</footer>
</body>

header 要素は、一番上に表示してほしいような、セクション（または文書全体）に対するイントロダクションやナビゲーションの手助けとなる内容を含めます。

例えば、次のような内容を配置することになります。

  • 見出し（ページのタイトル、セクションの見出し）
  • リンクメニュー（グローバルナビゲーション、ページ内リンクのメニュー、補助的なリンクメニュー）
  • イントロダクション（序説、前置き）
  • 発行日時（文書や記事の発行日時）
  • 検索フォーム（サイト内検索、商品検索）
  • 関連ロゴ（サイトや企業のロゴ）

header 要素

イントロダクションやナビゲーションの支援となるグループに使用する。見出しが含まれることが想定されているが、必ず必要というわけではない。

また、header 要素は一つしか使ってはならないということはないので、ページの見出しの部分以外の、各セクションの見出しにもなり得る。

属性

なし

記述例
  <body>
    <header>
      <h1>タイトル</h1>
      <p>このページでは、むにゃむにゃ～～～</p>
      <nav>
       <ul>
        <li><a href="/forum">フォーラム</a></li>
        <li><a href="/download">ダウンロード</a></li>
        <li><a href="/sitemap">サイトマップ</a></li>
       </ul>
      </nav>
    </header>
    <article>
      <header>
        <h2>記事のタイトル</h2>
      </header>
      記事の内容～～～
    </article>
  </body>

HTML 文書のヘッダ情報を表す head 要素とは異なりますので注意してください。


footer 要素は、文書全体やセクションごとに一番下に表示してほしいような、関連文書へのリンク、著作権などの内容を含めます。

footer 要素

セクションに関する、関連文書へのリンク、著作権など情報に使用する。

また、footer 要素は一つしか使ってはならないということはないので、ページの最後だけではなく、各セクションごとにも記述できる。

属性

なし

記述例
  <body>
    ～
    <article>
      <h1>タイトル</h1>
      <p>このページでは、むにゃむにゃ～～～</p>
      <footer>
        <p>written by T.K.</p>
        <p>last updated: April 26, 2023</p>
      </footer>
    </article>
    ～
    ～
    <footer>
      <p>©2023 KOJIMA Takashi</p>
    </footer>
    ～
  </body>