HTML 30分間入門チュートリアル

この記事の目標

30分以内でHTMLとは何かを理解し、基本的な知識を得ることができます。入門したら、インターネットでさらに詳細な資料を見つけて学習を続けることができます。

HTMLとは

HTMLは英語のHyper Text Mark-up Language（ハイパーテキストマークアップ言語）の略で、独自の文法規則を定めており、「テキスト」よりも豊かな意味（画像、テーブル、リンクなど）を表現するために使われます。ブラウザ（IE、FireFoxなど）はHTML言語の文法を理解しており、HTML文書を表示するために使えます。現在、インターネット上のほとんどのWebページはHTMLで書かれています。

HTMLとはどのようなものか

簡単に言うと、HTMLの文法はテキストに意味を表すタグ（タグ）を付けることで、ユーザー（人またはプログラム）がテキストをよりよく理解できるようにするものです。

次は最も簡単なHTML文書です：

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">サンプル</a>！
   </body>
</html>

すべてのHTML文書には<html>タグが必要です。<html>タグは2つの部分、<head>と<body>を含めることができます。

<head>タグは文書全体の一般的な情報（文書のタイトル（<title>タグはタイトルを含めるために使います）、文書全体の説明、文書のキーワードなど）を含めるために使います。文書の具体的な内容は<body>タグの中に置きます。

<a>タグはリンクを表すために使われます。ブラウザ（IE、Firefoxなど）でHTML文書を表示しているとき、<a>タグで囲まれた内容をクリックすると、通常は別のページにジャンプします。ジャンプ先のページのアドレスは、<a>タグのhref属性で指定されます。上記の<a href="../www.example.com/index.html">では、href属性の値はhttp://www.example.com/です。

HTML文書に含められる内容

異なるタグによって、HTML文書はテキスト、リンク、画像、リスト、テーブル、フォーム、フレームなど、さまざまな内容を含めることができます。

テキスト: HTMLはテキストに対するサポートが最も豊富で、異なるレベルの見出し、段落、改行を設定でき、テキストの意味や外観を指定でき、テキストが他の場所からの引用であることを示すこともできます。などなど。
リンク: リンクは、コンテンツが別のページまたは現在のページのどこかの部分に関連していることを示すために使われます。
画像: 画像はページをより美しくしたり、より多くの情報を提供したりするために使われます。
リスト: リストは、一連の項目が互いに関連していることを示すために使われます。
テーブル: テーブルは、データを行と列で整理した形式です。また、ページのレイアウトにテーブルを使う人も多くいます。
フォーム: フォームは通常、テキスト入力ボックス、ボタン、チェックボックス、ラジオボタン、ドロップダウンリストなどで構成され、HTMLページをよりインタラクティブにします。
フレーム: フレームは、ページ内に他のページを含めることを可能にします。

HTML文書形式の詳細説明

前述でHTML文書の基本形式を紹介しました。以下で詳しく説明します。

HTML文書は、その内容が本質的にテキストにすぎないため、任意のテキストエディタ（メモ帳、UltraEditなど）で作成・編集できます。

HTMLテキストでは、山括弧で囲まれた部分をタグと呼びます。本文中で山括弧（大なり記号や小なり記号、つまり同じもの）を使いたい場合は、使用しなければなりません。文字エスケープ、つまり文字の元の意味を変換することです。<は<<を使います。>は>>を使います。&記号自体には、&&を使います（言わざるを得ませんが、多くのHTML文書がこの規則に従っておらず、一般的なブラウザは&がエスケープの始まりなのか単なる記号なのかを解析できますが、このようなやり方は推奨されません）。

タグは本質的に、それが含む内容の説明であり、より多くの情報を提供するための属性を持つことがあります。例えば、<img>（画像）タグにはsrc属性（画像のアドレスを示す）、width属性とheight属性（画像の幅と高さを示す）があります。HTMLでどのタグを使えるか、それぞれのタグがどの属性を持てるかは規定されており、ここで説明した基本知識を理解した後は、HTMLを学ぶことはつまりこれらのタグを学ぶことになります。この記事の後半では、よく使われるHTMLタグについて簡単に紹介します。

タグには通常、開始部分と終了部分（開始タグと終了タグとも呼ばれます）があり、一緒にそのタグが含む内容を定義します。属性は開始タグでのみ指定でき、属性値は一重引用符または二重引用符で囲むことができます。終了タグはスラッシュとタグ名で表されます。場合によっては、他の内容を含まないタグ（属性のみ、または属性すらないタグ）もあります。その場合は、次のように書くことができます：<img src="logo.gif.html" />。最後のスペースとスラッシュに注意してください。これはタグが終了していることを示し、別途終了タグは必要ありません。

一部のタグは、その内容の中にさらに新しいタグを含めることができ、新しいタグ名がそれを含むタグの名前と同じになることもあります（どのタグがタグを含めることができ、どのタグを含められるかも規定されています）。例：

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

この場合、最後に現れたタグが最初に終了する必要があります。

HTML文書内のすべての空白文字（スペース、タブ、改行、キャリッジリターン）はブラウザによって無視されます。唯一の例外はスペースで、連続するスペースは、1個でも2個でも100個でも、1つのスペースとして扱われます。このような規則があるのは、空白文字を無視することで、HTMLの作者が自分にとって最も都合の良い形式で内容を整理できるようにするためです。例えば、各タグの開始後にインデントを増やし、タグの終了後にインデントを減らすことができます。英語のテキストではスペースがよく使われる（単語を区切るため）ので、スペースには特別な処理が行われます。連続するスペースを表示したい場合（インデントなど）は、  を使ってスペースを表すべきです。

