とほほのHTMLリファレンス(基本)

HOME > とほほのWWW入門 > とほほのHTMLリファレンス > 基本
1998年7月19日
<HTML>〜</HTML> HTML文書 H2/N2/e2
説明
<HTML>〜</HTML>で囲まれた部分がHTML文書であることを示します。ほとんどのHTML文書は次の使用例のような構造で記述されます。詳細は「とほほのホームページ入門」を参照してください。

属性
VERSION="..." H2。あまり使用されていません。今後は廃止される予定です。

使用例
<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

注意
通常のHTML文書では、<HTML>、<HEAD>、<TITLE>、<BODY>などはそれぞれ、HTML文書注意一度しか記述してはなりません。よく、<HTML>や、<BODY>が複数記述されているのを見かけますが、間違いです。

<HEAD>〜</HEAD> ヘッダ情報 H2/N2/e2
説明
<HEAD>〜</HEAD>で囲まれた部分がHTML文書のヘッダであることを示します。 ヘッダには <TITLE> を記述します。他にも必要に応じて <BASE><SCRIPT><STYLE><META><LINK><OBJECT><NEXTID><ISINDEX>、 などのタグを記述します。

使用例
<HTML>を参照してください。

<TITLE>〜</TITLE> タイトル H2/N2/e2
説明
<TITLE>〜</TITLE>で囲まれた部分がタイトルとして扱われます。タイトルはページ上には表示されませんが、ブラウザのツールバー、ヒストリ(履歴)一覧、検索エンジンの結果などに表示されますので、必ず記述するようにしましょう。

使用例
<HTML>を参照してください。

補足
UNIX版の古いバージョンのブラウザなどではタイトルに日本語を用いると文字化けしてしまうものがあります。しかし、そういうブラウザの割合も少なくなってきているし、「未だにタイトルに日本語を表示できないのはブラウザ側の怠慢」と割り切って、日本語を使用するのも現実解ではないかと思います。

<BODY>〜<BODY> 本文 H2/N2/e2
説明
<BODY>〜</BODY>で囲まれた部分がHTML文書の本文であることを示します。 この本文のところに、<H1>や<B>などのいろいろなタグを使用してHTML文書を完成させます。

属性
BGCOLOR="color" H3/N2/e2。 背景の色を指定します。 省略時の色は、NN4やIE4では白ですが、古いバージョンでは灰色なので注意が必要です。 BGCOLOR=white を指定した場合は TEXT=black も忘れずに指定します。 さもないと、ユーザーがデスクトップデザインで白文字を用いている場合に、白地に白文字となってしまいます。
BACKGROUND="url" H3/N2/e2。 背景に表示する画像ファイルを指定します。 暗めの画像を貼り付ける場合は、BGCOLORで同系色の色を指定しましょう。 さもないと、画像読み込み中や画像を読み込まないモードで表示した際に読みづらくなります。 IE4.0やNN4.0ではスタイルシートを利用して、画像を縦一列のみ、横一列のみ表示することも可能です。
TEXT="color" H3/N2/e2。 TEXTは通常テキストの、LINKはリンクテキストの、VLINKはキャッシュ済みリンクテキストの、ALINKはマウスクリックしている間のリンクテキストの色を指定します。 IE1.0〜IE3.0ではALINKは無視されるようです。
LINK="color"
VLINK="color"
ALINK="color"
LEFTMARGIN=n e2。 テキスト領域の左右および上下のマージン(余白)をピクセル単位で指定します。 0にすると画像を左上に隙間無く表示できます。
TOPMARGIN=n
RIGHTMARGIN=n e4。テキスト領域の右マージン(余白)、下マージンを指定します。 左右や上下で異なるマージンを設定する場合に使用します。
BOTTOMMARGIN=n
MARGINWIDTH=n N4。 NNでは LEFTMARGIN / TOPMARGIN の代わりにこれらを使用します。 汎用性を高めるなら両方指定します。
MARGINHEIGHT=n
BGPROPERTIES=... e2。 BGPROPERTIES=FIXEDとすると背景が固定され、 スクロールバーでテキストをスクロールしても背景だけはスクロールしなくなります。
SCROLL=... e3。SCROLL=NOとするとスクロールが禁止されます。

使用例
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY BACKGROUND="back.gif"
      BGCOLOR=white TEXT=black>
ここに本文を記述します。
</BODY>
</HTML>

<Hn>〜</Hn> 章付け H2/N2/e2
説明
章の見出し(Header)を指定します。 n は章付けのレベルで、1〜6までの数字を指定します。

属性
ALIGN=... H3/N2/e2。 表示する位置を指定します。 ...にはleft(左揃え)、right(右揃え)、center(中揃え)のいずれかを指定します。 HTML4.0ではjustify(均等配列)も定義されていますが、サポートしているブラウザは少ないようです。

