カスタム検索

Webページの基本構造

前ページでは<p>タグを使用して段落を定義する例を紹介しました。しかし、HTML/XHTMLの使用には1つの決まった形があり、必ず入力されるタグが3つあります。下の例はそれらを追加したものです。

structure.html
<html>
<head>
</head>
<body>
<p>はじめてのウェブページ</p>

<p>うまく表示されるかな。</p>
</body>
</html>

確認しても、表示された結果は前ページと変わりません。しかし、これら3つのタグを入力しておくことには理由があります。

いつもある3つのタグ

Webページを構成する要素には大きく分けて、<html>の要素、<head>の要素、<body>の要素の3つがあります。下図を参照してみてください。

<html>
<head>
ページ自体の基本的な設定事項を記述する
</head>
<body>
内容(ブラウザに表示される部分 <p>なども含む)
</body>
</html>

<html>の要素

<html>タグは、WebページでHTMLあるいは、XHTMLが使用されていることを定義します。Webページの作成にHTML/XHTMLを使用するには、最初に開始タグの<html>、最後に終了タグの</html>を必ず記述します。

<head>の要素

<head>と</head>の間にはページ自体の基本的な設定事項を記述します。例えば、ページのタイトルや他のプログラムで処理する内容などを記述します。

<body>の要素

<body>と</body>の間には文章や画像など、ブラウザに表示したいものを記述します。<p>のような表示に関するタグはこの<body>と</body>の間に記述します。通常、この部分の作成や編集に時間をかけることになるでしょう。

尚、<body>の要素が<head>の要素より前に書かれることはありません。

前ページで<html>と<body>を省略したことについて

前ページでは<html>と<body>を記述しないまま<p>タグを使用して段落を定義することができました。これは、<p>タグが記述されていることから、HTMLあるいは、XHTMLの使用が明白なため、ブラウザが自動的に<p>の要素を段落としてみなしたからです。

ほとんど全てのブラウザで<html>タグなどを省略しても意図した結果として表示されます。とはいえ、<html>タグを記述しておくことで人間が見た場合にHTML/XHTMLが使用されていることが分かりますし、タグの省略は正しいHTML/XHTMLとは呼べないので省略しないようにしましょう。

まとめ
  • <html>でHTML/XHTMLが使用されていることを定義
  • <head>の要素には設定事項を記述する
  • <body>の要素に表示したいことを記述する
CopyLeft 2017 Webデザインレッスン プライバシーポリシー サイト管理者に連絡