HTML記述の実際

第1章 「属性がデフォルト」のページ

まえおき
前回のHTML記述の実習  1では<h1>、<h2>、<h3>、<h4>、<h5>、<p>、<div>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<br>のタグ14個の実習をしてきました。
そうして現実的にbody内では、殆どこの14個のタグを用いてページで出来ているのです。その他に使用したタグといえば最下段の「リンク」タグおよびテキストの整形を目的とおした<pre>タグの使用と「ライン」用の<hr>タグ3点のみです。(ただし、head部でスタイルシートの設定は別です。)

そこで「ライン」の<hr>タグと
さらに、「引用」を示す<blckquote>と
作成者情報欄の<adress>タグの3点を加え17個のタグ用いてページを作ってみました。
標題のとおり、ここでは、未だ属性・値の指定はしていません。デフォルト設定だけでも結構メリハリが付くものです。htmlの各タグが、論理構造を表している結果なのでしょう。下段の図をご覧ください。

第1節 ブロックレベルタグを使用する


1 <div>に<ol>入れ子&<p>使用

(1)<div>タグについて
<div>タグ内の文章です。文字列と文字列と文字列で成り立ち<p>タグ同様に段落を形成します。 <p>タグとの主な相違点は下記の1,2、3が挙げられます。
  1. 記述上からは、<p>タグは終了形の</p>が省略可です。<div>タグは終了形省略不可です。
  2. 体裁上からは、<p>タグは上下にマージン(余白)が取られるため段落の前後に空白ができます。<div>タグは段落の前後に空白ができません。
  3. <p>タグは「他のブロックレベルタグ」を「入れ子」にすることができません。一方<div>タグは殆ど全部といって良いほど「入れ子」にすることができます。bodyタグの次に偉いタグということができます。
  4. <div>タグは「汎用ブロックレベルタグ」と呼ばれ、「他のブロックレベルタグ」夫々が持つ文書形態上の特定の表現を司る任務はありません。
  5. 「汎用インラインレベルタグ」と呼ばれる「<span>タグ」との共用で、自在にスタイルを設定できるタグなのです。「スタイルシート」のために作られたタグなのでしょう。
  6. 以下<p>タグに切り替えますが、どうして切り替える必要があるかというと「領域枠」を<div>タグのみに設定したい場合にタグの変更がどうしても必要になるからです。
  7. <p>タグを主文にして目立たせたい場合には<p>タグに領域枠を設定し、<div>タグを普通の段落タグとして使用しても一向差し支えありません。それでは<p>タグに切り替えます。 その前に、小見出しタグです。
(2)<p>タグについて

<p>段落タグ内の文章記述です。文字列と文字列と文字列で成り立ち段落を形成します。
前段で「領域枠」について触れましたので追記します。
全てのタグをいってよいのかどうか分りませんが、タグには「領域枠」というものが与えられています。
枠の大きさは横幅と高さの寸法を与えれば自在に設定でき、枠の形状も属性で数種決められています。 枠幅も寸法を与えれば自在、枠内の色(背景色)もカラー指定と、いずれも「属性」とその「値」を「スタイルシート記述」で与えれば設定できる仕組みになっています。

第2段<p>タグ内の文章記述です。
どうして同じ<p>タグ内なのに一旦段落を閉じ、また開始するのでしょうか? たしかに、<br>タグを2回続ければ視覚的には全く同じになるのです。しかし、ここから先が新しい段落です、という表現が<p>タグ本来の使命であり、またスマートな使用法であります。W3Cが提唱する「タグに意味を持たせる」論理構造にかなった使用法です。

ここで<br>タグ2つ続けて空行を付け一息ついた感じをだしました。<br>タグも使い方次第で編集にも使えます。こういった場合は上の「<br>タグを2回続ければ」のテーマの継続ですので<br><br>の使用も差し支えないと思います。
なお、改行する目的のみで、中味のない<p></p>を使用するのも良くないとされています。


2 <ol>と<li>タグの使用

  1. <ol>と<li>タグは必ずセットで使用します。
  2. ol部分にスタイルを設定します。
  3. また、li部分にもスタイルが設定出来ます。
  4. <ol>タグは「ブロックレベルタグ」と呼ばれています。
    「ブロックレベルタグ」は名前どうり1つのブロックを形成します。
    この<li>タグ群がそれに当たります・
  5. <li>タグは「インラインレベルタグ」と呼ばれています。
  6. 「インラインレベルタグ」とは1行の範囲内と解釈してください。 都合によって1〜2に跨ることがあっても極く小範囲のことを言っています。
  7. <ol>タグは「箇条書き番号有り」タグです。
    デフォルト(初期設定)では算用数字が付けられます。
  8. 設定を替えるには「スタイルシート」を使用することになります。
  9. 全ページの跨り随時<br>タグを使用してあります。
    また、<br>タグを殆ど使わないで済ます方法も有りますが

3 <ul>と<li>タグの使用


4 <dl><dt><dd>&<cite>タグの使用

<dl>タグとは
<dl>タグは「定義型リスト」と呼ばれています。
<dt>タグに定義される言葉、<dd>タグにはその言葉の意味を並べていきます。
<dt>タグの文字列に比べ<dd>タグ文字列が「字下げ」で表示されることに注目してください。
丁度、辞書を想像していただければ宜しいかと思います。
htmlとは
Hyper Text Markup Languageの略語で一種の言語です。
タグとは
文書の要素を区切る記号。「<」と「>」の間に要素名と属性の指定を書く。開始タグと終了タグで文書要素を挟む。(技術評論社刊 ホームページの上手な作り方教えますより。)

