|
| HTMLリファレンス_________ |
|
|
|
|
 |
| ナンセンスなタグの使い方 |
こんなHTMLタグの使い方していませんか？ナンセンスなタグの使い方として例を挙げてみましょう。
1．HTMLのDOCTYPEの意味もわからないまま、適当に先頭行に
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
などと入れておいた。（または、勝手に入るソフトを使っている）
それはそれでいいんでしょうけど、先頭行でHTML4.01と宣言しておいて、実際に使ってるタグはまるで3.0などといったことはよくあることです。優秀なブラウザはこのDOCTYPEが無いとき、自分の都合の良いように勝手に解釈してそれなりに表現してくれます。それなのにわざわざ意味もわからず宣言するとブラウザが迷うことになりかねません（実際に迷うかどうかはわかりませんが・・・）。意味がわからないなら、むしろ入れないほうがマシです。参考までに上記のDOCTYPEの意味は、「この文書型名（ルート要素）はHTMLであり、ワールドワイドウェブ・コンソーシアムによって「HTML 4.01 Transitional」として公開された仕様書にある要素を用い、その公開仕様は英語で記述してある」という意味になります。つまり、これを宣言したら、W3Cにある「HTML 4.01 Transitional」仕様書の範囲内でタグを使っている限り表現上の問題は発生しないということです。
2．<head>〜</head>間に文字コードの指定がされていない。
HTML文には必ず文字コードの指定をしましょう。これが無いとIEなどのブラウザでは文字コードのエンコーディング指定を日本語(自動判別)にしてあると、Shift JISとEUCの誤認識をする（文字化け）こともまれにあるようです。プラットホームに合わせて以下のどれかを入れておけばよいわけです。Windows環境なら特別な場合を除いて「Shift_JIS」を指定します。ここで注意が必要なのは、文字コードを間違えて指定してしまった場合は確実に文字化けしてしまうということです。たまに「x-sjis」なる文字コードを見かけますが、これは「Shift_JIS」と同義語です。ただし、理由はどうあれWindowsを使っていて日本人なら何も考えず、「Shift_JIS」と指定しましょう。
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
よく「IE5.01は文字化けして困る」という話を聞きますが、それはブラウザが悪いのではなく、文字コード指定をせずホームページを作った制作者に原因があるのです。
3．<p>タグを<br>の代わりに改行として使う。
| 改行します。<p> |
<p>は段落のためのタグであり、改行のためにあるのではありません。改行には<br>を使いましょう。
4．属性値の値を引用符（"）で囲んでいない。
| <a href=index.html target=_blank> |
正しくは
| <a href="index.html" target="_blank"> |
実際には.（ピリオド）、_（アンダーバー）、-（ハイフン）から始まる属性値の値は囲まなくても良いことにはなっていますが、安全のためすべての属性値の値を引用符で囲んでおいたほうが無難です。
5．やたらと長いJavaScriptステートメントをHTML文の中に埋め込んでいる。
|
<script type="text/javascript"> JavaScriptステートメント... // --> |
こういった場合には外部に拡張子「.js」のファイルを作成してそれをリンクするようにしましょう。
| <script type="text/javascript" src="xxx.js"></script> |
また同じように<script>タグにおいて、
|
<script type="text/javascript"> document.write ("<b>強調する</b>") </script> |
のようにスクリプト内にタグを使用する場合には
|
<script type="text/javascript"> document.write ("<b>強調する<\/b>") </script> |
6．<img>タグにはALT属性を付けること、とWAIがうるさくいうものだから苦し紛れに
<a href="index.html"><img src="topo.gif" alt="" width="50" height="15"></a> などと指定した。
alt="空文字列"では代替文字の意味がありません。何でもいいですから、等価な説明（何々の画像とか）を書いておきましょう。HTMLタグの解説ページのサンプル表記などでも、<img src="topo.gif" alt="" width="50" height="15">などといった空文字列指定を行っているケースを多く見かけるのは非常に残念です。W3CのウェブContent Accessibility Guidelines 1.0のALT指定の目的はあくまでも「それが表現されなかったときのために相当のテキストを提供しておかなければならない」です。確かに仕様書には「テキストで表示する意味の無い画像の場合はalt=""とするように」旨のことが述べられていますが、テキストで表示する意味の無いような画像なら使用しない、また、相当のテキストを提供しないのならALT指定はしない、つまりalt=""とするくらいならALT指定しないほうがマシと考えます。
・WAI（Web Accessibility Initiative）
ウェブのアクセス可能性を増加するために、技術、ガイドライン、及び、ツールに関して研究する機関。
7．<a>のアンカーとして「ここ」などと指定している。
| 詳しくは<a href="kotiranil.html">ここ</a>をクリックしてください。 |
「ここ」だけではその前後の文章を読まないことには何のことだか意味がわかりません。アンカーだけでも意味がわかるようなものにしましょう。
| 詳しくは<a href="kotiranil.html">HTML解説のページ</a>をクリックしてください。 |
8．同じタグを複数並べる。
| <font color="blue"><font size="10pt"><font face="ＭＳ ゴシック">しかじか・・・</font></font></font> |
こういうときこそ、スタイルシートを使いましょう。
9．<br>タグ、または<p> </p>タグを異様に複数並べる。
|
<br><br><br><br><br><br><br><br><br><br><br><br> <p> </p> |
行間を空けたいのは分かりますが、これもスタイルシートで賄いましょう。また、限られたスペースを有効に利用するためにもあまりにも空間の多いページもどうかと思いますが・・・。ちなみにLynxなどの一部のWWWブラウザは、連続する<br>をひとつにまとめてしまうことがあるそうです。
10．省略可能だからといって、終了タグを省略しすぎている。
ある程度HTMLを知っている人ならご存知だと思いますが、</html> </head> </body> </p> などは省略可能なタグとなっています。だからといって、
| <html> <head> <title>省略命</title> <body> <p>しかじか、かくかく・・・ |
と、</p>タグ程度ならまだしも、これではいくらなんでもひどすぎます。正しいHTMLを目指すなら、省略可能なタグでもきちんと最後まで書くようにしましょう。
11．タグや要素の大文字小文字が適当。
| <Html> <HEAD> <Title>しかじか</title> <Body BGCOLOR="white"> </body> </HTML> |
確かにタグの大文字小文字は同一視されますので、問題はないといってしまえばそれまでですが、「このページ素敵なページだな・・・、」といったときにどんなタグ書いてるんだろう、とソースを見に行かないとも限りません。最低限の統一性は持たせましょう。
12．<meta http-equiv="REFRESH">を使って、数秒後に他のリンクへ飛ばすような設定を行っている。
閲覧者の手間を省く心遣いからでしょうか、「このページは数秒後にどこそこへ飛びます」というページをよくみかけますが、別に飛んでくれなくてもいい人もいるわけです。このような利用者の意思が無視されるようなことは慎みましょう。そういった場合には、通常のリンクなどによって移動できるようにしておきましょう。
13．スタイルシートが使えない環境からだと解読不能なページ。
多彩なスタイル設定を可能にするスタイルシートですが、その互換性にはまだまだ問題点もあります。スタイルシートを全く使えない環境からでも文書として一応読み取り可能なページ作りをしましょう。例えば外部スタイルシートを利用している場合、それを読み込まない状態でテストしてから公開するといった気配りが大切です。色彩に関しての問題はあまりありませんが、画像を使い、その配置をスタイルシートで行っている場合には注意が必要です。
14．HTML文がコメントだらけ、挙句の果てには途中のコメント部分以下が真っ白だったりコメントがそのまま表示。
自分のページを後で更新する際にどの部分に何を配置したかを解りやすくする等の理由でHTML文中にコメントを記入するということはよくあることですが、以下のようにHTMLタグのサイズよりコメント文のサイズの方が大きく、その結果ページ全体のサイズが大きくなってしまっていたり、
| <html> <head> <title>コメントだらけ</title> </head> <body> <!--ここに私のページの紹介を大きな文字で記入する--> <h3>ようこそMyページ</h3> <!-ここまで--> <!--ここから私の紹介部分を記入する--> <p>私の紹介</p> <!-ここまで--> <!--ここからはリンクを記入する--> </body> </html> |
コメントの表記方法を間違えたり、コメントを閉じ忘れたりしたためにコメント部分以下が真っ白だったり、コメントがそのまま表示されていたり、
| <html> <head> <title>コメントだらけ</title> </head> <body> <!--ここに私のページの紹介を大きな文字で記入する--> <h3>ようこそMyページ</h3> <!-ここまで--> <!--ここから私の紹介部分を記入する ←ここを閉じ忘れている <p>私の紹介</p> <!-ここまで--> </body> </html> |
といったページをよく見かけます。コメントは必要最小限にするのはもちろん、正しいコメント表記方法で記入しましょう。
| CopyRight (C) 2000-2013 by T.Shiraishi All right reserved 無断転載禁止／リンクフリー |