HTMLリファレンス ~HTMLタグ辞典~

 

1. WEBの概要

1-1.WEBとは

WWW(=World Wide Web)とは、インターネット上で情報をやり取りする仕組みのことで、私たちがインターネットで見ることのできる情報はこの仕組みに基づいて閲覧できるようになっています。この情報はHTML(=Hyper Text Markup Language)と呼ばれるプログラミング(記述言語)によって作られています。文章だけでなく、画像や音声などマルチメディアを扱うことができ、他の情報を参照するためのリンク(=ハイパーリンク)が設定できる機能を持ちます。 インターネットの世界標準として1995年頃から爆発的に普及し、現在では空気のような存在になり、あたりまえのようにインターネット(WEB)へアクセスしています。

WEBサーバとクライアント
図:WEBサーバとクライアント
WWWは、データがクモの巣のようにリンクしていることから「世界中に広がったクモの巣」を言い表します。※WWWとWEBは同義語として使用されています。

 

1-2.URL

URL(=Uniform Resource Locator)とは、インターネット上に存在する情報資源(文書や画像など)の場所を指し示す記述形式のことを言います。インターネットにおける情報の「住所」にあたり、情報の種類やサーバ名・フォルダ名・ファイル名などで構成されます。WEBサーバやブラウザはURLによって情報がどこにあるのかを知ることができます。 以下のように、URLプロトコル・ドメイン名(パス名)によって指定されます。

 

 

プロトコル
プロトコルとは、ネットワーク上でコンピュータ同士が通信を行うために決められた『約束ごと』のことです。WEBでは、HTTPというプロトコルにしたがってWEBサーバとクライアント(WEBブラウザなど)の間でデータがやり取りされます。プロトコルにはHTTPの他にもファイル転送するときに用いるFTP、ネットワークにつながれたコンピュータを遠隔操作するときに用いるTELNETなどがあります。

 

ドメイン名
ドメイン名は住所のように階層構造になっており、
“ . ”(←ドット)で区切られています。

 

 

トップレベルドメイン   
国別コード        jp(日本)、uk(イギリス)、ca(カナダ)   
一般コード        com(企業)、org(非営利団体)

 

セカンドレベルドメイン(組織の属性コード)
ac(=academy) 研究機関、大学、その他教育機関
co(=company) 一般企業
go(= government) 政府関係
ne(=net) ネットワーク管理組織
or(=orgarization) その他の組織
lg(=local government) 地方自治体

 

1-3.WEBブラウザ

WebブラウザとはWEBページを閲覧するためのソフトウェアのことを言います。ネットワークからHTMLファイル画像ファイル音楽ファイル映像ファイルなどをダウンロードしてきて、プログラミング通りに表示・再生します。インターネット黎明期の Web ブラウザ戦争では、Netscape (後に America Online が買収) と Microsoft が互いに Web ブラウザのバージョンを重ねる度、細部や機能面で競い合っていました。その点では現在の Web ブラウザ戦争も大差なく、競い合う2大ブラウザの顔ぶれも、片方は Microsoft のInternet Explorer(=IE) と変わらないが、その相手は Mozilla の Firefox や Google の Chrome に変わりました。

ブラウザとその仕様
ブラウザによってそれぞれ仕様が異なるため、HTMLファイルの表示・見え方に微妙な違いがあります。できるだけブラウザに依存しないタグを利用して、HTMLファイルを作成する必要があります。

HTMLとブラウザの仕様
図:HTMLとブラウザの仕様
WEBブラウザの主な役割
1. ネットワーク上のアドレス(URL)を与えられて、その情報にアクセスし、その情報の形式に応じて動作すること。
2. HTMLを解釈し、プログラミング通りに表示・再生すること。

 

2. ホームページとWEBサイト

2-1.ホームページとWEBサイト

ホームページとは
インターネット上で公開されている文書のことを言います。WEBブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成されます。本来は、WEBページの中で最初に表示されるページ(=トップページ)のことを指す語でしたが、日本ではWEBサイトと同義語で使用されています。

WEBサイトとは
1冊の本のように、ひとまとまりに公開されている全てのWEBページのことを言います。WEBサイトの入り口であるトップページと、WEBサイトを構成する一連のWEBページ画像ファイルなどから成り立ちます。

プロのWEBデザイナーは、WEBサイトと言うけれど、一般のユーザーやクライアントは、ホームページと言ってます。 トップページは、インデックスページや目次と言うこともあり、デザイナーやSE(=システムエンジニア)や会社によって、言い方やルールは異なるようです。

 

2-2.WEBサイトのフォルダ構成

WEBサイトは、一般的には右の図のようなフォルダ構成(=階層構造)になっています。しかし、制作会社やデザイナーによりフォルダ構成が異なるため、最適と言える状態はケースバイケースです。

 

パスの指定

リンク先の指定や、貼り込む画像のファイルを指定する際には、作業中のHTMLファイルでパスを指定する必要があります。パスの指定には以下の2通りの指定方法があります。

  1. 相対パス
  2. 作業中のファイルから見てリンクさせるファイルの場所を指定
  3. 絶対パス
  4. “ / ”(←ルート)から見たファイルの場所を指定

例)下の図のサイトにおいて作業中のファイルが、“3.html”である場合。

相対パスだと

同階層のファイルへ ⇒ 2.html
1つ上の階層ファイルへ ⇒ ../
1つ上の階層のフォルダ中のファイルへ ⇒ ../yamanashi/1.html

絶対パスだと

同サイトにあるファイルや画像を指定する時、“ / ”からパスが始まります。<a href=”/yamanashi/”>~</a>
他サイトにあるファイルや画像を指定する時、“ http:// ”からパスが始まります。<a href=”http://dezin.jp/yamanashi/”>~</a>

“ / ”(←ルート)とはサイトのトップページを示すものです。例えば、前述のサイトマップがウェブデザインスタジオとすると、/index.html を表示した場合、URLは以下のようになります。 http://dezin.jp/index.html

 

2-3.ディレクトリ・ファイル名の付け方

ホームページとは
ディレクトリやファイルに名前をつける際には必ず英字・数字(いずれも半角)を使用します。

 

使ってはいけない文字
  • {},|,\,^,~,[],<> など
  • 全角文字・半角カナ
  • 機種依存文字(=パソコンメーカーやOSなどが独自に定めた文字)
    ex.)①②、ⅠⅡ、㈱など
    ※WindowsやMacintoshなどで表示が異なったり、国際規格で規定されていないため文字化けが生じます。
拡張子

拡張子とはファイル種類を示すためにファイル名の末尾にピリオドに続けて付けられる識 別子のことを言います。
・HTMLで扱うファイルの拡張子→.html .gif .jpg .pdf .mid .wavなど
⇒ 拡張子を見るには: メニューバーから[表示][フォルダ オプション]の表示タブの”拡張子は表示しない” チェックをはずす。

 

主な拡張子一覧表
.gif GIF形式の画像ファイル
.html、.htm HTML形式のファイル
.jpeg、.jpg JPEG形式の画像ファイル
.mpg MPEG形式の画像ファイル
.pdf PDF(=Portable Document Format)ファイル
.txt テキストファイル
.mid MIDI音源用の曲データファイル
.wav オーディオファイル

 

画像データ
  表示可能色数 圧縮
GIF(.gif) 256色 なし
JPEG(.jpg) 1677万色 選択可能

 

GIFは表示色が256色に制限されていますが、色数の少ない画像向きです。特にタイトルロゴ、イラストなど、線画ベースの画像はGIFにするのが一般的です。インタレースGIF透過GIFアニメーションGIFなどがあります。線画を主体としたイラストをJPEGにすると輪郭が甘くなるなどの劣化が目立ちます。

 

JPEGは色数が多いので、フルカラーの写真やグラデーションを主体としたイラストなどを表示するのに適しています。

機種依存文字
機種依存文字はパソコンメーカーやOSなどが独自に定めた文字で、機種によって表示が異なってしまう文字を示します。表示が完全に異なってしまいますので、原稿を作成する際に注意が必要です。
Windowsでの見え方[ OS:Windows XP テキストエディター:Peggy Pad ]

 

Macintoshでの見え方 [ OS:Mac OSX テキストエディター:ミミカキエディット ]

 

3. HTMLソースとタグ

3-1.HTMLとは

HTML(=Hyper Text Markup Language)とは、WEBページを記述するための言語です。文書の構造を記述したり、文書の見栄えを記述したりするのに使います。(※1)また、文書の中に画像や音声、動画、他の情報のURLなどを埋め込むこともできます。HTMLで記述された文書を閲覧するにはWEBブラウザが必要です。 HTMLは、標準化機関W3C(=The World Wide WEB Consortium)が中心となって、HTMLの実際の開発を行い、規格を決めています。
(※1)現在では、文書の見栄えを記述するにはCSS(=カスケーディングスタイルシート)を用いることが推奨されています。

バージョン
HTMLのバージョンは、レベル0から始まって、現在レベル4.01まであります。
特徴
  • 所在地を意識せずに情報をたどれる。(ハイパーテキストリンク)
  • クライアントのプラットフォームを意識しなくてもよい。
  •  
  • 比較的簡単に記述できる言語である。

HTMLソース全体概要
HTML文書は、基本的にヘッド部・ボディ部(コンテンツ部)から構成されます。 HTML文書として公開するためには<html>タグの前に文書型宣言が必要です。

必要なタグ
<html>~</html>  WEBサイトの作成・記述する言語
<head>~</head>  文書の情報を記述するタグ
<title>~</title>  タイトルタグ
<body>~</body>  本文であることを定義するタグ。ここの部分に記述したものが画面上に表示される。

 

TIPS 文書型宣言
HTMLにはいくつかのバージョンがあり、それぞれ異なるDTD(=文書型定義)を持っています。そのため、どのDTDに基づいたHTMLで記述するのかを宣言する必要があります。WEBブラウザは宣言されたHTMLのバージョンで表示します。
 

 

文書型宣言の例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

3-2.タグ

HTML(=Hyper Text Markup Language)文書は、タグと呼ばれるもので記述します。これはInternet ExplorerFire FoxといったWEBブラウザに、レイアウト表示・または文書の構造を伝える指令のようなものです。具体的には、文書に対して「これが見出し」、「これが段落」といった意味付けをすることです。その意味にふさわしい表示、たとえば「見出しは字を大きくして後ろを1行空きにして…」といった表示をWEBブラウザが行います。 タグとは文書の書式や構造を設定するために文字列に埋め込まれた文字のことを言います。コマンドを < example > でくくったタグで記述します。

タグは基本的には「開始タグ」と「終了タグ」をペアで使用します。しかし、中には、終了タグを省略できるもの、終了タグを必要とせず開始タグを単独で使うものもあります。

  • タグには大文字と小文字の区別がありません。(URLについては大文字・小文字を区別します。)
  • タグは入れ子にできる順番が決まっています。ブラウザによっては寛容なものもありますが、各ブラウザで同じ結果が得られるよう配慮が必要です。
  • タグには属性を記述できます。属性は開始タグに記述し、「属性=”値”」の形で記述します。(一部を除く)。

 

<要素名 属性=”値”>~</要素名>

タグとWEBブラウザの対応
インターネットの世界ではいろいろなタイプ(ソフト・バージョン)のWEBブラウザがあり、それぞれ対応しているタグの種類や数はまちまちです。
WEBブラウザがHTML文書を解釈して表示するときに、使われているタグがそのWEBブラウザの理解できるものでなければ、当然無視してしまうか作者の意図に反した形で表示されてしまいます。種類・バージョンともに、いろいろなWEBブラウザで見ている人がいるインターネット環境では、各タグについて、WEBブラウザの対応の有無が常に問題になっています。

 

3-3.よく使うタグ

番号 構文 タグ解説
基本定義
<body bgcolor=”色コード”></body>(色コード=”#000000~ffffff”) 背景の基本表示色を指定する。
2 <!--コメント--> ブラウザで表示されない注意書きを入れる。
テキスト
3 <font color=”色コード”></font> (色コード=”#000000~ffffff”) 文字の色を一部分変える。
4 <font size=**></font>*=1~7) テキストの大きさを変える。
5 <h**></h**>*=1~6) 見出し文字の大きさを決める。
6 <strong></ strong> 文字を太字にする。
7 <div align=”center”></div> 絵やテキストを中央揃えにする。
リスト
8 <ul><li></li></ul> 文頭に記号のついたリストにする。
段落・区切り
9 <br> ブラウザの表示上で改行させる。
10 <hr> 水平線を引く。
イメージ
11 <img src=”example”> 画像をページに貼り込む。
12 <img src=”example” alt=”example”> 画像の代替テキストを設定する。
リンク
13 <a href=”example”></a> 文字やイメージにリンクをかける。
テーブル
14 <table></table> 表を定義する。
15 <tr></tr> 表の行を定義する。
16 <td></td> 表の列を定義する。
17 <th></th> 表内に見出しの指定をする。
18 <table border=**></table> 表の外枠の太さを変える。
19 <table align=”example”>~</table> 画面上の表を置く位置を決める。
20 <table width=**></table> 表全体の横の大きさを指定する。
21 <table height=**></table> 表全体の縦の大きさを指定する。
22 <td bgcolor=”#**></td> セルの背景に色をつける。
サイト&書籍の紹介
  • とほほのWWW入門
  • TAG index
  • 「HTMLポケットリファレンス」(シーズ著) 技術評論社
  • 「HTML&XHTML&CSS辞典」(大藤 幹著) 秀和システム
  • 「WEBデザインユーザビリティ」(池谷義紀著) SOFTBANKPublishing
HTMLファイルの作成手段
HTMLソースは、Windowsのメモ帳などのテキストエディタで作成できますが、Dreamweaver(Adobe)、Homepage Builder(IBM)、Frontpage(Microsoft)などの専用エディタを利用した方が作業効率がよくおすすめです。しかし、専用エディタによっては独自の記述形式を採用している場合もあり、ブラウザによっては意図したように表示されないこともあるため、各ブラウザで事前に表示確認することが必要です。

 

4. ホームページの使い勝手のよさ

4-1.「WEBユーザビリティ」

WEBサイトの公開は、利用者に適切な情報を伝え、作成者と利用者との間にコミュニケーションを生み出すことが目的です。企画し、設計した内容が利用者の観点で満足のいくものかを確認しましょう。利用者の立場で理解しやすく使いやすい情報のかたちを考えていきます。
WEBユーザビリティ・・・「利用者にとっての使いやすさ」を促すための指針

 

(1) 理解しやすいオンライン文書
●印刷文書との比較
  • コンピュータ画面で「読む」行為は印刷物よりも物理的、精神的制約が多い
  • ダイアルアップ接続のインターネット利用者は文書をロードしたり読んだりするためにあまり時間をかけるのを好まない
  • 同じリソースでも環境によって表示方法(見え方)が異なる
  • 2次元の画面では全体像を把握しにくい
●J.ニールセンによる研究で明らかになった点
  • 大半の利用者は、文書を飛ばし読みして、まず自分にとって必要な部分を探し、読むべき部分が見つかると本文を読む傾向がある
  • 情報を素早く入手できるよう、要約、逆三角形文書、簡潔な表現が歓迎される
  • 読んでいる文書が信頼できるかどうかは重要な要素である
  • 画像は本文テキストと関連づけられていれば歓迎されるが、無意味な画像は嫌われる
利用者の使い勝手によるユーザビリティの比較
  • 簡潔な文書は、美辞麗句の多い文書より5割以上ユーザビリティが高い
  • 長さを変えなくても客観的な表現にすると、3割以上ユーザビリティが高い
  • 飛ばし読みしても情報が得られる文書は、5割以上ユーザビリティが高い
  • 上記3要素を併せ持った文書は、そうでない文書の2倍以上ユーザビリティが高い

 

(2)飛ばし読みしても情報が得られる文書
「飛ばし読み」とは文書にざっと目を走らせて、まず要点をつかもうという読み方を指しています。飛ばし読みしても情報の概略が理解できる文書とは、情報の「構造」が明確に示されている文書にほかなりません。

  • 見出し要素が適切に十分に使われている
  • 重要な語句が強調されていて把握しやすい
  • 要点が箇条書きされている
  • パラグラフの先頭にトピックスセンテンスが置かれている
  • 適切な画像とキャプションが情報を補強している
利用者は多くの内容を浅く飛ばし読みしつつ、注目する内容はおよそ読んでいるようです。長い情報の場合は、文書の冒頭に要約を置いたり、見出しをきめ細かく提供するなどの工夫により、きちんと読んでもらえるオンライン文書を作成することができるでしょう。

 

(3)画像と情報の理解
画面に表示される要素の中で、利用者は画像よりもテキストに最初に注目する傾向が強いと言います。印刷物では、本文を読まずに図表だけを見る利用者が多いとされていますが、オンライン文書では異なる傾向があります。オンラインでは画像のダウンロードに時間がかかったり、精度が低かったりすることに関係するのでしょう。こうしたことからも重要な内容はテキストできちんとおさえ、画像で本文のイメージを広げたり理解を深めるというバランスで、オンライン文書に適した情報デザインが必要であることがわかります。パンフレットなどをHTML化する場合に、よく注意しておきたいポイントです。

 

(4)印刷利用の考慮
印刷して利用することを考慮した工夫
  • 「ここをクリック」などの装置に依存した表現は避ける
  • 白黒印刷を考慮し、「赤字の部分は」など色に依存した表現は避ける
  • 印刷用のスタイルシートを別途用意する
  • ページを細かく分割している場合は、ページをまとめた印刷バージョン、PDFファイルなども必要に応じて提供する

 

4-2.「WEBアクセシビリティ」

どんな人でもきちんと利用できるように作られた文書は「アクセシビリティが高い」と言えます。W3CWAIが障害を持つ人や限定的な環境でも使いやすいページを作成するための指針に関して、議論を進めています。WAIによって勧告されたWeb Content Accessibility Guidelines1.0(=WEBコンテンツのアクセシビリティのための指針)にすべて対応するのが理想ですが、考え方を知るというだけでも十分意味があります。

 

WEBアクセシビリティ
「ウェブを利用しているすべての人が、年齢や身体的条件に関係なく、ウェブで提供されている情報に問題なくアクセスし利用できる」ようにするための指針

 

WAI(=WEB Accessibility Initiative)
WEBに関する標準の策定を行っているW3C内に設けられた組織で、体の不自由な人も 含めて誰もがWEBを利用できるようすることを目的としています。障害者に配慮したWEBサイトの作成方法などに関する指針を公表しています。

 

(1) さまざまな利用者
WEBの利用者はとても多様です。そのさまざまな利用者に配慮した、「環境に依存しない情報共有」が重要となります。コンピュータ上でグラフィカルなブラウザを使う利用者以下に、次のようなユーザがWEBを利用しています。

  • 文字ベースのブラウザの利用者
  • 携帯端末やテレビなどコンピュータ以外の装置からの利用者
  • 目が不自由なため、音声合成装置でページを「読み上げ」ている利用者
  • 印刷したページを読んでいる利用者

これらのどのような利用者でもきちんと情報を理解できるようにしなければなりません。他の人が自分と同じブラウザを使っているわけではないことを注意し、情報共有を目指しましょう。

日本におけるWEBアクセシビリティの指針
日本においても、WEBアクセシビリティに関する指針が公表されています。

 

5. インターネットにおけるアクセシブルなウェブコンテンツの作成方法に関する指針

5-1.目的

ウェブのコンテンツ制作者(ページの作成者、ページデザイナー)及び作成ツールの開発者向けに、バリアフリーなウェブコンテンツを作成する方法を提示し、障害のある人がインターネットのウェブへ容易にアクセスできるようにすること

 

5-2.指針

様々な形式に適切に変換できるコンテンツを作成するための指針
  1. 音声や画像で表示されるコンテンツには代替手段を提供すること
  2. 色の情報だけに依存しないこと
  3. マークアップ及びスタイルシートは適切に使用すること
  4. 自然言語の使用について明確にすること
  5. 適切に変換できるような表を作成すること
  6. 新しい技術を様々な形式に適切に変換できるページを保証すること
  7. 時間の経過に伴って変化するコンテンツに対してユーザの制御を保証すること
  8. ユーザインタフェースのアクセシビリティを保証すること
  9. 特定の装置(デバイス)に依存しない設計であること
  10. 臨時の対応策を利用すること
  11. インターネットの技術標準及び指針を使用すること

理解が可能でナビゲーションが可能なコンテンツを作成するための指針
  1. 文脈やページの構成等の情報を提供すること
  2. ナビゲーションの仕組みを明確に提供すること
  3. ドキュメントは明確かつ簡潔であること
平成11年 郵政省・厚生省共同研究会:「情報バリアフリー」環境の整備の在り方に関する研究会報告書