サーブレット&JSPの基本｜HTMLの基本構造
HTMLの決まった骨組みを覚えて、Webページ作りの土台をしっかり整えよう。
HTMLでは、見出しを作るタグや段落を作るタグなどを組み合わせて、Webページの内容を表現します。
しかし、使いたいタグを思いつくままに並べるだけでは、整ったHTML文書にはなりません。HTMLにも、文書全体を組み立てるための基本的な形があります。
Javaのプログラムでは、クラスの中にmainメソッドを記述するという基本構造があります。それと同じように、HTMLにも、どこにページの情報を書き、どこに画面へ表示する内容を書くのかという決まりがあります。
HTMLの基本構造を最初に見ると、複数のタグが組み合わされているため、少し複雑に感じるかもしれません。ただし、それぞれの役割を分けて考えれば、決して難しいものではありません。
まずは、HTML文書には決まった骨組みがあることを知り、その形を繰り返し使いながら覚えていきましょう。
HTMLには決まった骨組みがある
HTMLの基本文法として、タグと属性の役割を理解しても、すぐに完成したWebページを書けるわけではありません。
Webページを作成するときは、HTML文書全体を一定の構造に沿って記述する必要があります。この構造によって、ブラウザはどこからどこまでがHTML文書なのか、どの部分にページの情報があり、どの部分を画面に表示すればよいのかを判断します。
HTMLの基本構造は、主に次の4つで構成されます。
| 構成要素 | 主な役割 |
|---|---|
| DOCTYPE宣言 | HTML文書であることをブラウザに伝える |
| html要素 | HTML文書全体を囲む |
| head要素 | Webページに関する情報を記述する |
| body要素 | ブラウザに表示する内容を記述する |
これらは、Webページを作るときの土台となるものです。
見出し、文章、画像、リンク、入力フォームなどは、すべてこの基本構造の中に配置します。
図1：HTML文書を支える基本構造
この図から分かること
HTML文書には、役割の異なる複数の部分があります。
最初にDOCTYPE宣言を記述し、その下にHTML文書全体を表すhtml要素を配置します。html要素の内側には、ページに関する情報を記述するhead要素と、ブラウザに表示する内容を記述するbody要素を配置します。
これらの配置には基本的な順序があります。DOCTYPE宣言、html要素、head要素、body要素という形を、HTML文書の骨組みとして覚えておくことが大切です。
DOCTYPE宣言の役割
HTML文書の先頭には、DOCTYPE宣言を記述します。
DOCTYPE宣言は、作成したファイルがHTML文書であることをブラウザへ伝えるための宣言です。ブラウザはこの宣言を確認し、HTMLのルールに沿って文書を解釈します。
DOCTYPE宣言はタグのように山かっこを使って記述しますが、HTML要素ではありません。そのため、開始タグと終了タグの組み合わせにはなっていません。
現在の一般的なHTMLでは、次の形を使用します。
DOCTYPE宣言の例
<!DOCTYPE html>この1行は、HTMLファイルの一番上に記述します。
大文字と小文字の違いによってHTML文書として認識されなくなるわけではありませんが、通常はDOCTYPEを大文字、htmlを小文字にした形で記述します。
DOCTYPE宣言は、ブラウザの画面には表示されません。利用者に見せる文章ではなく、ブラウザへ文書の種類を伝えるための情報だからです。
DOCTYPE宣言はなぜ必要なのか
ブラウザは、HTMLを読み取ってWebページを表示します。
しかし、HTMLには長い歴史があり、過去には現在とは異なる書き方も使われていました。そのため、DOCTYPE宣言がないと、ブラウザが古いHTMLとの互換性を優先した表示方法でページを処理する場合があります。
ブラウザには、大きく分けて次のような表示方法があります。
| 表示方法 | 特徴 |
|---|---|
| 標準モード | 現在のHTMLやCSSの仕様に近い方法で表示する |
| 互換モード | 古いWebページとの互換性を優先して表示する |
DOCTYPE宣言を正しく記述することで、ブラウザは基本的に標準モードでページを表示します。
反対にDOCTYPE宣言がない場合は、ブラウザが互換モードを選択する可能性があります。互換モードでは、CSSで指定した幅や余白が想定と異なる形で表示されることがあります。
学習用の小さなページでは、DOCTYPE宣言がなくても見た目に大きな違いが出ない場合があります。しかし、実際のWebサイトでは、ブラウザによる表示の違いが問題になることがあります。
そのため、HTML文書を作成するときは、DOCTYPE宣言を省略せず、必ず先頭に記述する習慣を付けましょう。
html要素の役割
html要素は、HTML文書全体を囲む要素です。
DOCTYPE宣言を除き、HTMLとして記述する内容は、基本的にhtml要素の内側に入ります。
html要素の中には、head要素とbody要素を記述します。
構造の関係を文章で表すと、次のようになります。
- html要素がHTML文書全体を囲む
- html要素の内側にhead要素を配置する
- head要素の後ろにbody要素を配置する
- head要素とbody要素は同じ階層に置く
html要素は、建物にたとえると、Webページ全体を包む外枠のようなものです。
head要素とbody要素は、その外枠の中に作られた、役割の異なる部屋だと考えると分かりやすいでしょう。
lang属性で文書の言語を示す
html要素には、lang属性を付けることがあります。
日本語を中心としたWebページでは、lang属性の値にjaを指定します。これにより、このHTML文書が主に日本語で書かれていることを、ブラウザや検索エンジンなどへ伝えられます。
言語を明示することは、読み上げソフトが適切な発音を選ぶためにも役立ちます。
| 指定内容 | 意味 |
|---|---|
| lang | 文書で使用する主な言語を示す属性 |
| ja | 日本語を示す値 |
| en | 英語を示す値 |
lang属性はWebページの見た目を直接変えるものではありません。しかし、検索エンジンや支援技術が文書の内容を正しく理解するための重要な情報になります。
head要素の役割
head要素には、Webページに関する情報を記述します。
ここに記述する情報の多くは、Webページの本文としてブラウザ画面に表示されません。ブラウザ、検索エンジン、外部サービスなどがページを正しく扱うために使用します。
head要素に記述する代表的な情報には、次のものがあります。
| 情報 | 主な役割 |
|---|---|
| ページタイトル | ブラウザのタブなどに表示する名前 |
| 文字コード | 日本語などの文字を正しく表示するための情報 |
| ページの説明 | 検索エンジンなどへページの概要を伝える |
| CSSファイルの情報 | Webページのデザインを読み込む |
| JavaScriptファイルの情報 | Webページで使用する処理を読み込む |
| 作者に関する情報 | ページの作成者を示す |
head要素は、利用者に直接見せる本文ではなく、Webページを正しく管理・表示するための設定場所だと考えるとよいでしょう。
title要素はタブに表示される
head要素の中で指定する情報のうち、利用者が確認しやすいものがページタイトルです。
ページタイトルは、一般的にブラウザのタブに表示されます。また、ページをブックマークしたときの名前や、検索結果に表示されるタイトルの候補として使われることもあります。
title要素はhead要素の中に記述しますが、その内容がWebページの本文に大きな見出しとして表示されるわけではありません。
画面内に大きな見出しを表示したい場合は、body要素の中でh1要素などを使用します。
| 要素 | 表示される主な場所 |
|---|---|
| title要素 | ブラウザのタブなど |
| h1要素 | Webページの本文 |
| p要素 | Webページの本文 |
title要素とh1要素は、どちらもページの名前に関係することがありますが、表示される場所と役割が異なります。
図2：head要素とbody要素の役割の違い
この図から分かること
head要素とbody要素には、はっきりとした役割の違いがあります。
head要素には、ページタイトルや文字コードなど、Webページ全体に関する設定情報を記述します。一方、body要素には、見出し、文章、画像、リンクなど、利用者がブラウザ上で見る内容を記述します。
head要素に書いた内容がすべて画面に表示されるわけではありません。ページタイトルのようにブラウザのタブへ反映されるものもありますが、多くはブラウザや検索エンジンが利用する情報です。
文字コードを指定する理由
head要素には、文字コードに関する情報も記述します。
文字コードとは、コンピュータが文字を扱うための決まりです。同じ文字であっても、使用する文字コードが異なると、コンピュータ内部での表現方法が変わります。
HTMLファイルで使用している文字コードと、ブラウザが解釈した文字コードが一致しない場合、日本語が正しく表示されず、文字化けが発生することがあります。
現在のHTMLでは、UTF-8が広く使用されています。
UTF-8では、日本語だけでなく、英語をはじめとしたさまざまな言語の文字を扱えます。Webアプリケーションでも利用される機会が多いため、基本的にはUTF-8を使用すると考えてよいでしょう。
文字コードの指定は画面には表示されませんが、日本語を正しく表示するために欠かせない設定です。
body要素の役割
body要素には、ブラウザの画面に表示するWebページの本体を記述します。
利用者が実際に目にする内容の多くは、body要素の中に配置されます。
たとえば、次のようなものです。
- ページの見出し
- 説明文や記事本文
- 商品や人物の画像
- 別のページへ移動するリンク
- 箇条書きのリスト
- 表
- 入力フォーム
- 送信ボタン
head要素がページの設定場所であるのに対して、body要素はページの内容を作る場所です。
Webページを作成するときは、最初にDOCTYPE宣言、html要素、head要素、body要素という骨組みを用意し、その後でbody要素の内側に必要な内容を書き加えていきます。
body要素の外に本文を書かない
ブラウザは、多少構造が崩れたHTMLであっても、内容を推測して表示してくれることがあります。
たとえば、body要素の外側に文章を書いても、ブラウザによっては画面に表示される場合があります。しかし、表示されたからといって、その書き方が正しいとは限りません。
HTMLは、ブラウザだけでなく、検索エンジン、読み上げソフト、検証ツール、Web開発用ツールなどにも読み取られます。基本構造が崩れていると、これらのツールがページを正しく理解できない可能性があります。
そのため、画面に表示する内容はbody要素の内側に記述する、という基本を守りましょう。
HTMLの親子関係を理解しよう
HTMLの基本構造では、要素同士が入れ子になっています。
ある要素の内側に別の要素を配置したとき、外側の要素を親要素、内側の要素を子要素と呼びます。
HTMLの基本構造では、次のような関係になっています。
| 親要素 | 子要素 |
|---|---|
| html要素 | head要素、body要素 |
| head要素 | ページタイトルや文字コードを示す要素 |
| body要素 | 見出し、段落、画像、リンクなどの要素 |
html要素から見ると、head要素とbody要素は子要素です。
head要素やbody要素から見ると、html要素は親要素です。
この親子関係を意識すると、どの終了タグがどの開始タグに対応しているのかを見つけやすくなります。
インデントで構造を見やすくする
HTMLでは、要素の親子関係が分かるように、内側の要素を右へ下げて記述することがあります。この字下げをインデントと呼びます。
インデントを入れなくても、ブラウザはHTMLを表示できます。しかし、インデントがないHTMLは、人が読んだときに構造を把握しにくくなります。
たとえば、html要素の内側にhead要素とbody要素があり、さらにbody要素の内側に見出しや段落がある場合は、内側へ進むほど右へ下げます。
インデントには、半角スペース2個または4個を使用する方法がよく使われます。重要なのは、同じファイルの中で書き方をそろえることです。
| 書き方 | 特徴 |
|---|---|
| 半角スペース2個 | 横幅を取りすぎず、階層を表現できる |
| 半角スペース4個 | 階層の違いが分かりやすい |
| タブ | エディタの設定により表示幅が変わることがある |
学習中は、使用する教材や開発環境の書き方に合わせるとよいでしょう。
開始タグと終了タグの対応を確認しよう
HTMLの基本構造では、html、head、bodyの各要素に開始タグと終了タグがあります。
終了タグには、タグ名の前にスラッシュを記述します。
特に、複数の要素を入れ子にするときは、開始した順番とは逆の順番で閉じていくことが大切です。
考え方としては、次の順番になります。
- html要素を開始する
- head要素を開始する
- head要素を終了する
- body要素を開始する
- body要素を終了する
- html要素を終了する
html要素は文書全体を囲むため、最後に終了します。
どのタグがどの要素を囲んでいるのか分からなくなった場合は、インデントと開始タグ・終了タグの位置を確認してみましょう。
HTMLの基本構造は最初に形で覚えてよい
DOCTYPE宣言、html要素、head要素、body要素には、それぞれ意味があります。ただし、HTMLを学び始めた段階で、ブラウザの細かな動作まで完全に理解する必要はありません。
最初は、次の順番で配置するものだと形で覚えても問題ありません。
- 先頭にDOCTYPE宣言を記述する
- html要素で文書全体を囲む
- html要素の内側にhead要素を置く
- head要素の後ろにbody要素を置く
- head要素にはページ情報を書く
- body要素には表示内容を書く
何度かHTMLファイルを作成するうちに、それぞれの役割が自然に身に付いていきます。
Javaのクラスやmainメソッドも、最初は定型的な書き方として覚えた人が多いでしょう。HTMLの基本構造も同じように、繰り返し記述することで慣れていけます。
図3：HTMLファイルを作成する基本の流れ
この図から分かること
HTMLファイルを作るときは、いきなり見出しや文章を書き始めるのではなく、最初に基本構造を用意します。
DOCTYPE宣言を書き、html要素の内側にhead要素とbody要素を配置します。そのうえで、head要素にはページの設定情報を記述し、body要素には利用者へ見せる内容を記述します。
最後にブラウザでファイルを開き、意図したとおりに表示されるか確認します。この流れを繰り返すことで、HTML文書の基本的な作り方が身に付いていきます。
HTMLの基本構造はサーブレット・JSPでも重要になる
サーブレットやJSPを学ぶときにも、HTMLの基本構造は重要です。
JSPは、サーバ側で処理結果を受け取り、ブラウザへ返すHTMLを生成するために使用します。そのため、JSPファイルの中でも、head要素やbody要素を使って画面を組み立てます。
たとえば、サーブレットで利用者の名前を受け取り、JSPで歓迎メッセージを表示する場合でも、ブラウザへ返される結果はHTML文書です。
サーバ側で動的に作られるページであっても、ブラウザが受け取るHTMLには基本構造が必要です。
| 技術 | HTMLの基本構造との関係 |
|---|---|
| HTMLファイル | 基本構造の中に固定された内容を書く |
| JSP | 基本構造の中に処理結果を組み込む |
| サーブレット | JSPへデータを渡したり、表示する画面を選んだりする |
| ブラウザ | 生成されたHTMLを読み取って表示する |
HTMLの基本構造を理解しておけば、JSPを学ぶときに、どこへページタイトルを書き、どこへ処理結果を表示すればよいのか判断しやすくなります。
正しい基本構造を習慣にしよう
ブラウザには、多少不完全なHTMLを補いながら表示する機能があります。そのため、タグが足りなかったり、DOCTYPE宣言が抜けていたりしても、ページが表示されることがあります。
しかし、表示されたことと、正しいHTMLであることは別です。
基本構造を守ることには、次のような利点があります。
- ブラウザによる表示の違いを減らしやすい
- HTMLの構造を人が読み取りやすくなる
- CSSやJavaScriptを適用しやすくなる
- 検索エンジンがページを理解しやすくなる
- 読み上げソフトなどの支援技術が利用しやすくなる
- JSPへ発展したときも画面を整理しやすい
- 複数人で開発するときに修正しやすくなる
学習中から正しい形で記述する習慣を付けることが、後のWebアプリケーション開発にもつながります。
まずは、DOCTYPE宣言、html要素、head要素、body要素という4つの役割を意識して、HTML文書の骨組みを作れるようになりましょう。
文量を短くした教材版や、HTMLファイル全体の作成演習を加えた実践版にも調整できます。