HTMLファイルを作成する上で、どのような記述を行うかというのはHTMLの作成法をどのように学んだかに大きく依存すると思われます。
HTML文書はその他のプログラム言語と違い、おかしな記述や間違った文法が存在しても表示できる場合が多いこともこのことに拍車をかけているといえるでしょう。
また、仕様書を読めばどのような記述が最適なのかはある程度把握できますが、間違った用法などを勧めているサイトなどの存在が原因で「正しくない記述」であることを知らない場合もあるかもしれません。
仕様書どおりに記述しなくても表示できるのはユーザーエージェント（インターネットエクスプローラや、ネットスケープナビゲータなどのブラウザのこと）が、親切でそうやってくれているだけです。
しかし、記述ミスを好意的に解釈してくれるユーザーエージェントばかりだとは限りません。
HTMLの記述法を紹介しているサイトは数多いですが、間違った記述や間違った説明をしているサイトも少なくないようです。
難しい決まりごとを知らなくても簡単に作成できる所為か、ゲームのtipsのように、「×ボタンを長く押せばジャンプの距離が伸びるよ」「わー、ホントだー」みたいなノリで、「このタグを使えばこんな風に表示できるよ」「わー、ホントだー」とやってしまうのもわからなくはありません。
そもそも仕様書自体が存在していることを知らない人もいるのではないでしょうか？
この項では特に記述がなければHTML4.01に準拠して説明していきます。
簡略目次
詳細目次
ユーザーエージェントの多くはマークアップされた文字列を斜体や太字などの何らかの形で強調するように設定されています。しかし、見栄えは「たまたまそのユーザーエージェントがそのようなレンダリングをしている」だけであり、今後ともそうであると言う保障はないのです。
blockquote要素は、多くのユーザーエージェントではインデント（左右にスペースが空く）してレンダリングされるでしょう。しかしblockquote要素はその文章が「引用」であることを表す要素で、結果的にインデントされるだけであって、見栄えを定義する要素ではありません。
段落の見栄え整形のためにインデントを用いたい場合は、スタイルシートを使い、左右にマージンを設定することをお勧めします。
P {margin-left : 3%;margin-right : 3%;}
この例ではp要素の左右に（ブラウザの横幅に対して）3%のインデントが与えられます。
とくにありませんが、スタイルシートの使い方がわからないから、などで簡単に扱えるインデントであることは確かです。
必ずしもインデントされるわけではないことと、ユーザースタイルシートなどによってレンダリングが大きく異なる場合が存在することです。
前者の場合は見栄えが若干異なるだけかも知れませんが、後者の場合、ユーザーが指定した「引用のレンダリング」であるために、引用であると認識される事によりどこからどこまでがあなたの文章で、どれが他人の文章なのかの判別が難しくなることが考えられます。
インデントを用いたい場合は、誤認を避けるためスタイルシートを推奨します。
しかしながら、単なる字下げテキストの機構としてBLOCKQUOTEを用いてきた著者もいるため、そのような著者の意図を守るため、ユーザエージェントは、デフォルトのスタイルとしては引用符を挿入しない必要がある。
HTML 4.01仕様書 9.2.2 引用: BLOCKQUOTE要素とQ要素
とあるように、見栄えのためにblockquote要素を用いる意図を仕様書は容認黙認している部分はあります。
文章やイラストなどの配置はブラウザの横幅の都合などで難しかったりします。
table要素を用いたいわゆるテーブルレイアウトや、スタイルシートのfloatプロパティを用いて回り込ませたり、positionプロパティを用いて配置したりするレイアウト方法などがあります。
テーブルレイアウトの場合、ほとんどのユーザーエージェントが同じようなレンダリングを提供しているため制作者の意図に近い表現をする事が可能です。
table要素は表をマークアップするための要素であるため、音声ブラウザなどでは思ったとおりの順番に解釈してくれない場合があります。
また、ソースが増えるためにファイルサイズが肥大化します。
見た目の順番と記述内容の順番が異なる場合が多いため、管理者がソースの編集が困難になるかもしれません。
テーブルのサイズが決定されるまで、レンダリングが開始されないので中身の表示が全て終わるまで閲覧できないといった不便さもあります。
古いユーザーエージェント等では、table要素の入れ子などが原因でハングアップすることもあるようです。
見栄えとHTMLを分離することによってソースの量が減り、ファイルサイズが軽減されます。
また、余分な記述がないため、ソースそのものの可読性も高まります。
閲覧者の好みによりスタイルシートを切ったり、別のスタイルシートに差し替えることも可能です。
ユーザーエージェントによってはスタイルシートの解釈が異なるため、ずれたり重なったり崩れる場合があります。
ヘッドスタイル情報のmedia属性を「screen,tv」とすることでスタイルシートを読ませるユーザーエージェントを限定するという方法があります。
<link href="../main.css" rel="stylesheet" type="text/css" media="screen,tv">
ただし、その場合は、ネットスケープ4.xなどでの表示がレイアウトされていないもの（恐らく縦にずらりと並ぶ形）になります。が、ネットスケープ4.xなどの利用者は（全てがそうであるとはいえませんが）見た目よりも軽さを重視していると思われますので問題ないでしょう。
制作者が見て欲しい配置が必ずしも閲覧者にとって有意義なものであるとは限りません。
可読性を優先するならば配置に対するこだわりもそこそこに、環境に依存しない見やすいリソースを提供することを思慮した方が有益だと思います。
HTMLドキュメントとCSSの関係を考えてみると、HTMLドキュメントで文書を作成し、CSSで見易くする、という概念が理解できるでしょう。そこから考えるとレイアウトありきの文書作りが不自然であることに気付くと思います。レイアウトとは文書のために存在しているのです。
正しい記述とは少し関係ないですが、正しい記述を心掛けていてもおかしな表示になる場合があります。いろんなユーザーエージェントで確認することを推奨します。
例：テーブルに背景色とテキストカラーの適応
HTML記述
<table summary="カラー適応のサンプル用の表"> <caption>カラー適応のサンプル</caption> <tbody> <tr> <th>サンプル用文字列</th> <th>サンプル用文字列</th> </tr> <tr> <td>サンプル用文字列</td> <td>サンプル用文字列</td> </tr> </tbody> </table>
CSS
BODY {
color : yellow;
background-color : blue;
}
TABLE {
color : lime;
background-color : navy;
}
IE6のカラー適応のサンプルのスクリーンショット
背景色は、TABLEにのみ適応されています。
テキストのカラーは、TH、TD、CAPTIONに適応されています。
NN4.6のカラー適応のサンプルのスクリーンショット
背景色は、TH、TDに適応されています。
テキストのカラーは、TH、TD、CAPTIONに継承されていません。
このように、違う表示の仕方をする場合があるわけです。
例えば、以下の様にTH、TD、CAPTION自体に配色を指定した場合は、IEに近い表示が出来ると同時に、見易さが高まっていると思われます。
CSS
BODY {
color : yellow;
background-color : blue;
}
TABLE, TH, TD {
color : lime;
background-color : navy;
}
CAPTION {
color : lime;
background : transparent;
}
近い見栄えに拘る必要性はさほどないと思われますが、見易さが損なわれている場合などには注意が必要です。
HTMLを「プログラム」と言ってみたり、スタイルシートのタグと言ってみたりしてしまうと言いたいことが正確に伝わらなかったりすることがあります。
HTMLはハイパーテキストマークアップランゲージのことですからマークアップ言語ということになります。プログラム言語ではありません。
この間違いはそれほど致命的なことではありませんが、嘲笑されることもありますので「HTML」と呼んでおくと無難だと思われます。
要素とは構造を表す要素型です。
<a href="http://www.rju666.com/web/index.html">サイト作成における問題</a>におけるa
よく「強調するタグを教えてください」などという質問の仕方をする方がおられますが、強調するのはem要素ですし、更に強調する場合はstrong要素です。また、「リンクの下線を消すタグ」と仰られる方もいますが、下線を消すのはスタイルシートのtext-decorationプロパティです。
「〜する方法を教えてください」と尋ねると無難だと思われます。
内容のないものは空要素と言います。空要素には終了タグがありません。
body要素内に記述することが可能な要素です。ブロックレベル要素は新しい行を開始します。
どこにどの要素が配置できるのかをあまり意識していない人が多いようです。ブロックレベル要素は直前のブロックレベル要素を閉じ、新しいブロックレベル要素を作ります。従って以下のような記述はできません。
<p>今日こそは、 <pre>うどんの食べ方</pre> をレクチャーしたいんです。</p>
一行目のp要素は開始preタグで閉じられていますが、終了preタグ以降に最後の終了pタグに対する開始pタグが存在しません。三行目の先頭に開始pタグを記述する必要があります。
<p>今日こそは、</p> <pre>うどんの食べ方</pre> <p>をレクチャーしたいんです。</p>
ブロックレベル要素をインライン要素の中に記述することはできません。従って以下のような記述はできません。
<strong><h1>二つ目のあれについて</h1></strong>
インライン要素でマークアップしないで下さい。
<h1>二つ目のあれについて</h1>
blockquote要素は特殊な例で、body要素と同様にブロックレベル要素を内容とします。ゆえに以下のような記述は誤りです。
<blockquote>鮭弁当が好きだった。</blockquote>
<blockquote><p>鮭弁当が好きだった。</p></blockquote>
ブロックレベル要素内に記述することが可能な要素です。インライン要素は同じ行に存在します。
インライン要素の中にブロックレベル要素を記述することはできません。従って以下のような記述はできません。
お前は<em><p>虎のアンドリュー</p></em>と呼ばれ恐れられていた。
お前は<em>虎のアンドリュー</em>と呼ばれ恐れられていた。
また、body要素直下に記述することはできません。
<p>今日は、雨が降っている。</p> <q>もうすぐやむよ</q> <p>と君は微笑んだ。</p>
<p>今日は、雨が降っている。</p> <p><q>もうすぐやむよ</q></p> <p>と君は微笑んだ。</p>
<p>今日は、雨が降っている。<q>もうすぐやむよ</q>と君は微笑んだ。</p>
フロウは特殊で、ブロックレベル要素でもインライン要素でも内容とすることができます。ins要素、del要素、div要素がそれに該当します。従って以下のような記述ができます。
<div><p>餞別をあげることにした。</p></div> <ins><p>何にしようか検討中。<del>餅がいいかも。</del></p></ins>
div要素はブロックレベル要素ですが、ブロックレベル要素を内容とすることができます。
例文では二行目に新しい段落をins要素で追加し、その段落の内容の一部をdel要素で削除しています。
ins|delの内容は、ins|delの親要素の内容を継承します。
従って以下のような記述はできません。
<p>思いついた。<del><p>おやつにこだわるのはもうやめる</p></del>それでいこう。</p>
最初のp要素は開始pタグで閉じられていますが、終了pタグ以降に最後の終了pタグに対する開始pタグが存在しません。終了delタグの後ろに開始pタグを記述する必要があります。
<p><del>機能</del><ins>昨日</ins>は<em>凄い<del>飴</del><ins>雨</ins></em>だった。</p>
つまり、ins|delを排除した状態でも正しい構文になるようにすればいいわけです。
要素の関連特性です。属性は半角スペースで羅列することができます。
<a href="http://www.rju666.com/web/index.html">サイト作成における問題</a>におけるhref
要素の開始を表す開始タグと要素の終わりを表す終了タグが存在します。<と>で括って記述します。要素のことをタグと呼ばれる方も多いようですが、混乱の原因になり易いので無闇になんでもタグと呼ぶのは避けた方がよいでしょう。
<a href="http://www.rju666.com/web/index.html">サイト作成における問題</a>における<a href="http://www.rju666.com/web/index.html">が開始タグであり、</a>が終了タグ。
タグ（開始タグと終了タグ）の間にあるものを指します。
<a href="http://www.rju666.com/web/index.html">サイト作成における問題</a>におけるサイト作成における問題
スタイルシートで、セレクタに対し適応できる事項のことです。プロパティなどもひっくるめてタグと呼ぶ方もおられますが、区別したほうが混乱が最小に済むと思われます。
HTML 4.01 仕様書邦訳概説 7.5.5 見出し: H1、H2、H3、H4、H5、H6要素
よく見かける間違いです。文字を大きくする要素はfont要素のsize属性ですが、font要素自体は非推奨ですのでスタイルシートを用いることをお奨めします。
h1〜6要素の数値は小さいほど大きく表示するレンダリングを提供するユーザーエージェントが多いことは確かですが、強調したいものを大きくするのではなく、見出しの位置関係を表す事が好ましいです。つまり、h1要素の中にh2要素の項目が存在しているのであり、h2要素の中にh3要素の項目が存在しているような形になるべきだということで、具体的には、
<h1>うどん</h1> <h2>麺について</h2> <h3>麺の種類</h3> <h3>作り方のコツ</h3> <h2>ダシについて</h2> <h3>ダシの傾向</h3> <h3>ダシの材料</h3> <h3>ダシの思い出</h3>
のようになります（便宜上、本文は省略しました）。麺について書かれている項目は全て「麺について（h2要素）」の中にありますし、ダシについて書かれている項目は全て「ダシについて（h2要素）」の中にあります。「麺について（h2要素）」「ダシについて（h2要素）」を総括する見出しが「うどん（h1要素）」であるわけです。
見出しレベルを飛ばすのは悪い慣習だと考える人もいる。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.5
とあるように、見出しレベルを飛ばすことは一概に悪いとは言い切れないようですが、ソースの可読性を考慮するならば見出しレベルを飛ばさないほうがよいでしょう。
HTML 4.01 仕様書邦訳概説 9.2.2 引用: BLOCKQUOTE要素とQ要素
blockquote要素は、文字通り引用を表すブロックレベル要素です。
見易さを提供するために、インデントを設けることは正しいですが、引用文でない文章にblockquote要素を使用することは間違っています。
詳しくは、インデントを参照してください。
簡単なソースをコピー＆ペーストするだけでサイトがオシャレになったような気がしたり、高度なテクニックを使っているような錯覚を起こすことが多いようですが、様々な理由から嫌がられている小手先技があります。
「自分はウザいと思ったことないよ」という方もいるかと思いますが、自分のサイトは見慣れているのでそう感じないだけかも知れません。また、他の人のサイトの場合でも「凄い！」という視点で見ているからウザくないだけで、見やすいかどうかを考えずに見ているからかも知れません。
統計をとったわけではないですが、このような意見がある、こう思う人がいる、ということを知っていただければ幸いです。
嫌われがちな要素について説明します。
HTML 4.01 仕様書邦訳概説 16.5 行内フレーム: IFRAME要素
iframe要素は、マウスホイールでスクロールしているときにウインドウ全体のスクロールをiframe要素内のウインドウで止めてしまうバンカーになってしまうことがありえます。
思うようなウインドウのスクロールができないために苛立たせることがあるようです。
嫌われがちな属性について説明します。
新しいウインドウで開くことは、ユーザ側で選択できますが、同じウインドウで開くという選択肢を奪ってしまいます。新しいウインドウで開きたい場合は閲覧者が自らそうしますので、余計なお世話だと思われることが多いようです。
「『他の人のサイトは新しいウインドウで開くべき』と誰かに聞いた」という話も聞きますが、それは恐らく教えてくれた人がフレームの問題と誤解しています。
「他の人のサイトをフレーム内に表示してはいけないから」という場合は、「target="_top"」で事足ります。
「自分のサイトに少しでも長くいてほしいから」という人もいますが、そのようなことをしなくても閲覧者が気に入れば何度も見に来てくれます。また逆に「新しいウインドウで開く」からもう来ない人もいるかも知れませんのでなお注意すべきかと思われます。
ニュースサイトなど「元の記事と合わせて見る事が前提なサイト」では「別のウインドウを立ち上げた方が便利」という主張もよく見かけますが、便利かどうかは閲覧者が判断すべき事柄であるといえます。
また、target属性はHTML 4.01 Transitional、HTML 4.01 Framesetのみで使用可能な属性であるため、当サイトで解説しているHTML
4.01 strictや、HTML 4.01 Transitionalでは用いることはできません。
閲覧者側でこの問題を回避するには、インターネットエクスプローラのみですが、ユーザースタイルシートにa { behavior1: expression( this.target =
'_self' ); }と記述することで同じウインドウで開くようにすることが可能です。
嫌われがちなプロパティについて説明します。
カーソルを変更するプロパティです。普段見慣れているカーソルは直感的に「これはリンクである」などと認識することに役立っています。それが違ったものとなると「どこがクリックできるのかわかり難い」と思わせる要因になりえます。
また、視認性の低下によりカーソルを見失うこともあるようです。
「イラストサイトなのでカーソルがイラストの邪魔になってほしくない」という人もいるようですが、イラストサイトの閲覧者は、邪魔だと思えばカーソルをブラウザ外に置くでしょうし、また、imgセレクタのみにカーソル変更を用いるという手段もあります。
helpやfaqなどへのリンクに対し、cursorプロパティをhelpとすることには不便だと感じる人は少ないようです。
フォントサイズ変更自体が好ましくない、ということもあります。
「標準のフォントサイズでは大きい」と思う人もいるようですが、それぞれ閲覧者は「自分にとっての見易いサイズ」を標準に設定しているので余計なお世話だと思うむきがあるようです。
「デザインが崩れるから」という人もいますが、可読性を損なって見栄えを優先させるのは本末転倒だと思われます。いくら綺麗なサイトであっても、読むのに疲れるようでは「また見たい」という気持ちもそがれてしまうようです。
問題なのは、mm（ミリメートル）、cm（センチメートル）、in（インチ）、pt（ポイント）、pc（パイカ）などの絶対単位はサイズを変更することができないユーザーエージェントもあるということです。
em（大文字「M」のサイズ）、ex（小文字「x」のサイズ）、%（パーセント）などの相対単位で指定すると無難です。
px（ピクセル）は相対単位ですが、モニター画面上の１ピクセルですので固定されてしまいます。
独自拡張とは、ユーザーエージェント特有の要素などです。
blink要素、marquee要素はそれぞれネットスケープナビゲータ、インターネットエクスプローラの独自拡張の要素です。レンダリングはそれぞれ文字を点滅させる、文字を移動させるです。
可読性を損なう上に、ちらついて他の文章を読むときに気が散るなどの理由により嫌がられることが多いようです。
インターネットエクスプローラの独自拡張のプロパティです。スクロールバーの色合いを変更することが可能です。
スクロールバーで文書全体の長さや、未読の長さなどを見る人もいますし、スクロールバーを使って上下させる人もいます（全てのマウスにマウスホイールがついているわけではありません）。スクロールバーの配色が見辛いということに不便を感じる人も多いようです。
普段使っているユーザーエージェントの外観というものは、見慣れているために安心する、という部分があるようで、インターフェイスが変わると落ち着かない、というのも嫌がられている原因です。
「音声が急になる」「止められない」はそれぞれ嫌がられることが多いようです。
まず、驚くという理由があります。急に鳴り出すのでびっくりするのは当然かも知れません。人前などで「恥ずかしい」というケースもあるようです。
どうしても音楽を付けたい場合は、再生と停止の権限を閲覧者に与えるとそれほど不快感を与えないと思われます。
セキュリティの関係上Javascript自体を切っている人もいます。Javascriptを切っている状態でも閲覧できるようにしておくとよいと思われます。
いちいち一つのサイトを閲覧するためだけに設定を変更するのは面倒だと思う人も多いようです。
「ステータスバーにメッセージを流す」「リンク先の説明を表示する」などはブラウザのHTML表示部分以外に何かできるということで凄いことをやっているような錯覚を起こすようです。
ですが、ステータスバーに表示される情報により項目の残りを見たり、リンク先のURLを確認したりできないので嫌がられます。
2003.5.21