いろいろなタグ

タグと要素

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

例えば

<p>工事中</p>

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

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

<p>工事中</p>

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

HTMLではタグの大文字・小文字を区別しませんが,ここでは小文字に統一します(XHTMLではタグは必ず小文字で書きます)。なお,HTMLでは終了タグを省略できる場合がありますが,ここでは終了タグも省略しないで書くことにします(XHTMLでは終了タグを省略できません)。

いろいろな要素

見出し

<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ではこのような終了タグのないものは最後に / を入れて <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: