よいHTML

よいHTMLとは、ユーザーが使いやすいように書かれたHTMLです。

ここでいう「ユーザー」は、NNやIEなどのグラフィカル・ブラウザを使っている人だけを指しているのではありません。WWWのユーザーには、文字だけを表示する環境の人もいれば、目が不自由で音声合成で文字を「聞いて」いる人もいます。さらに、日夜世界中のページを収集している「検索ロボット」もWWWのユーザーです。HTMLは、これらの様々なユーザーがそれぞれきちんと情報を得られるように設計されています。「よいHTML」とは、その仕組みをきちんと理解し、特定のユーザ向けではなく誰もがハッピーになれるように書かれたHTMLのことなのです。

HTMLの要素タイプを正しく使う

HTMLの「要素」とは、文書の中でその部分がどんな役割を果たすかを示すものです。title要素、h1要素、strong要素などは、それぞれ適切に設定されると、検索ロボットはタイトルや見出しだけをピックアップして様々な文書の目次集を自動生成することができますし、音声合成ソフトは、strongとなっている部分を抑揚を変えて読み上げることができます。これらの要素が正しく使われずFONTで見かけ上の表現を与えるだけになっていると、検索ロボットや音声合成ソフトがきちんと機能しないことは容易に想像できるでしょう。

適切なタイトル

title要素で適切なタイトルを付けるということは、利用者だけでなく作者にとっても重要です。これは書物で言えば背表紙のようなもので、たくさん並んだ本（HTML文書）から必要なものを見つけだせるような書き方が必要です。単なる「Introduction」ではなく、「An Introduction to Perfect HTML」という形で、説明的なタイトルにしておくべきです。

ブラウザのヒストリ（閲覧履歴）やブックマークに登録されるのは、通常title要素の内容です。せっかくブックマークに登録したのに、単にChapter 1となっていては、どんなテキストの第１章だったのか分かりません。ヒストリやブックマークだけではなく、検索エンジンのページにリンクとして表示されるのも基本的にはこのタイトルです。ホームページのタイトルが単なるWelcome!では、検索にヒットしても訪問してもらえないでしょう。

タイトルは具体的に、そのサイトを離れても何を意味するか分かるようにつけてください。

閲覧手段に関わらず、きちんと情報が伝わるように書く

HTMLはグラフィカル・ブラウザで閲覧されるだけではなく、文字ブラウザで読まれたり、音声合成で「聞かれ」たり、印刷して配布されることもあります。IEで見れば分かるけれども他の手段では意味が通じない、というようなHTMLでは困ってしまいます。特に注意したいのが、画像に対するaltテキストと、リンクのアンカーになるテキストです。

画像にはaltテキストを加える

img要素には、かならずalt属性で代替テキストを用意しなければなりません。これは、そこで「どんな画像が提供されているか」を示すのではなく、その部分を読み上げたり文字ブラウザで見たときに意味が通じるように書くことが大切です。

たとえば会社のロゴマークを画像で示す場合、alt="logo"では、そこにロゴの画像があるということしかわかりません。他の手段でも意味が通じるようにするには、alt="KANZAKI INC."とするほうが適切です。画像を表示できないユーザーに「画像です」という情報を提供することは、単なるナンセンスなのです。詳しくはimgタグにおけるaltの使い方についてページの説明を参照してください。

リンクのアンカーを意味のある文にする

よくある悪い例：

（例）もっと詳しい情報はこちら

このフレーズを、印刷したり、テキストとして保存したり、音声合成で読み上げる場合にどうなるかを想像してみましょう。「こちら」はハイパーリンクが働く環境でのみ意味があるということが分かります。リンクのアンカーとなるテキストは、そのまま読んでも意味が通るように工夫しなければなりません。

適切な例：

（例）詳しい情報はリンクのアンカーを意味のある文にするの項を参照

アクセシビリティの高いページづくり

障碍のある方や高齢の方にもきちんと情報が伝わるような書き方を、アクセシビリティが高いといいます。上記の画像にaltテキストを加えるのも、同様の観点で重要です。むやみに小さな文字を使ったり、読みにくい背景色を使ったりしないという配慮も必要でしょう。この点については、ハンディがあっても利用できるHTMLを参照してください。

Web文書は書物などに比べて全体を概観しにくいという弱点があります。

本や雑誌はページをぱらぱら繰ってみることで容易に全体を把握し、自分にとって必要な部分を見つけ出すことができます。今、全体のどのあたりを読んでいるかということも一目瞭然です。これに対しWebに代表されるコンピュータ情報は、二次元の画面に情報を表示しているため、全体と部分の関係を直感的につかみにくいのです。

これを補うために、Webデザインでは「ナビゲーション」の提供が大切になります。現在のページは全体の中のどこに位置するのか、スタート地点に戻るにはどうすればよいのか、次はどこに向かうのかといった情報を、一貫した手段で提供してください。たとえばページの先頭もしくは最後には、常にこうした情報を示す「ナビゲーションバー」を用意するなどです。

ブラウザも、標準で「戻る」などのボタンを用意したり、アンカー上をマウスが通過するとそのリンク先のURI（URL）を情報欄に表示するなどの、基本的なナビゲーション機能を提供しています。この機能に反するような仕掛けを施してはいけません。「戻る」ボタンを隠すなどもってのほかです。リンク先を表示する機能が働かなくなるという点で、JavaScriptの入門用練習課題となっている「ステータスバーを流れるメッセージ」も利用者にとって迷惑なテクニックです。

利用者が迷子にならないように、常に適切な手段を提供してください。

文書や作者に関する情報を示す

“名無しの権兵衛ページ”というのは、思いのほかたくさんあります。《このページには順を追ってたどり着くはずだから、最初のファイルに名前を書いておけば十分》というふうに考えることが多いのだと思います。あるいは前のページにはBackボタンで戻ればよいのだと。

忘れてはいませんか？　Webの文書は、どんな順序で読まれるか、どこから突然リンクを張られるか、予測がつきません。作者のまったく意図しない文脈で参照されている可能性もあります。だから、基本的には全ての文書に、何らかの形で作者をたどれる情報を加えておくことが大切です。

原則としては、全ファイルにaddress要素として連絡先やメールアドレスを加えておくということになります。あるいは、そこにトップページへのリンクを加えておくのでもよいでしょう。もちろんトップページにはメールアドレスなどの連絡方法を書き込んであることが前提です。

ほかに作者や文書の情報を提供する手段としては、head要素の中に

（例）<link rev="made" href="mailto:webmaster@kanzaki.com" />

のようにlink要素を埋め込む方法があります。

HTMLの書き方の話ではありませんが、訪問して嬉しいページとして。

インターネットは分業の世界です。自分の詳しいこと、興味のあることについてそれぞれが情報を提供する。そして自分よりもっと詳しい情報源や関連するサイトがあれば、そこへのリンクを用意する。こうすれば、更に深く広い知識を提供することができます。ですから、リンクはとても重要です。

リンクなら何でも？　そう、面白リンクもYahoo!へのリンクも、それはそれで結構です。が、書籍の参考文献リストと同じで、更に詳しく知りたいときやこのページを起点にして領域を広げていくための出発点なのですから、できれば「あなたが有益と考える」リンクを用意しましょう。本文には特に何も記述されていなくても、自分の専門分野に関する詳細なリンクリストを提供するだけで、とても貴重なページとして多くの人から感謝されることは間違いありません。