サーブレット&JSPの基本｜はじめてのHTML文

サーブレット&JSPの基本｜はじめてのHTML文

HTMLの最初の一歩をつかめば、Webページ作りはぐっと身近になる。

サーブレットやJSPを学んでいくと、Javaのコードだけでなく、HTMLも何度も登場します。なぜなら、Webアプリケーションの画面はHTMLで作られているからです。入力フォーム、見出し、説明文、リンク、画像など、ブラウザに表示されるものは、すべてHTMLのルールに沿って記述されています。

とはいえ、最初から難しく考える必要はありません。HTMLの文法はとてもシンプルで、まずはタグと属性という2つの基本を押さえれば、Webページの形を作れるようになります。プログラミング言語と聞くと身構えてしまうかもしれませんが、HTMLは計算や複雑な処理を書くための言語ではなく、Webページの構造を表すための言語です。そのため、文法の入口はかなり取り組みやすいものになっています。

ここでは、HTMLの基本文法として、タグとは何か、属性とは何かを順番に整理しながら解説していきます。はじめてHTMLに触れる人でもイメージしやすいように、Webページの例や図を交えながら、ゆっくり確認していきましょう。

HTMLの文法は、まず2つ覚えれば大丈夫

HTMLを学び始めると、たくさんのタグ名が出てきます。しかし、最初に覚えるべき文法の柱はそれほど多くありません。基本は次の2つです。

この2つが分かると、HTMLがどのようにWebページを作っているのかが見えてきます。

たとえば、見出しを作りたい、文章を表示したい、画像を載せたい、リンクを置きたい、といった場面では、それぞれに対応したタグを使います。さらに、文字の揃え方やリンク先、画像ファイルの場所などを指定したいときには、属性を使います。

まずは、HTMLの土台となるタグから見ていきましょう。

タグとは

タグは、Webページを構成する部品を表すための記号です。HTMLでは、どこが見出しで、どこが文章で、どこがリンクなのかを、タグを使って示します。

基本的な書き方は次の形です。

<タグ名>内容</タグ名>

この書き方では、最初の <タグ名> を開始タグ、最後の </タグ名> を終了タグと呼びます。そして、開始タグと終了タグで囲まれた部分が内容です。さらに、開始タグ・内容・終了タグをひとまとまりにしたものを要素と呼びます。

図1：タグの基本構造

この図から分かること

HTMLのタグは、ただ記号が並んでいるだけではなく、役割のあるまとまりとして書かれています。開始タグで部品の始まりを示し、終了タグで終わりを示し、その間に表示したい内容を書きます。

このまとまりを理解すると、HTMLの見方がかなり楽になります。どこからどこまでが1つの部品なのかを意識できるようになるからです。HTMLでは、このような部品を積み重ねて、Webページ全体を作っていきます。

要素という考え方を押さえよう

HTMLでは、タグだけを単独で見るよりも、要素として考えるほうが分かりやすいことが多いです。

たとえば、次の例を見てみましょう。

title要素の例

<title>街歩きメモ</title>

この例では、titleがタグ名です。街歩きメモが内容で、全体としてtitle要素になっています。title要素は、Webページのタイトルを表します。ブラウザのタブに表示される文字として使われることが多い部分です。

続いて、段落を作る例です。

p要素の例

<p>今日は商店街のカフェで新しいランチメニューを食べました。</p>

この例では、pがタグ名です。p要素は段落を表すために使います。Webページに文章を書きたいとき、とてもよく使うタグの1つです。

このように、タグにはそれぞれ意味があります。単に見た目を変えるためだけではなく、その部分が何を表しているのかをブラウザに伝えるのがHTMLの基本的な考え方です。

Webページはいろいろなタグの組み合わせでできている

HTMLには多くのタグが用意されています。よく使うものを整理すると、次のようになります。

たとえば、日記風のページを作るなら、ページのタイトルにtitleを使い、見出しにh1を使い、本文にpを使い、写真を載せるならimgを使い、お店のWebサイトへ移動するリンクにはaを使います。文章の途中で改行したいときにはbrを使います。

タグの役割が分かるようになると、Webページの見え方とHTMLの対応関係が少しずつ理解できるようになります。

図2：Webページの構成要素とタグ

この図から分かること

Webページは1つの大きなかたまりではなく、見出し、文章、画像、リンクなどの部品でできています。そして、その部品ごとに対応するタグがあります。

HTMLを書くときは、画面に何を置きたいかを考え、その内容に合ったタグを選んでいきます。見た目を先に考えるというより、まずはその内容の意味を表すタグを使うことが大切です。

内容を持たないタグもある

多くのタグは、開始タグと終了タグで内容を囲みますが、すべてのタグがそうとは限りません。中には、内容を持たないタグもあります。これを空要素と呼びます。

代表的なものが br と img です。br は改行を表し、img は画像を表示するためのタグです。これらは、段落のように中に文章を持つわけではないため、通常の要素とは少し書き方が異なります。

空要素は、一般に次のような形で書かれます。

<タグ名>

または

<タグ名 />

