30分間HTML入門

HTMLは決して難しいものではありません。基本的なことがらなら、30分で概要を理解することだって可能です。そして、その基本だけで、十分ウェブページを書くことができるのです（ここでは、より広い可能性を持つXHTMLの書き方に準じて説明します）。

よいHTML

せっかくHTMLの書き方を身につけるのですから、どうせなら「よい」HTMLを書けるようにしましょう。全ての学習と同じで、「よい」メソッドを身につけると、絶対に理解も早いしあとが楽になります。すぐにHTMLを書きたい人も、ちょっとだけ付き合ってください。

よいHTMLの条件

よい文章の条件の一つが、読む人の立場に立って読みやすく書くことであるように、よいHTMLを書くためには、「利用者の立場に立って分かりやすく」を心がけることが大切です。ただし普通の文章と違って、HTMLの「直接の利用者」は人間ではなく、ブラウザなどのコンピュータのソフトであるということに注意しなければなりません（人間の「読者」はHTMLを読むのではなく、ブラウザがHTMLの内容を「表示」した結果を読んでいるのです）。だから、よいHTMLはこれらの利用者に分かりやすいように書かれている必要があります。

といっても、難しく考えないでください。このためには、HTMLを使ってどれが見出しでどれが重要な語句か（つまり文書の構造）をきちんと示してあげればよいのです（具体的な方法は次のセクション以降で説明します）。ブラウザなどのソフト（利用者）はHTMLを読みとって文書の構造を把握し、例えば「見出しは大きな文字で、重要なところは太字で」という具合に、読者に分かりやすい形で表示するという仕事をします。

〔補足〕

仕様書などでは、人間の読者であるユーザー（User）に対してブラウザなどのソフトをユーザエージェント（User Agent = UA）と呼びます。UAはウェブの情報をサーバーから受け取り、必要に応じて利用者のために分析したり読みやすく表示するという、人間の「代理」としての役割を担うのです。仕様書などではこうした用語が使われますが、この文書では簡便に利用者と読者として説明することにします。

〔以上補足〕

なぜフォントじゃなくって「構造」なの？

なぜ最初から見出しを「ＭＳゴシック」の16ポイントで書いたMicrosoft Wordの文書を使わずに、こういう一見回りくどい仕組みで文書を公開するのかっていうと、人によってコンピュータの環境が異なるからなのです。Macintoshには「ＭＳゴシック」というフォントはありませんし、誰もがWordを使っているわけではありません。小さなモノクロ画面の携帯端末でページを見ている人もいます。そこで、誰もが情報を共有できるようにするために、環境に依存する文字の指定方法ではなく、「見出し」という意味上の位置づけだけを情報として加えておいて、ソフトウェアが読者の環境に合わせて表示する方法が考えられたのです。

こうしておけば、目が不自由な人で音声合成ソフトでページを「読み上げ」ている場合でも、“見出し部分は少しトーンの高い声でゆっくり読む”といった設定にすることで、文章を理解しやすくなります。また、ソフトウェアに「とりあえず見出しだけを集めて文章の要約を作れ」と指示することで、長い論文を効率的に調べることも可能です。

息の長いページを

よいHTMLは利用者のためばかりではありません。正しいHTMLを書くことは「作者」にとっても大きなメリットになります。

HTMLとして公開するページは、大切な情報資産です。その内容は、多くの場合ブラウザなどのソフトウェアよりも長い寿命を持ち、何年にもわたって多くの人に利用されます。そのような貴重な情報が、特定のブラウザの特定のバージョンに合わせて書いたために、何年か後に正しく表示されなくなるとしたらとても残念なことです。

標準に従って文書の構造を示すように書かれたHTMLは、ブラウザの種類やバージョンに関係なく、常に正しく情報を伝えることができます。たとえ見かけ上の表現方法が変わっても、「見出し」や「段落」という構造表現の概念は変わることがないからです。大切な情報を息長く活用できるようにするためにも、ぜひ「よいHTML」を書くようにしてください。

＊　　＊　　＊

やっぱり難しそう？　安心してください。本来HTMLはそのような目的のために作られているので、文書の構造を示すためのHTMLは素直で簡単です。HTMLで「格好いいレイアウト」を実現しようと無理するから、変なテクニックが蔓延して複雑になっているだけなんです（格好いいレイアウトやデザインは、スタイルシートを使うことで、ずっと簡単に、効果的に実現できます）。

＊詳しくは「HTMLって何だ」を参照

HTMLの基本形

