HTML基礎タグ(文章編)|ゼロからのWeb制作 Vol.3

資料10

こんにちは、鈴木です。
前回はHTMLの基本構造について説明しました。
今回はサイトを見やすくするために必要な文章のタグについて書いていこうと思います。

 

目次

  1. 見出しと段落の表示
  2. リストの表示
  3. 表の作成

1.見出しと段落の表示

まず、前回作成したHTML文書の基本構造の<body>のタグに文章を入力していきます。

資料4

これをブラウザで表示すると以下のようになります。

資料8

*文章は前々回の「ゼロからのWeb制作 Vol.1|制作の流れ」から引用しました。

文章は表示されていますが、改行されておらず、非常に見づらい状態になっています。ブラウザは、文章だけではどこで改行するのか、どこが見出しなのかを判断することはできません。そこで、ブラウザが文章の構造を理解できるように、HTMLタグを付け加えていきます。

HTMLタグを付け加えると以下のようになります。

資料5

<h1>、<h2>は、見出し<heading1、2>を、<p>は段落(paragraph)を表します。
<br>は、終了タグをを記述しない単独のタグで、改行を表します。

ブラウザの画面だと以下のようになります。

資料9

*見出しタグ<h1>、<h2>を記述しましたが、見出しタグは<h1>~<h6>まで指定することが可能です。

2.リストの表示

次に、リストを表示してみましょう。
例えば、文章の中の1~8までの項目を必要ないかもしれませんが、箇条書きにします。

以下のように、箇条書きにした方が適切な場合は、リストとして<ul>と<li>を使ってマークアップします。
リスト全体を<ul>~</ul>で囲み、各項目は<li>~</li>で括ります。

資料6

ブラウザの画面だと以下のようになります。

資料10

*<ul>を<ol>に変更すると、番号付きリストにすることができます。
上記の文章の場合は、すでに番号が付けられていますが、番号がない場合に<ul>を<ol>にすると番号付きのリストになります。

3.表の作成

次に、表を作成してみましょう。

資料7

表を出力するには、表全体を<table>~<table>で囲みます。
table要素内には、まず、表のタイトルを出力するタグ<caption>~</caption>を記述します。
次に、行全体を<tr>~</tr>で括り、見出し項目は<th>~</th>で、データ項目は<td>~</td>で括ります。

ブラウザの画面だと以下のようになります。

資料11

ブラウザで出力してみると、罫線などが表示されていないため見づらい状態ではありますが、表形式になっていることが分かります。
表を見やすくするための装飾はCSSで行うため、次回以降に説明します。

次回は、今回説明しきれなかったHTMLのタグについて書いていこうと思います。