タグはホームページの記述に使用される HTML （Hyper Text Markup Language）文書の中で、文書の書式や文字のサイズ・色など、ブラウザの表示に指示するのに用いられます。
"tag" の元々の意味は「付け札」、「ラベル」などで、洋服の内側に縫いつけられているブランド名や洗濯法などが書かれた布きれ、といったイメージですが、ここでいう HTML 文書の「タグ」は、ウェブページの表示を制御するためにブラウザに与える「命令」と考えればいいでしょう。

タグは "<" と ">" で囲まれていて、一般的には <タグ … > ～ </タグ> という形式で使用されます。
<タグ …> と </タグ> に挟まれた、 "～" の部分がタグの有効範囲です。 <BR> のように書式制御の終了を表す </BR> がないものや、 <P>、 <TR>、 <TD> などのように </タグ> が省略できるものもあります。
"…" は属性で、これによって更にきめの細かい設定ができます。タグによって、何種類もの属性が設定できるものもあれば、属性のないタグもあります。

タグの一例です。

きらきら光る　小さな星よ
あなたはどうして　光るのでしょう
お空の上の　ダイヤのようね

これを画面の中心に 3 行で表示させたいときは、たとえば

<CENTER>
　　　きらきら光る　小さな星よ<BR>
　　　あなたはどうして　光るのでしょう<BR>
　　　お空の上の　ダイヤのようね<BR>
</CENTER>

と書きます。
<CENTER> は </CENTER> が現れるまで、その間のすべての文書（文字も画像も）を中心に揃えて表示するタグで、 <BR> は改行のタグです。 HTML 文書での改行や字下げはブラウザの表示にほとんど影響を与えないので、改行するには <BR> タグを使って指示します。
この HTML 文書は次のように表示されます。当然、タグ自身は表示されません。

きらきら光る　小さな星よ
あなたはどうして　光るのでしょう
お空の上の　ダイヤのようね

<BR> がないと、改行して三行に書いてあっても、次のようになります。

きらきら光る　小さな星よあなたはどうして　光るのでしょうお空の上の　ダイヤのようね

主なタグ：　 <A> <B> <BODY> <BR> <CENTER> <FONT> <HEAD> <HTML> <I> <IMG> <TABLE> <TD> <TITLE> <TR>

<A … > ～ </A> 〔Anchor〕

ハイパーリンク

　href = "URI"

<A> と </A> の間の文字等 (画像でも良い) にリンクが設定されます。 "～" の部分をマウスでクリックすると、 URI (Uniform Resource Identifier) で指定されたページが表示されます。

　name = "LABEL"

name 属性を使用して HTML 文書に LABEL を付けておくと、ページ内の任意の位置にリンクを設定することができます。
このページでも、上の「主なタグ」のリンクをクリックすると、その項目について説明されている部分が表示されます。ここでも name 属性が使用されています。
　

<B> ～ </B> 〔Bold〕

文書を太字で表示します。

<B> と </B> の間の文字は太く表示されます。
　

<BODY … > ～ </BODY>
〔Body〕

HTML 文書の本文を表します。

HTML 文書はヘッダ <HEAD> と本文 <BODY> からなっています。 BODY タグには様々な属性を設定することができます。

　background = "URI"

背景に壁紙を表示します。使用する画像ファイル名を URI で指定します。

　bgcolor = "#RGB"

背景の色を指定します。色は R,G,B 3 色を、それぞれ 2 桁の 16 進数で表します。 "#FF0000" は赤、 "#00FF00" は緑、 "#0000FF" は青、 "#FFFFFF" は白、 "#CCCCCC" は灰色になります。

　text = "#RGB"

文字の色を指定します。色の指定法は bgcolor と同じです。 "#000000" は黒、 "#000099" は紺になります。

　link = "#RGB"

リンクの色を指定します。色の指定法は bgcolor と同じです。

　vlink = "#RGB"

訪問済みのリンクの色を指定します。色の指定法は bgcolor と同じです。
　

<BR> 〔Line Break〕

改行

HTML 文書では、改行コードや空白文字は一般的に殆ど無視されます。例えば、
Twinkle, twinkle, little star,
How I wonder what you are.
Up above the world so high,
Like a diamond in the sky.
と改行して記述したものも、ブラウザでは
Twinkle, twinkle, little star, How I wonder what you are. Up above the world so high, Like a diamond in the sky.
と表示されます。

<BR> タグなどを使って次のように改行を指示しなければなりません。
Twinkle, twinkle, little star, <BR>
How I wonder what you are. <BR>
Up above the world so high, <BR>
Like a diamond in the sky. <BR>
　