「利用者」に分かりやすくするために、1つのHTML文書（ファイル）は次の2つの部分から構成されます。

  1. そのHTMLファイル自身に関する情報
  2. 読者に読んでもらう本文

まず最初に、この1と2がどのように構成されるかを見ていくことにしましょう。

HTMLの要素

1番目の部分をHTMLのhead要素といい、2番目の部分をbody要素といいます。この2つをあわせたもの、つまりHTMLの本体をhtml要素といいます。こんなふうに、HTMLでは文書を構成するパーツを「要素」と呼んで、要素の組合せとしてページを作り上げていきます。

さて、私たちが勝手に「これは要素だ」と決めても、それを何らかの方法で明示してあげないことには、「利用者」には区別がつきません。そこで、文中に「ここからここまでがこの要素だ」という目印を付けることにします。この目印を「タグ」と呼び、目印を付けていくことを「マークアップ」といいます。HTMLとはHypertext Markup Languageの略ですが、ここで出てくるMarkupとはこのような目印付けのことを意味しているのです。

＊詳しくは「ヘッド要素とボディ要素」を参照

タグとは何か

タグは要素の名前を山括弧（ < と > ）で囲んだものです。つまりhead要素を示すタグは<head>となります。

タグが1つでは、「ここからここまで」というマークアップができませんから、通常タグは2つをペアで使います。「ここから」を示すタグを開始タグ、「ここまで」を示すタグを終了タグといいます。終了タグは、開始タグと区別するために最初の山括弧を</とします。したがって、head要素をマークアップするタグは

（例）<head>ヘッド要素の内容</head>

となります。タグで囲まれた部分を要素の「内容」といいます。

では、タグを使ってここまでに登場した要素をマークアップしてみましょう。

（例）

<html ...>
  <head>
    ヘッド要素の内容
  </head>
  <body>
    ボディ要素の内容
  </body>
</html>

これがHTMLの骨格です。あとはこれにいろいろな内容を肉付けしていけばよいのです（html開始タグの...の部分には付加情報を記述します。これについては最後に説明します）。

〔補足〕ここで<head>などのタグの左に余白をとったり、タグの間に改行を入れたりしていますが、これは「作者」の読みやすさのためです。HTMLでは好きなだけ改行や空白（ただし半角）を入れて構いません。ページがブラウザで表示されるときは、余分な改行や空白は取り除かれます。逆に文書の構造上、改行がある方が分かりやすい要素には、ブラウザが自動的に改行を加えてくれます。

タイトルを決める

どんな文書も「タイトル」「件名」なしでは通用しません。同様にHTMLにもタイトルが常に必要です。タイトルはその名の通りtitle要素で表します。また、タイトルはそのHTML文書に関する情報なので、head要素の内容になります。

（例）

<html ...>
  <head>
    <title>文書のタイトル</title>
  </head>
  <body>
  ...

タイトルはブックマークや検索サイトの結果表示にも使われます。ですから「他の人がタイトルだけを見ても文書の内容が分かる」ようにつけてください。

＊詳しくは「適切なタイトル」を参照

この例で分かるように、HTMLでは要素の中にほかの要素が次々と入れ子になって、文書全体が木のような構造となります。外側の要素を「親要素」、内側の要素を「子要素」といい、一番の親にあたるhtml要素を「ルート要素」といいます（html要素以外の全ての要素は、必ず1つだけ親要素を持ちます）。開始タグと終了タグを正しく対応させて木の構造をきちんと表現することが、利用者が扱いやすいHTMLのためには極めて重要です。

段落を示す

次はいよいよ本文です。ここから先に出てくる本文の内容は、みんなbodyの子要素や孫要素になります。

一般に本文の文章は、複数の段落で構成されますね。これに対応して、HTMLにも段落を示すp要素が用意されています（pは段落を意味するParagraphのことです）。一段落ごとにp要素を使ってマークアップします。

（例）

 <body>
  <p>まず私のいいたいことは…
  …ということだ。</p>

  <p>次に言っておくべきは…
  …なのだ。</p>
  ...
 </body>
</html>

例では二つのp要素の間に1行空きを入れていますが、これも「作者」の読みやすさのためです。段落の途中で改行しても、やはりそれはブラウザで表示するときに取り除かれます。

「段落」は意味のまとまりを示すもので、「見かけ上の改行」という考え方とは異なります。読者（人間の）にとって分かりやすいように段落をまとめてください。

＊詳しくは「段落と改行」を参照

見出しをつける

