1999.8.15日NEW
Making of ZK

入門HTML講座

目次 1.HTMLの基本 2.ハイパーリンク 3.ページとテキスト 4.画像 5.リスト 6.テーブル 前ページ 次ページ

1.3 文書体部の基本要素

 HTMLでは、<BODY>タグで囲んだ部分が、 ブラウザのウィンドウのクライアント領域(内容を表示するウィンドウの本体となる領域) に表示されます。この部分は、「文書体部」といい、内容となるテキスト文書の他、 文章構造を表すさまざまな要素を記述します。

見出し

 一般に、文章にはその内容を表す「見出しHeader)」を付けます。 HTMLでは、見出しの重要度を6段階に分けて、一番重要な「レベル1の見出し」から 「レベル6の見出し」まで設定することができます。それぞれ、 <H1></H1>タグから、 <H6></H6>タグで 記述します。1〜6のレベルを「n」で表して、<Hn>タグと 表現する場合もあります。
 ブラウザの表示は、太字(ボールド)で、重要度の高い見出しほど大きな文字サイズになりますが、 「見出し=大きな太字」と決め付けることはできません。「見出し」というのは文章構造上の定義で、 「大きな太字」というのは視覚効果(見映え)の設定です。たまたま、代表的なブラウザが、 「見出しは大きな太字で表示する」ように設定されているだけであって、「見出し」を表現する 一つの方法にすぎません。したがって、「大きな太字」を設定したくて <Hn>タグを記述するのは、HTMLの記述方法としては、 誤りであるということになります。

●見出し(header)
<H1> 〜 </H1> … レベル1の見出し(最大分類見出し)
<H2> 〜 </H2> … レベル2の見出し
<H3> 〜 </H3> … レベル3の見出し
<H4> 〜 </H4> … レベル4の見出し
<H5> 〜 </H5> … レベル5の見出し
<H6> 〜 </H6> … レベル6の見出し(最小分類見出し)

段落

 通常の文章は、いくつかの「段落Paragraph)」によって構成されます。 段落は、「改行で区切られる文のまとまり」と考えれば良いでしょう。HTMLでも、 段落が文章の構成要素です。一般に、改行だけでなく、前後に1行分の空白行が挿入されます。
 段落は、<P>タグで記述しますが、終了タグは省略できます。 一般には、省略することが奨励されているようです。

●見出し(header)
<P> 〜 </P> … 段落

横罫線(よこけいせん)

 文章の区切りを表すのは段落ですが、より明示的に表現したり視覚効果を狙って、文章中に 「横罫線Horizontal Rule:水平罫線)」を記述することができます。
 横罫線は、<HR>タグで記述します。また、 <HR>タグ自体が横罫線の要素そのものなので、 終了タグはありません(省略可能というのではなく、本来、存在しないのです)。

●横罫線(horizontal rule)
<HR> … 横罫線

改行

 HTML文書では、テキスト文字としての「改行コード」は無視されます。つまり、 「メモ帳」の入力画面でいくら改行しても、それと同じようには改行してくれません。 改行させたい場合は、文章構造として、改行もタグで記述する必要があるのです。
 「改行Line Break)」は、<BR> タグで記述します。<BR>タグも要素そのものを表すので、 終了タグはありません。
 また、これは「強制改行」なので、HTML文書の行末・行頭や単独行で記述する 必要はありません。行の途中に記述されても、その位置で、必ず改行します。

●改行(line break)
<BR> … 改行(強制改行)

 ここで紹介したタグを取り込んで、初歩的なHTML文書を記述してみましょう。 ファイル名は、「index.html」としておきます。

サンプル 1-2 index.html(基本的なHTML文書)
<HTML>
<HEAD>
  <TITLE>絶景倶楽部【入門HTML講座】</TITLE>
</HEAD>
<BODY>
<H1>入門HTML講座</H1>
<HR>
<P>
 ちまたには数多くの「ホームページ作成ソフト」が存在します。
HTMLなんか知らなくても、ホームページは作れるのです。<BR>
 でも、知らないよりは知っていた方が良いですよね。
それに、HTMLを書ければ、Windowsの「メモ帳」のような附属のアクセサリ
(のテキストエディタ)でホームページを作れてしまいます。<BR>
 「ただ」ですよ。「ただ」!<BR>
</BODY>
</HTML>
このリストを表示する (新しいウィンドウを開きます。参照後は、自分で閉じて下さい。)


目次 1.HTMLの基本 2.ハイパーリンク 3.ページとテキスト 4.画像 5.リスト 6.テーブル 前ページ 次ページ
--> 【Making of ZK】へ