5 <blockquote>タグの使用

<blockquote>は他の文献を引用する時に使用します。長文の引用には<blockquote>を使用し、短文の引用には<cite>タグ(インラインレベルタグーこの上の斜体がそれです。)を使用する決まりになっています。
どこに特徴があるかというと、上下に空行が取られまた、自動的に左右にマージンが取られるためやや幅狭い一群が形成され、一見して引用文であることが分るようになっているのです。
字下げにも見えますが、上の<dd>タグの字下げでは右側にマージンが無いことに注目ください。

下記は矢野啓介氏の「HTMLにおける段落をめぐって」の一節です。
(<p>タグの意義、使用法、字下げ論、<br>について論じています。


英語の "paragraph" に対応する日本語は「段落」である、ということにすると何かと都合が良い。ただし、「段落」は "paragraph" の訳語としては必ずしも適当とは言えず、敢えて「段落」と言わずに「パラグラフ」という言い方がなされることもある。しかしながら、paragraphの意味で「段落」という言葉を用いるのは一般の国語辞典にも見ることができ、ほかに適当な言葉が見当たらないことから、ここでは「段落」を採用する。

段落 (= paragraph) は、一つ以上の文の集まりであり、一つのまとまった内容を表す単位である。現在のまともな文章作法の本ではそのように説明されているはずである。

段落の視覚的な表現方法は様々である。日本語の文書では最初の行を1文字下げることで表すことが多い。欧文でもやはり先頭の行の字下げで表現することが多いが、字下げの量が1文字分とは限らない。改行しても全く字下げしないこともある (この体裁は、日本の雑誌でも、比較的短めのリード文などに用いられることがしばしばある)。字下げが無い代わりに、段落間に間隔を空けることで段落を見やすくすることもある。また、節の最初の段落についてのみ字下げを行わないというやり方もある。

ウェブブラウザでは、段落間に1行程度の間隔を空け、字下げを行わない表示が多い。これはコンピュータのplain textでよくある書き方であり、文字端末では読みやすい。また、ウェブの一大ブームの発端となったNCSA Mosaicもこの流儀で段落を表示した。以来ウェブブラウザは、固執しているとも見えるほどにこの形式を踏襲している。

しかしこれはHTMLのP要素が「1行空き」するものであることを意味するものでは、もとよりない。 HTML 4.0の仕様書では、段落の整形はブラウザやスタイルシートによって変わることを、わざわざ独立した節を設けて解説している (仕様書9.3.5)。

「日本語文の段落はBR」は本当か 日本語の文章における段落はP要素でなくBR要素 (line break) で表される、という主張が時折見受けられる。だが、その場合の「段落」とは一体何なのだろうか? その「段落」で改行しなければならないとして、改行という視覚的効果に訴える理由は何だろうか。

BR要素で表されるというその「段落」がparagraphのことでないと仮定してみよう。何にせよその「段落」は文の集まりを二つに分けるわけである。分けられたそれぞれはやはり文の集まりである。なぜ分けるかというと、文章を構成する上での必然性からそうするのが自然である (意味も無く「ちょっと長くなったから、なんとなく」分けられたのでは、読み手はたまったものではない)。するとここで、BR要素をはさんだ両側に、意味的にまとまりのあるいくつかの文の集まり――すなわちparagraphが現れることになる。結果的に、BRで分けたりするよりは、分けられるそれぞれをP要素で表すのが適切であるということになる。

また、文書をデータとして見ると、BR要素のような「区切り」を使って文章のかたまりをいくつかの部分に分けるよりは、分けられるそれぞれを一つの単位 (要素) として扱えた方が便利である。例えば、スタイルシートで表示方法を決めるときには、段落が空要素で区切られているだけだと、柔軟な表現はほとんど望めない。そうでなく、段落自体が一つの要素として表されていれば、先頭の行の字下げ、上下の余白、背景色、等々を自由に設定することができる。

以上簡単に見たように、段落をBR要素で表すのは不適当である。段落はP要素で表す。


第2節 インラインレベルタグを使用する

第2章 ・・・

第1節 ・・・

以上、htmlタグ110個有余の内から17個のタグを使いました。
第2節や第2章と第1節の内容記述は、殆ど上記の形式の踏襲ですみますので省略しました。

タグには夫々の役割が有って、文書を構成する要素の一端を担っています。適材適所にタグを使い分けスマートな文書を作りましょう。(という私も今、どうしたら上手く表現できるか、懸命に模索中なのです。)

最下段には<address>タグを使用しました。ここに「ページ作成日、更新日、作成者名」や「メール宛先」を載せるのが一般的な使用法ですが、(トップページをご覧ください。)ここではページのナビゲーターにしています。
 <address>タグの特徴は自動的に「斜体」表示されることです。


 <address>タグの使用

トップへ戻る  総目次へ戻る  HTML記述の実習へ戻る  スタイルシートの実装へ進む

なにしろ、html4.01/strict仕様に基づく記述なので、、正確を期するため「「Another HTML-lintゲートウエイサービス」 による「htmlのチエック」を受ながらページを公開しております。今回の結果です。
また、課題外ですが属性デフォルトのページが「どのように見えるか」を「印刷プレビュー」で見ました。
約3/4ほどですが、下はその画像です。 プレビュー画像です。

さて、次ページからはいよいよ各種タグに「スタイルシート」を適用して、装飾を施します。


トップへ戻る     スタイルシート目次へ戻る
スタイルシートの実装へ進む

inserted by FC2 system