文章が長くなってくると、いくつかの見出しを入れて読みやすくなるように工夫します。見出しには一般に「大見出し」「中見出し」「小見出し」などのレベルがあるので、HTMLでも複数のレベルの見出しが用意されています。

見出しを示すのは、h1〜h6の6つのheading要素です。h1が大見出し、h2が中見出しと、数字が大きくなるにつれて下位レベルの見出しになっていきます。通常、大見出しの次にいきなり小見出しがこないように、h1の次に突然h4を使ったりせず、h1, h2...と順番に使っていってください。

（例）

 <body>
 <h1>私の主張</h1>
  <h2>序論</h2>
    <p>まず私のいいたいことは…ということだ。</p>
    <p>次に言っておくべきは…なのだ。</p>
  <h2>本論</h2>
   <h3>いいたいことその1</h3>
    <p>最初の点をくわしく説明しよう…</p>
   ...
 </body>
</html>

リストにして示す

箇条書きにしたほうが分かりやすい内容があります。このために、列挙型の箇条書き（ul要素）と順序付きの箇条書き（ol要素）があります。箇条書きにする部分をこの要素でマークアップし、項目をli要素で並べます。

順序に特に意味がなければ

（記述例）

<ul>
  <li>私はピンチョンが好きだ</li>
  <li>あなたはバーセルミが好きだ</li>
</ul>

とします。順序が意味を持つときは

（記述例）

<ol>
  <li>最初にピンチョンを読みなさい</li>
  <li>次にバーセルミを読みなさい</li>
</ol>

とします。それぞれ結果は次のように表示されます。

（表示例）

  • 私はピンチョンが好きだ
  • あなたはバーセルミが好きだ
  1. 最初にピンチョンを読みなさい
  2. 次にバーセルミを読みなさい

ul, olはそれぞれUnordered List（並列列挙リスト）, Ordered List（順序付きリスト）、また li はList Item（リストの項目）を意味します。ul, olの中にはli要素しか書くことができませんが、li要素の中には他のリストや段落を記述することができます。

＊詳しくは「リスト：簡潔な情報表現」を参照

リンクする

なんと言ってもWWWはリンクです。これによって世界が大きく広がります。

リンクにはリンク元（始点）とリンク先（終点）という情報が必要です。リンク元になる部分（クリックできる部分）はa要素で示します。リンク先は、このa要素の開始タグに、属性という付加情報を加えて示します。ここではハイパーリンクでの参照先を意味するhrefという属性を使います（要素名と属性は半角のスペースで区切ります）。

（例）<p><a href="http://www.kanzaki.com/">ためになる情報</a>がある</p>

hrefで示しているリンク参照先のアドレスをURL(URI)と呼びます。同じディレクトリ（フォルダ）にある自分のファイルにリンクするには、ここにそのファイル名を書きます。

〔補足〕たとえばリンク集を作るときは、前項のリストと組み合わせて、li要素の内容をこのaタグで囲んだリンク元にすればよいわけです。

＊詳しくは「ハイパーリンクを提供する」を参照

強調する

ずっと文字だけを書いていくと、ポイントがわかりにくくなるかもしれません。重要なところは強調しておくと読みやすいですね。htmlでの強調は、em要素とstrong要素を使います。これらのタグで囲まれた部分が、ブラウザによってイタリックや太字として強調表示されます。

〔補足〕強調表示の方法は、ブラウザや読者の設定によって、たとえば赤い文字になったり下線付き文字になったりすることもあって、太字とは限りません。ここで伝えるべきことは、「太字」ということではなく、「ここは強調ポイント」ということで、それをどう表現するかは環境によって異なるのです。

＊詳しくは「語句の強調とハイライト」を参照

画像を表示する

無理に画像を使わなくても立派なページを作ることができますが、それでも図や写真の方が分かりやすい情報もあります。

ページ内に画像を掲載するためには、その画像を別のファイルとして用意し、img要素を使ってファイルの在処を示します。あわせて、画像を表示しない利用者のために、画像の代わりとなる文を提供します（もともと画像を表示しないブラウザもあれば、読者の設定によって画像を表示しないようにすることもできます）。

（例）<p><img src="monkey.gif" alt="サルでもHTMLを書いている" /></p>

srcが画像ファイルの在処（URL）、altが代替文です。代替文は、“写真があること”の説明（たとえば"picture"とかファイル名"monkey.gif"）ではなく、例のようにその写真で伝えたい内容が分かるような文を書いてください。ブラウザはimg要素を見つけると、画像を表示できる場合はsrcで示されたファイルの中身を、表示できないときはaltの代替文をそこに表示します。

