いろいろなタグ

タグとは

さきほど作った index.html には <...> や </...> のような三角のかっこで囲まれたものがたくさんありました。 こういうものをタグ（tag）といいます。

例えば

<p>工事中</p>

は，段落のはじめを表す <p> という開始タグと，段落の終わりを表す </p> という終了タグの間に，「工事中」と書かれています。

タグとその中身を合わせて「要素」といいます。例えばさきほどの

<p>工事中</p>

は一つの段落を表す「p要素」です。

XHTMLではタグは必ず小文字で書きます。

ブロックレベル要素

要素には，ブロックレベル要素と，インライン要素とがあります。

ブロックレベル要素は，前後で改行します。

見出し

<h1> ... </h1> は一番大きい見出しです。

<h2> ... </h2> は二番目の見出しです。

以下，<h3> ... </h3>，……，<h6> ... </h6> と続きます。

ちなみに h は heading（見出し）の頭文字です。

段落

<p> ... </p> は段落です。 <p> の p は paragraph（段落）から来ています。

<p>これは段落です。</p>

引用文

前後で改行する引用文は <blockquote> ... </blockquote> です。 中に文字を直接入れるのではなく，段落などのブロックレベル要素を入れます。

<p>パスカルは</p>
<blockquote>
  <p>人間は考える葦である。</p>
</blockquote>
<p>と言った。</p>

なお，ここで <blockquote> と </blockquote> で囲まれた部分を字下げ（インデント）していますが，これは開始タグと終了タグの対応関係を見やすくするためです。インデントの空白は，半角のスペースまたはタブを使います。全角の空白は使えません。

箇条書き

箇条書きは <ul> ... </ul> です。 各箇条は <li> ... </li> で挟みます。

<p>私の好きな雑誌：</p>

<ul>
  <li>りぼん</li>
  <li>なかよし</li>
</ul>

上のように書けば，

私の好きな雑誌：

のように表示されます。 ul は unordered list（番号の付かない箇条書き），li は list item（箇条書きの項目）の意味です。

<li> ... </li> の中には通常は文字などのインライン要素を直接入れますが，ブロックレベル要素を入れてもかまいません。

番号付き箇条書き

番号付き箇条書きは <ol> ... </ol> です。 各箇条は <li> ... </li> で挟みます。

<p>私の好きな雑誌：</p>

<ol>
  <li>りぼん</li>
  <li>なかよし</li>
</ol>

上のように書けば，

私の好きな雑誌：

  1. りぼん
  2. なかよし

のように表示されます。 ol は ordered list（番号付き箇条書き）の意味です。

用語と説明

次のように書きます。

<dl>
  <dt>XHTML</dt>
  <dd>Webページをマーク付けするための言語</dd>
  <dt>CSS</dt>
  <dd>Webページの見栄えを整えるための言語</dd>
</dl>

次のように表示されます。

XHTML
Webページをマーク付けするための言語
CSS
Webページの見栄えを整えるための言語

dl は definition list（定義リスト），dt は definition term（定義する用語），dd は definition description（定義の記述）の意味です。

自動改行するタグ

プログラミングの解説などで，スペースや改行をそのまま出力したいときは，その部分を <pre> …… </pre> で囲みます。例えば

<pre>
if (a == 3) {
    printf("3です。\n");
}
</pre>

と書くと

if (a == 3) {
    printf("3です。\n");
}

となります。

複数のブロックをグループ化するタグ

<div> ... </div> は汎用のブロックを作るためのタグです。 中に直接文字を書いてもいいのですが，一般には，複数のブロックレベル要素をグループ化して名前を付けるために使います。

<div id="head">
  <h1> ... </h1>
  <p> ... </p>
</div>

横棒

この次の行にある横棒は <hr /> と書きます。 hr は horizontal rule（水平の罫線）の意味です。

<hr /> は，開始タグ・終了タグの区別がない特別なタグです。従来のHTMLでは <hr> と書きましたが，XHTMLでは終了タグのないものは最後に / を入れてこのような書き方にします。

その他

表もブロックレベル要素です。

インライン要素

前後で改行しないのがインライン要素です。

通常の文字もインライン要素の一つと考えてかまいません。

ブロックレベル要素にはインライン要素を入れることができますが，インライン要素にはブロックレベル要素を入れることはできません。

画像はインライン要素です。

リンクを作るためのアンカー要素もインライン要素です。

強調を表すタグ

強調（emphasis）は <em> ... </em> で表します。

強い強調（strong emphasis）は <strong> ... </strong> で表します。

デフォルトでは em は斜体，strong は太字になります。ただし，日本語を機械的に斜体にしたものは見苦しい上に，ブラウザによっては日本語は斜体にしてくれませんので，日本ではスタイルシートで再定義したほうがいいでしょう。例えば

em {
  font-style: normal;
  color: #F30;
}

とすると朱色になります。

強制改行

ブロックレベルの要素の前後では自動的に改行されますが，これ以外のところで強制的に改行したい場合は <br /> を使います。 br は line break（改行）から来ています。

<p>1行目<br />
2行目</p>

<br /> は，開始タグ・終了タグの区別がない特別なタグです。従来のHTMLでは <br> と書きましたが，XHTMLでは終了タグのないものは最後に / を入れてこのような書き方にします。

その他のインライン要素

リンクや画像もインライン要素です。

複数のインライン要素をグループ化するタグ

<span> ... </span> は，それ自身では何の働きもしませんが，文字列に名前を付けてCSSやJavaScriptで操作するために使います。

<p>今日は<span id="youbi">日曜日</span>です。</p>

span は次のように言語を指定するためにも使われます。 日本語は ja，中国語は zh，英語は en です。

<p>日本の骨と中国語の<span lang="zh">骨</span>は字形が少し違う。</p>

日本の骨と中国語の骨は字形が少し違う。

ブラウザによっては区別して表示してくれます。 さらに zh-Hans で简体，zh-Hant で繁體になるかもしれません。

なお，XHTML 1.1からは lang は xml:lang になります（ブラウザはきっと未対応でしょう）。

推奨しない要素

次の要素は，XHTMLになる前のHTML 4の段階で「推奨しない」（deprecated）とされています： applet, basefont, center, dir, font, isindex, menu, s, strike, u

center はHTML 4以降ではCSSで text-align: center と書くのが推奨です。たとえば本文全体を中央揃えしたいなら，CSSに次のように指定します：

body {
   text-align: center;
}

本文全体を中央揃えにすると，素人っぽいデザインになります。

< や > を書き込む方法

XHTMLやプログラミング言語の解説を書くときに < や > を書きたいことがあります。でも普通に書くとタグになってしまいます。そこで，次の三つのルールを使います：

奥村晴彦

Last modified: 2008-08-10 21:28:48