どちらの書き方も見かけますが、学習の最初はまず基本的な形を見慣れておくとよいでしょう。

brタグの例

<br>
<br />

このように、brタグは改行そのものを表すタグなので、タグの中に内容は入りません。

通常の要素と空要素の違いを整理すると、次のようになります。

この違いは、HTMLを読むときにも書くときにも役立ちます。終了タグがないから間違いだと考えるのではなく、空要素だからこの形でよいのだと判断できるようになります。

属性とは

タグの基本が分かったら、次に覚えたいのが属性です。属性は、タグに補足情報を加えるためのものです。

基本の書き方は次のようになります。

<タグ名 属性名="値">内容</タグ名>

属性は、タグの働きを細かく指定したいときに使います。たとえば、文字の位置を変えたい、リンク先を指定したい、画像ファイルの場所を示したい、といった場面で利用します。

ここで大切なのは、属性は単独で存在するのではなく、タグに付けて使うということです。つまり、タグが本体で、属性はそのタグに追加する説明だと考えると理解しやすくなります。

属性を使うと、タグに詳しい指示を出せる

属性の使い方をイメージしやすい例として、style属性を見てみましょう。style属性を使うと、タグに対して見た目に関する指定を加えられます。

たとえば、段落の文字を左揃え、中央揃え、右揃えにしたい場合は、次のように書けます。

style属性を使ったp要素の例

<p style="text-align:left">左揃えの案内文です。</p>
<p style="text-align:center">中央揃えの案内文です。</p>
<p style="text-align:right">右揃えの案内文です。</p>

この例では、どれもp要素ですが、style属性の値が違うため、文字の揃え方が変わります。

図3：属性を使ってタグに情報を追加する

この図から分かること

属性を使うと、同じタグでも表示や動作に違いを持たせることができます。この図では、p要素という同じタグにstyle属性を加えることで、文字の揃え方を変更しています。

つまり、タグが部品そのものを表し、属性がその部品への追加設定を表しているわけです。HTMLを書くときは、この役割の違いを意識すると整理しやすくなります。

1つのタグに複数の属性を付けることもできる

属性は1つだけとは限りません。必要であれば、1つのタグに複数の属性を設定できます。その場合は、属性同士を半角スペースで区切って書きます。

書式は次のようになります。

<タグ名 属性名="値" 属性名="値">内容</タグ名>

たとえば、リンクを設定するaタグでは、移動先を示すhref属性と、新しいタブで開くことを示すtarget属性を一緒に指定できます。

複数の属性を指定したa要素の例

<a href="https://example.com/guide" target="_blank">イベント案内を見る</a>

この例では、aタグがリンクを表し、href属性がリンク先のURLを指定しています。さらに、target属性によって、新しいタブで開く動作を指定しています。

複数の属性を書くときは、どれも開始タグの中に書く点がポイントです。終了タグのほうには書きません。この位置関係に慣れておくと、HTMLを見たときにも構造が読み取りやすくなります。

タグと属性の違いを見分けるコツ

HTMLを学び始めたばかりの頃は、タグと属性の違いが少し混ざって見えることがあります。そこで、簡単な見分け方を押さえておくと安心です。

たとえば、pは段落という部品そのものを表すのでタグです。styleは、その段落をどう表示するかを補足するので属性です。

この違いが分かると、HTMLの見通しがかなりよくなります。Webページを作るときに、まず必要な部品をタグで用意し、その後に必要な設定を属性で足していく、という流れで考えられるようになります。

はじめてHTMLを書くときに意識したいこと

HTMLは、いきなり複雑なページを書こうとしなくても大丈夫です。まずは、小さな部品を1つずつ作ることから始めるのがおすすめです。

たとえば、次のような順番で練習すると取り組みやすくなります。

1. titleタグでページのタイトルを書く
2. h1タグで見出しを書く
3. pタグで文章を書く
4. brタグで改行してみる
5. aタグでリンクを付ける
6. 属性を使って表示や動作を変えてみる

このように進めると、タグと属性の役割の違いも自然に身に付いていきます。

HTMLのよいところは、書いた結果をブラウザですぐ確認できることです。少し書いて表示し、また少し直して確認する、という流れを繰り返すことで、理解がどんどん深まっていきます。

HTMLの基本文法を知ると、Webページの見え方が変わる

これまで何気なく見ていたWebページも、HTMLの基本を知ると、見出しがあり、段落があり、リンクがあり、画像があり、それぞれに役割を持ったタグが使われていることが分かるようになります。

そして、そのタグに属性を加えることで、表示のしかたや動作を細かく調整できることも見えてきます。

サーブレットやJSPの学習では、これから先もHTMLは何度も登場します。JSPではHTMLの中に動的な情報を組み込んで画面を作るため、HTMLの基礎がしっかりしていると学習がとても進めやすくなります。

まずは、タグがWebページの部品を表し、属性がその部品に補足情報を加える、という基本をしっかり押さえていきましょう。そこが分かると、はじめてのHTML文は決して難しいものではなく、Webページ作りの楽しい入口として感じられるはずです。