img要素による画像は、文字と同じ扱いを受けます。画像だけを単独で使う場合も、p要素を使って段落として扱ってください。画像を右寄せにしたり、周囲にテキストを回り込ませたりするにはスタイルシートを使います。

このタグは、これまで出てきたタグと違って終了タグがない（従ってタグで囲まれるべきimg要素の「内容」もない）空要素のタグであることに注意してください。終了タグを探さなくてよいことを利用者に示すため、空要素の場合は開始タグの最後を />で閉じます。

＊詳しくは「画像の表示」を参照

作者情報

作品に署名するのは当然ですが、HTMLの場合は、検索サイトから突然途中のページにやってくる人もいるので、全てのファイルに署名しておくことが大切です。このためにはaddress要素を用い、さらに作成（更新）日付を含めてfooterとしておきます（署名はページの最後に置く人が多いようなのでfooterとしましたが、文頭にheader要素として加えるなど、どこに書いても構いません）。

（例）

<footer>
  <address>
    何某作;
    <a href="mailto:yourmail@domain.com">作者へのメッセージ</a>
  </address>
  20XX-02-04日更新
</footer>

mailto:はメールアドレスを示すためのURLの書き方です。日付の書式については、当サイトの日付の表記に関するノートも参照してください。

＊詳しくは「署名しよう」を参照

補足：文字コードとマーク付け言語の情報

HTMLではいろんな「文字コード」が使われるので（ブラウザの「表示→エンコード」などのメニューを開いてみてください）、自分の文書で使っている文字コードを利用者に教えてあげる必要があります。これはサーバーで設定するのですが、サーバーにそのような機能があるかどうか分からない場合は、次例に示すようにmeta要素をhead要素の先頭に加えます。

（例）

<head>
 <meta charset="UTF-8" />
 <title>...
 ...

＊詳しくは「文字コード情報」を参照

また、XHTMLとしてより幅広い利用者が活用できる文書とするためには、htmlタグにこの文書がどんなマーク付言語を使っているのか（名前空間といいます）を明記しておきます。さらに、文書の内容が日本語ならそれを示す情報も加えておくと、利用者の処理を助けることができます。

（例）<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">

xmlns属性に記述しているhttp:以下の長い文字列が、この文書の「名前空間」を示します。常に同じですから、これをこのままコピーして使いましょう。

おさらい

お疲れさまでした。これでHTMLを書くための一通りの道具を手に入れたことになります。基本的に、普通の文章のパーツを「要素」としてマークアップしていくだけですから、なれてしまえば簡単です。そして、この「要素」をきちんと示すことが、コンピュータソフトにも分かりやすいHTMLとなり、ひいては読者にも読みやすく、作者にとってもメンテナンスしやすいページになるのです。

簡単におさらいしましょう。HTMLの七つ道具です。

  1. HTMLは文書の構成パーツを「要素」としてマークアップする
  2. HTML文書はhead要素とbody要素で構成され、headとbodyを合わせたものがhtml要素になる。html要素にはマーク付け言語情報を書く
  3. headの中に、分かりやすいtitleを書く。文字コードも必要ならここでmetaを使って示す
  4. body（本文）は段落（p）と見出し（h1〜h6）で構成され、必要に応じてリスト（ul, ol, li）を使って情報を見やすく整理する
  5. ハイパーリンクはa要素タイプを使う
  6. 強調するところはem, strong要素で示し、画像が欲しければimg要素タイプを使う
  7. 文書にはaddressで署名する。作成、更新日などと合わせてfooterとしてまとめることができる。

とりあげた要素タイプは16種類。楽勝ですね。これを出発点に、いろんなHTML文書を公開していってください。

  • サンプルHTMLを用意しています。ひな形として使ってください。
  • もう少し詳しく知りたくなったら、簡単で*正確な*HTMLの説明をどうぞ。
  • HTMLを書くためのソフトについてはHTMLを書くための道具、ファイルの保存場所についてはURIとファイルディレクトリで取り上げています。
  • 文字色や背景画像にも凝ってみたいときはスタイルシートを使ってください。
  • 既に手元にある原稿をHTMLにするには、自動HTML変換機能も使えます。
  • 作者紹介のページにはインスタントホームページが役立つかもしれません。
  • HTMLの歴史や将来について関心がある場合はHTMLの過去・現在・未来をご覧ください。
  • 書籍としては、HTMLの歴史から情報共有の方法、最新の規格、サイトの企画・設計、ユーザビリティまで解説した『ユニバーサルHTML/XHTML』を参考にしてください。