使用例
<H1 ALIGN=center>第1章 HTML入門</H1>
<H2>1.1 HTMLとは</H2>
HTMLはHyperText Markup Languageの略で...
<H2>1.2 CGIとは</H2>
CGIはCommon Gateway Interfaceの略で...
これ(↑)を表示するとこう(↓)なります。

第1章 HTML入門

1.1 HTMLとは

HTMLはHyperText Markup Languageの略で...

1.2 CGIとは

CGIはCommon Gateway Interfaceの略で...

補足
<Hn>は見出しを指定するタグであり、これを解釈して目次を表示する機能を持ったブラウザも実際にあります。単にフォントの大きさを変更する目的での使用であれば<Hn>ではなく、<FONT SIZE=n>スタイルシートを利用しましょう。

<P>〜</P> 段落付け H2/N2/e2
説明
<P>〜</P>で囲まれた部分がひとつの段落(Paragraph)となります。

属性
ALIGN=... H3/N2/e3。 表示する位置を指定します。 ...にはleft(左揃え)、right(右揃え)、center(中揃え)のいずれかを指定します。 IE2.0ではcenterのみが使用可能でした。 HTML4.0ではjustify(均等配列)も定義されていますが、サポートしているブラウザは少ないようです。

使用例
<P>ここがひとつ目の段落です。
HTML文書の中では通常は改行は無視されて
連結された状態で表示されます。
<P>ここがふたつ目の段落です。
段落を変更すると1行分の隙間をあけて改行されます。
<P> 行頭に全角のスペース文字を入れると、
なんとなく日本語の段落開始のような雰囲気になります。
これ(↑)を表示するとこう(↓)なります。

ここがひとつ目の段落です。 HTML文書の中では通常は改行は無視されて 連結された状態で表示されます。

ここがふたつ目の段落です。 段落を変更すると1行分の隙間をあけて改行されます。

 行頭に全角のスペース文字を入れると、 なんとなく日本語の段落開始のような雰囲気になります。

補足
</P>は省略可能ですが、ALIGN属性やスタイルシートを指定する時などに有効です。

<P>では何個並べても1行しか改行しませんので、複数行改行したい時には<BR>を複数個並べてください。

<P>は段落を示すタグであり、単に1行あける目的のために用いることは好ましくありません。しかし、単に1行あける目的で<BR><BR>と記述した場合、改行の位置によっては1行のつもりが2行あいてしまうことがあります。(前行の行末がページの右端にきた場合)

最初の1行を字下げ(インデント)するには、スタイルシートの text-indent を指定しますが、漢字1文字分という単位がないので、全角スペース文字で誤魔化すことも多いようです。


<HR> 水平線 H2/N2/e2
説明
横線をひきます。

属性
ALIGN=... H3/N2/e2。 横線を表示する位置を指定します。 ...にはleft(左揃え), center(中揃え), right(右揃え) のいずれかを指定します。
SIZE=n H3/N2/e2。 線の幅をピクセル単位で指定します。
WIDTH=n H3/N2/e2。 線の横の長さを指定します。 ピクセル値指定の他、 WIDTH="60%" のような画面の横幅に対する割合指定も可能です。
NOSHADE H3/N2/e2。 立体的な影をもたない平面的な線にします。
COLOR="color" e3。 線の色を指定します。
SRC="..." e4。IE4.0で定義されていますが使用方法は不明。

使用例
<HR>
<HR WIDTH=100 SIZE=10>
<HR WIDTH="50%">
<HR NOSHADE COLOR=green>
これ(↑)を表示するとこう(↓)なります。





<!-- 〜 --> 注釈(コメント) H2/N2/e2
説明
テキストを <!-- と --> で囲むことにより、 その部分を注釈とすることができます。 閉じるほうにはビックリマーク( ! )が無いことに注意してください。 注釈はHTML文書中にコメントを書き込むためのものでブラウザには表示されません。 IEでは<COMMENT>も使用できますが、<!-- -->を使用した方が無難でしょう。 注釈は複数行にわたってもかまいません。

使用例
あいうえお <!-- かきくけこ --> さしすせそ
<!-- 
たちつてと
なにぬねの
-->
はひふへほ
これ(↑)を表示するとこう(↓)なります。
あいうえお さしすせそ はひふへほ

&xxx; 特殊文字 H2/N2/e2
説明
HTML文書の中では <> などの文字をそのままでは表示できない場合があります。 &lt; などの名前符号、もしくは &#60; などの数値符号を記述することにより、< と表示することができます。

主な特殊文字一覧
名前符号数値符号表示される文字
&lt;&#60;右大不等号 ( < )
&gt;&#62;左大不等号 ( > )
&amp;&#38;アンパサンド ( & )
&quot;&#34;ダブルクォーテーション ( " )

補足
上記の他にも、&nbsp;(空白)や&copy;(コピーライト)など多くのものが定義されていますが、NN3.0などの日本語環境では文字化けすることが多いので、使用しない方が無難です。

Copyright(C) とほほ ( http://www2e.biglobe.ne.jp/~s-hasei/ )