いろいろなタグ

タグと要素

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

例えば

<p>工事中</p>

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

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

<p>工事中</p>

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

HTMLではタグの大文字・小文字を区別しませんが，ここでは小文字に統一します（少し前に流行ったXHTMLではタグは必ず小文字で書きました）。なお，HTMLでは終了タグを省略できる場合がありますが，ここでは終了タグも省略しないで書くことにします（XHTMLでは終了タグを省略できませんでした）。

<body>...</body>の中に直接書ける要素

見出し

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

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

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

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

段落

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

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

引用文

前後で改行する引用文は <blockquote> ... </blockquote> です。中に文字を直接入れることもできますし，段落などを入れることもできます。

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

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

箇条書き

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

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

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

上のように書けば，

私の好きな雑誌：

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

番号付き箇条書き

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

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

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

上のように書けば，

私の好きな雑誌：

  1. りぼん
  2. なかよし

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

用語と説明

次のように書きます。

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

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

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

dl は HTML4 までは definition list（定義リスト）の意味でしたが，HTML5 では description list（記述リスト）と称されるようになりました。dt，dd は dl の中の term 部，description または definition 部です。

自動改行するタグ

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

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

と書くと

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

となります。pre は preformatted text の意味です。

複数の段落などをグループ化するタグ

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

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

div はもともと division（部分）の意味でしたが，現在は「何の意味もない」グループ化の要素です。HTML5では，なるべく article，section，nav，fieldset などを使うことが勧められています。

段落間の区切り（横棒）

この次の行にある区切りは <hr> と書きます。hr はもともと horizontal rule（水平の罫線）の意味でしたが，HTML5では段落レベルの区切りという意味になりました。通常は横棒で表されます。

<hr> は，開始タグ・終了タグの区別がない特別なタグです。なお，XHTML（少し前に流行ったHTMLの拡張版）ではこのような終了タグのないものは最後に / を入れて <hr /> のような書き方にしました。

段落の中で使う要素

強調を表すタグ

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

<strong> ... </strong> も強調ですが，em より強い強調を表すのが一般的です。

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

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

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

強制改行

段落の途中などで強制的に改行したい場合は <br> を使います。br は line break（改行）から来ています。

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

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

テキストの一部をグループ化するタグ

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

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

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

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

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

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

推奨しない要素

次の要素は，すでに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;
}

本文全体を中央揃えにすると，素人っぽい印象になります。

< や > を書き込む方法

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

Last modified: