Visual Basic 中学校 HTML講座
 

Visual Basic 中学校 > HTML講座 >

第１回　HTMLとWebサイト

この記事が対象とする仕様

  HTML5 HTML構文 ◎ 対象です。
  HTML5 XHTML構文 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.1 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.0 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  HTML 4.01 ○ 対象ですが、HTML5に対する補足としてふれています。

 

概要

・この講座は、読者がHTMLを自分で調査・学習できるようになることを目指す。

・この講座はHTMLのタグ辞典や文法書ではない。

・この講座ではHTML5のHTML構文を中心に説明する。

・HTMLとは文章の構造や意味を表現するものであって、表示の仕方を指定してはいけない。

・HTMLとWebサーバーの通信のポイント

１．この講座の対象読者と目的

この講座はHTMLのことを初めて学ぶ人を対象に、HTMLの基本事項を説明し自分でHTMLを調査・学習できるようになることを目指します。

この講座の対象者

この講座のゴール

 

この講座はHTMLの各種タグの説明書(リファレンス)や構文の解説書の代わりにはなりません。この講座で習得できる知識はHTMLの構造や考え方が中心です。歴史の勉強に例えると、この講座は年表や用語集ではなく教科書ということです。

私は仕事である会社の新入社員を対象に2日間HTMLの教育をするように依頼を受けました。その会社には既に教育用のテキストが存在しましたがそのテキストは古い仕様・考え方に基づいて書かれていたため、昨今の情勢に合わせて教育用のテキストを自作することにしました。それがここで公開している講座です。

２．HTMLの役割と位置づけ

２−１．HTMLの本義

HTMLは文書の構造と意味を表現するための言語です。

たとえば、次の文書を考えます。

しょうゆ工場の感想

  ぼくは野田市にあるしょうゆ工場を見学に行きました。はじめはいいにおいがにしていましたが、工場の中を進むにつれてにおいがすごくつよくなって、死ぬかと思いました。帰りにはおみやげにしょうゆをもらいました。
  ぼくはよい止めのくすりを飲み忘れたので帰りのバスの中でも気持ち悪くなって死ぬかと思いました。

この文書は短いものですが題名と２つの段落を含んでおり、これだけでも文書に構造が出現しているのがわかります。

読み手は小学校以来の教育によって無意識にこの構造を意識して、たとえばこの文書のタイトルは「しょうゆ工場の感想」であるということがわかります。

これを、明示的にコンピューターに伝えるのがHTMLの役割です。

この文書をHTMLで書くと次のようになります。

<!DOCTYPE html>
<title>しょうゆ工場の感想</title>
<p>ぼくは野田市にあるしょうゆ工場を見学に行きました。はじめはいいにおいがにしていましたが、工場の中を進むにつれてにおいがすごくつよくなって、死ぬかと思いました。帰りにはおみやげにしょうゆをもらいました。</p>
<p>ぼくはよい止めのくすりを飲み忘れたので帰りのバスの中でも気持ち悪くなって死ぬかと思いました。</p>

文書の中に追加されている<title>や<p>などの記述が文章を構造化するHTMLの要素です。

<title></title>はこの間にある文言が文書のタイトルであることを示し、<p></p>は、間にある文が段落を構成することを示しています。

 

２−２．HTMLはどのように使われるか

HTMLは自由な用途で使うことができますが、実際のところほとんどはインターネットやイントラネットからアクセスできるWebサイトを記述するために使われています。また、少数派の用途として各種製品に付属するヘルプファイルの内容がHTMLで記載されていることがあります。

Webサイトの場合、ユーザーはWebブラウザーなどのソフトウェアからURLを指定することで目的のWebサイトにアクセスします。このソフトウェアのことを「ユーザーエージェント」と呼びます。

大部分のユーザーエージェントはWebブラウザーですが、視覚障碍者向けの視覚に頼らないユーザーエージェントや、検索エンジンなどが機械的に情報を収集するためのユーザーエージェント(=クローラー)などいくつかの種類のユーザーエージェントがあります。

HTMLの仕様は各種のユーザーエージェントのことを考慮して作られており、視覚的な表示が得意なWebブラウザーだけを念頭に置いているとHTMLの仕様の作成者が意図したことを読み違えてしまうことがあります。

一言でまとめると、HTMLはWebブラウザーだけのためにあるのではありません。

 

２−３．WebサイトからHTMLを取得する仕組み

 ここでは話を簡単にするためにWebブラウザーによるWebサイトへのアクセスがどのように行われているか、最も一般的な流れを説明します。

  1. ユーザーはWebブラウザーに対象のウェブサイトのURLを入力します。

  2. Web上の情報にアクセスするためにHTTPという通信方法が定められており、WebブラウザーはこのHTTPを使って対象のWebサーバー(Webサイトを提供しているコンピューター)にアクセスします。

  3. リクエストを受けたWebサーバーは、Webブラウザーが要求しているURLやHTTPを解析し、ユーザーが要求している情報をHTMLで生成してWebブラウザーに送り返すか、あらかじめ用意してあるHTMLをそのままWebブラウザーに送り返します。

  4. Webブラウザーは送られてきたHTMLを解釈して画面に表示します。 たとえば、多くのWebブラウザーは文書のタイトルをウィンドウのタイトルバーに表示し、文書の段落の間は少し隙間を開けて表示します。

この流れには重要なポイントがいくつかあります。

ポイント１：ユーザーエージェントとWebサーバーはHTTPで通信しています。

表示されているHTMLがすべてではないということです。同じURLにアクセスしているのに場合によって表示される内容が違うとするとHTTPの内容が異なっているのかもしれません。

これを日常生活に例えると、手紙の内容だけではなく封筒に書かれていることが重要な場合もあるということです。

ポイント２：WebサーバーがHTMLを生成している

どのようなリクエストが来たときにどのようなHTMLを生成すればよいかはWebサイトを公開している目的によって千差万別です。この千差万別の要求を実現するためにたくさんのプログラマーが日夜働いています。あなたがプログラマーを目指しているならば将来あたなはこのプログラムを書く可能性は高いでしょう。このようなプログラムはVB, C#, Java, PHP, Rubyなどで記述されます。

参考：http://www.atmarkit.co.jp/fdotnet/chushin/chushinsurvey_01/chushinsurvey_01_01.html (母集団が作為的であることに注意)

ポイント３：WebブラウザーがHTMLを解釈する

HTMLをどのように解釈すべきかの仕様は国際的な組織であるW3Cによって定められており、この講座で主に説明するのはその仕様です。

 

なお、ユーザーエージェントはWebサーバーからHTML以外の文書や文書でないものを受け取る場合もあります。

例：Excel, PDF, 画像, Webサービスの通信など。

 

２−４．HTMLは表示方法を指定しない

 

さて、本題に入る前に多くの初心者が誤解してしまうことを先に説明します。

ここまでで説明したようにHTMLは文書の構造と意味を表現します。WebブラウザーはHTMLの構造を解釈してどのように表示するか決定し表示します。

<title>を例にとると、

HTMLは<title>が文書のタイトルであることを表現します。

多くのWebブラウザーは文書のタイトルをウィンドウのタイトルバーに表示します。

よくある誤解は<title>とはタイトルバーに表示する内容を指定するものだというものです。HTMLはあくまで構造と意味を定義しているだけでそれをどう表示するかは定義していません。

参考

HTML4 2.4.1 「Separate structure and presentation」

HTML5Diff  1.2「presentational elements that are better dealt with using CSS」

メモ メモ  -  blockquoteの事例

以前問題になったのはblockquoteです。blockquoteは長い文章の引用を表すHTMLの要素ですが、多くのWebブラウザーは長い引用の部分を字下げ(※１)して表示します。このことから、『字下げしたい場合はblockquoteを使用する』という誤解が広まってしまいました。(※２)。

その結果、引用でもないのに字下げのためだけにblockquoteが頻繁に使用されるようになり、ユーザーエージェントは文書の中に引用があるのかないのか判断できなくなってしまいました。

たとえば視覚障碍者向けのユーザーエージェントでHTML文書を読み上げるときに、字下げに出会うたびに引用でもないのに「以下は引用です。」と読み上げられてしまうか、引用部分も通常部分も区別なく読むしかなくなってしまいました。

みなさんは「HTMLを使って表示方法を指定する」という意識は持たないようにしましょう。表示方法を指定したい場合はHTMLではなく、CSSと呼ばれる別の仕組みがあるのでそれを使いましょう。

※１：「字下げ」とは段落の先頭のように該当部分全体を数文字分ずらすことです。

※２：誤解のせいだけではなく、HTMLを作成するツールの中で字下げすると勝手に<blockquote>を使用するツールがあり、それらのツールで作られたHTMLが多くあったため広まってしまったという要因もあります。

とは言え、文書の構造から表現方法を完全に取り除くのは困難であり、また過去のインターネット文化でもそれらは混在していました。そのため方向性としてHTMLでは表現方法は指定しないと示されてはいるものの表や改行などいくつかの要素はHTMLで扱うべきこととされています。

３．HTMLに関するの数々の仕様

３−１．最新の仕様

HTMLはHyper Text Markup Languageの略称で、当初からWeb上で文書を表現する目的で設計されていました。

1993年にHTMLの最初の仕様が確定して以来、2011年現在に至るまでHTMLに関連した仕様には数々の変更・改訂がなされ、以前は問題のない書き方だったのに、現在では推奨されていない、またその逆に、ある書き方が以前は駄目だったが今は推奨されているというような事態が発生してしまいました。

そのため、書店でHTMLの本を購入するときは、その本がどのバージョンのHTMLを扱っているのか注意が必要ですし、初心者は古本屋でHTMLの本を買うことは避けたほうがよいでしょう。

現在、最新の仕様はHTML5です。

HTML5では2種類の構文が定義されており、HTML構文とXHTML構文と呼びます。この講座では今後一般的になると私が思うHTML構文を扱います。

 

３−２．既存のサイト・システム

世の中には既に20年近い歳月にわたって、非常に多くのWebサイトとWebサイトによるシステムが構築されてきました。それらのサイトやシステムは当然最新のHTML5に準拠していないものがほとんどです。

ですので、読者の方がもし以前に作られたサイトやシステムの面倒を見る必要があるのであれば最新のHTMLを学ぶだけでは済みません。少なくともHTML4.01とXHTML1.0を追加で学ぶ必要があるでしょう。

この講座ではHTML5を扱いますが、ところによってHTML4.01やXHTML1.0にも言及します。また、これらは仕様が変わっているとはいえ、ほとんど同じ部分も大量にあるのでどれか１つを理解すれば、他を理解するためにはちょっとした違いの部分だけ把握すれば済むようになるでしょう。

 

４．参考文献

この講座の一連の記事を執筆するに当たりいくつかのWebサイトを参考にしました。中でも重要なのはW3Cによる正式なHTMLやCSSの仕様書ですが、これらは英語で書かれているため私の読解力では読み進むのが難しく、有志が日本語訳したサイトをありがたく参考にさせていただきました。先達の努力とボランティア精神に大きな感謝の意を表します。

また、この講座執筆時点ではHTML5は完成されているものではなく、2011年5月25日版に基づいている点にご注意ください。

本文中には適宜参考にした資料の箇所の抜粋を載せています。これは読者の便宜のためということもありますが、私のメモ書き程度ととらえてください。参考資料の抜粋を載せる際は下記に太字で載せる略称を掲載しています。私の仕様の解釈が誤っている場合は適宜ご連絡願います。

参考文献一覧

また、以下のサイトはHTMLの構文が正しいかチェックすることができ頻繁に利用しました。