<CENTER> ～ </CENTER>
〔Center〕

文字や画像を中心に揃えて表示します。

class=at<CENTER> と </CENTER> の間の文字や画像は、画面の左右中心揃えで表示されます。
　

<FONT … > ～ </FONT>
〔Font〕

文字の大きさや色を指定します。

　size = n
　size = ±n

<FONT> と </FONT> の間の文字の大きさを指定します。
文字サイズは 1～7 の数字で直接指定する方法と、現在のサイズより大きく、あるいは小さくする程度を数字で指定する方法があります。

　color = "#RGB"

<FONT> と </FONT> の間の文字の色を指定します。色の指定の方法は <BODY> の bgcolor 等と同じです。
　

<HEAD> ～ </HEAD>
〔Head〕

HTML 文書のヘッダ部を記述します。

HTML 文書はヘッダ <HEAD> と本文 <BODY> からなっています。ヘッダには <TITLE>、 <META> 等によって HTML 文書の情報を記述します。
　

<HTML> ～ </HTML>
〔HyperText Markup Language〕

文書が HTML で記述されていることを宣言します。

HTML 文書の最初に <HTML>、最後に </HTML> タグを記述します。
　

<I> ～ </I> 〔Italic〕

文書をイタリック（斜体）で表示します。

<I> と </I> の間の文字はイタリック（斜体）で表示されます。
　

<IMG … > 〔Image〕

画像を表示します。

　src = "URI"

URI (Uniform Resource Identifier) で指定された画像ファイルが表示されます。

　height = n　or　height = n％

画像の高さをピクセル数、または原画像との比率（％）で指定します。

　width = n　 or 　width = n％

画像の幅をピクセル数、または原画像との比率（％）で指定します。

　alt = "TEXT"

本来は初期の画像表示未対応のブラウザで画像に代わって説明を表示するためのものでしたが、現在でも画像にマウスカーソルをあわせると alt 属性に記述した文章が表示されたり、視覚障害者用のブラウザでは音声で読み上げるデータとして使われています。

　border = n

画像の周囲の枠線の幅をピクセル数で指定します。画像を枠線で囲んで強調したい場合は、1 以上の値を指定します。画像にリンクを設定したときに枠が表示される場合がありますが、 border = 0 とすると表示されなくなります。
　

<TABLE … > ～ </TABLE>
〔Table〕

文書を表の形式で表示します。

<TABLE border>
　　<TR align="center"> <TD>タグ</TD> <TD>意味</TD></TR>
　　<TR> <TD><TABLE></TD> <TD>表</TD></TR>
　　<TR> <TD><TR></TD> <TD>表の行</TD></TR>
　　<TR> <TD><TD></TD> <TD>表のセル</TD></TR>
</TABLE>

と記述すると、次のように表の形で表示されます。

タグ	意味
<TABLE>	表
<TR>	表の行
<TD>	表のセル

本来はこのような表を作るためのタグですが、罫線を表示しないようにするとレイアウトにも重宝です。このページのこの部分も、 <TABLE> タグを使った大きい「表」です。

　border = n　 or 　border

表の境界線の幅を指定します。 "= n" を省略すると "border = 1" と同じ結果になります。 border オプションを省略すると "border = 0" と同じになって、境界線は表示されません。 <TABLE> には border 以外にも、いろいろな属性が設定できます。
　

<TD … > ～ </TD>
〔Table Data Cells〕

表のセルを作ります。

表のデータセルを作ります（<TABLE> の項参照）。 <TD> にはセル内の文書の表示位置や背景色、背景画像の指定など、さまざまな属性が記述できます。 </TD> は省略できます。
　

<TITLE> ～ </TITLE>
〔Title〕

HTML 文書の表題を表します。

<HEAD> の中で使用される、文書の表題を表すタグです。このタイトルはブラウザの画面には表示されませんが、ウィンドウのタイトルとして表示されたり、ブックマークやお気に入りで表示されたり、表題をつける設定でページを印刷するときに使用されたりします。
　

<TR … > ～ </TR>
〔Table Row〕

表の行を定義します。

表の行を作ります（<TABLE> の項参照）。 <TR> にも表の行単位で文書の表示位置の指定や背景色、背景画像の指定など、さまざまな属性が記述できます。 </TR> も省略することができます。
　

情報処理概論に戻る用語解説に戻る HTML に戻る戻る

^*1 原典は "Twinkle, twinkle, little star …" でおなじみのイギリスの歌です（もとはフランスの歌らしいですが）。訳詞がいくつかありますが、著作権の問題がやっかいそうなので、適当に訳したものを使っておきました。

update; 2013.02.25