よく使われるタグの紹介

テキスト

最もよく使われるタグは<font>でしょう。フォント、文字サイズ、文字色を変更するために使われます。

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

太字、下線、斜体もよく使われる文字効果で、それぞれ<b>、<u>、<i>で表します：

<b>Bold</b>
<i>italic</i>
<u>underline</u>

また、含まれるテキストが特別な意味を持つことを示すタグもあります。例えば、<abbr>（略語）、<em>（強調）、<strong>（より強い強調）、<cite>（引用）、<address>（住所）などです。これらのタグは表示効果を定義するために存在するわけではないので、ブラウザで見ると何の効果もない場合もありますし、ブラウザによってこれらのタグの表示効果がまったく異なる場合もあります。

長い文章でも、適切な小見出しがあれば、その内容をすばやくおおまかに把握できます。HTMLでは、見出しを表すタグとして、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>があります。それぞれレベル1の見出し、レベル2の見出し、レベル3の見出し...を表します。

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

画像

<hr>タグは、ページに水平線を追加するために使われます。width属性とcolor属性を指定することで、水平線の長さと色を制御できます。

<hr width="90%" color="red" />

<img>タグは、ページに画像を追加するために使われます。src属性は画像のアドレスを指定します。srcで指定された画像を開けない場合、ブラウザは通常、ページ上で画像を表示する場所にalt属性で定義されたテキストを表示します。

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

リンク

ハイパーリンクは<a>タグで表され、href属性がリンク先のアドレスを指定します。<a>タグにはテキストを含めることも、画像を含めることもできます。

<a href="../index.html">サンプル</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

段落と改行

HTML文書は空白文字を無視するため、正常な段落と改行を保証するには、どの文字が同じ段落に属するかを指定する必要があります。これに使うのが<p>タグです。

<p>这是第一段。</p>
<p>这是第二段。</p>

<p>を使わずに<br>を使う人もいます。<br>は改行のみを表し、段落の開始や終了を表さないため、通常は終了タグがありません。

这是第一段。<br>
这是第二段。<br />
这是第三段。

文書を異なる部分の組み合わせとして見なすことがあります。例えば、典型的なページはヘッダー、本体、フッターの3つの部分で構成される場合があります。<div>タグは、異なる部分を示すために専用に使われます。

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

テーブル

HTML文書はブラウザでは通常、左から右へ、上から下へ表示され、ウィンドウの右端に達すると自動的に折り返されます。段組みの効果を実現するために、多くの人がテーブル（<table>）を使ってページレイアウトを行います（HTMLでテーブルが提供された本来の目的はレイアウトではありませんが）。

<table>タグには通常、いくつかの<tr>タグが含まれます。<tr>はテーブルの1行を表します。<tr>タグはさらに<td>タグを含み、各<td>は1つのセルを表します。

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>タグは、<table>内の<thead>、<tbody>、<tfoot>に含まれることもあります。これらはそれぞれ、テーブルヘッダー、テーブル本体、テーブルフッターを表します。Webページを印刷するとき、テーブルが大きくて1ページに収まらない場合、<thead>と<tfoot>は各ページに表示されます。

<th>は<td>と非常に似ており、<tr>の中でも使われます。異なる点は、<th>がそのセルが属する行または列の見出しであることを表すことです。

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

表は二次元データ（行、列）を表すために使用され、一次元データはリストで表されます。リストは、順序なしリスト（<ul>）、順序付きリスト（<ol>）、定義リスト（<dl>）に分類できます。最初の2つのリストはより一般的で、どちらも<li>タグでリスト項目を囲みます。

順序なしリストは、類似した項目の集まりを表し、それらの項目の間に前後関係はありません。

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

順序付きリストでは、各項目の順序が重要であり、ブラウザは通常自動的に番号を付けます。

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

フレーム

最後にフレームについて説明します。かつて非常に人気があった技術で、フレームを使用すると1つのウィンドウに複数のドキュメントを同時に表示できます。メインフレームページには<body>タグがなく、代わりに<frameset>があります。

<frameset>タグの属性RowsとColsは、フレームセット内の行（列）の数と、各行（列）の高さ（幅）を指定するために使用されます。

<frameset>タグは<frame>タグを含むことができ、各<frame>タグは1つのドキュメントを表します（src属性でドキュメントのアドレスを指定します）。

このようなページがまだ十分に複雑でないと感じる場合は、<frameset>タグの中に<frameset>タグを含めることもできます。

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

30分後はどうするか

この記事は、HTMLに触れたことがない人にHTMLの初歩のな印象をとえるためのものであり、多くのことには触れていません。この記事ではHTMLのすべてのタグを列挙しているわけではなく、列挙したタグについてもそのすべての属性を紹介しているわけではありません。また、触れられていないものには、私が非常に重要だと思うCSS、JavaScript、XHTML、XML、Web Standards、およびそれらとHTMLとの関係も含まれます。ただし、これらも30分で学べる可能性は低いですが、幸い、入門さえすれば、オンラインの多くのリソースを利用して学習を続けることができます。もちろん、紙の本があればなお良いです。この点については『HTMLとXHTML权威指南』をお勧めします。以下は私が良いと思うオンラインリソースです：

出典：http://deerchao.net/tutorials/html/html.htm