この記事では HTML の絶対的な基本事項をカバーし、始められるようにします。要素・属性・すでに聞いたことのあるようなその他すべての重要用語・それらが HTML でどう使用されるべきか、を明らかにします。また、HTML 要素や典型的な HTML ページがそれぞれどのように構造化されているかを示し、HTML の重要なその他の基本機能を説明します。興味を持ってもらえるように、途中にいくつかのコード例を示すつもりです。

前提条件: 基礎的なコンピューター使用スキル、基本的なソフトウェアがインストールされていることファイル取扱いの基礎理解。
目的: HTML 言語に精通するための基礎の獲得と、いくつかの HTML 要素を書く練習

HTML って何だ?

HTML (ハイパーテキスト・マークアップ・ランゲージ/Hypertext Markup Language) はプログラミング言語ではありません。HTML 言語は、訪れたウェブサイトがどのように構成されるべきかをブラウザーに対して伝えるために使用される、マークアップ言語の一つです。HTML 言語はウェブ開発者が何を望むか次第で、複雑なものにも簡単なものにも成り得ます。HTML は、コンテンツの一部分を特定の方法で表示/動作させるために、それを囲み・改行し・マークアップするために使用する一連の要素によって構成されます。囲みタグは、小さなコンテンツを「ウェブ上の他のページへリンクするためのハイパーリンク」や「イタリック体の単語」などにすることができます。例として、次のコンテンツを見てください:

My cat is very grumpy

この行を独立させたい場合、それを段落タグ (<p>) 要素で囲んで段落指定することで実現できます:

<p>My cat is very grumpy</p>

:HTML の要素は大文字小文字を区別しません。つまり大文字でも小文字でも書くことができます。例えば <title> 要素は <title>, <TITLE>, <Title>, <TiTlE> などと書くことができて、どれも正しく動作します。最も良いのは、一貫性や、信頼性や、その他の理由のためにすべての要素を小文字で書くことです。

HTML の要素を分解してみる

先ほどの段落タグの要素についてもう少し詳しく見ていきましょう:

この私たちの要素の主要な部分は次のとおりです:

  1. 開始タグ(Opening tag): これは要素名 (この場合は p 要素の "p")、そして囲っている開きと閉じの 山括弧で構成されています。これは要素あるいはその効果が開始する場所を宣言しますーこのケースでは段落が始まる場所です。
  2. 終了タグ(Closing tag): これは要素名の前に一つのスラッシュが含まれることを除けば開始タグと同じです。これは要素の終了を宣言しますーこのケースでは段落が終わる場所です。終了タグの記述を失念すると奇妙な結果につながることがありますが、それは初学者にありがちな一般的なミスです。
  3. 内容(Content): これは要素の中身で、上記の例ではテキストそのものです。
  4. 要素(Element): 開始タグ + 内容 + 終了タグは要素になります。

実習: 最初の HTML 要素を作ってみる

以下の Input 欄にある行を <em></em> で囲んでください (要素を開始するために行の先頭に <em> を、要素を終了するために行の末尾に </em> をそれぞれ置きます) — これによりその行はイタリック体 (斜体) によって強調表示されるはずです!この変化は Output 欄でリアルタイムで確認できているはずです。

もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。

要素のネスト

要素の中に要素を入れることができますーこれは“ネスト” (入れ子) と呼ばれています。たとえば “My cat is very grumpy.” と記述したい場合、“very” という語を <strong> 要素で囲むことができ、それはその語がより強く強調表示されることを意味します:

<p>My cat is <strong>very</strong> grumpy.</p>

ただし、要素が正しくネストされていることを確認する必要はあります: 上の例では、開始タグは最初に p 要素、その次に strong 要素が来ますから、終了タグは最初に strong 要素を、一番最後に p 要素を置くことになります。次は間違った例です:

<p>My cat is <strong>very grumpy.</p></strong>

タグのセットが互いに内側か外側なのかがはっきり分かるように、要素の開始と終了は正しく配置する必要があります。もし上の例のように互いに “掛け違って” しまっている場合、ブラウザーはそのマークアップが本来意図していただろうことを出来るだけ読み取ろうとはしますが、予期しない結果となることは当然に想定されます。ですからこうした “掛け違い” はやめましょう!

ブロック要素とインライン要素

HTMLの要素には2つの重要なカテゴリーがあり、それは知っておくべきことです。すなわち、ブロックレベル要素とインライン要素です。

  • ブロックレベル要素はウェブページ上で視認できるブロックを形成します — それらはそれより前にあるいかなるコンテンツに対しても新たな行におけるコンテンツとして表示され、そのブロックの後に来るいかなるコンテンツもまた新たな行で表示されることになります。ブロックレベル要素はそのウェブページの構造、たとえば段落・リスト・ナビゲーションメニュー・フッターなどを表すことに使用される傾向があります。ブロックレベル要素はインライン要素の中にネストされることはできませんが、他のブロックレベル要素にネストされることがあります。
  • インライン要素はブロックレベル要素の中に包含され、なおかつ、段落全体やコンテンツのグループではなく、ドキュメントの内容の小さな部分だけを囲む要素です。インライン要素はドキュメント内に新たな行を表示させません; それらは通常、例えば、<a> 要素 (ハイパーリンク) 又は <em><strong> といった強調要素のように、テキスト段落の中で表示されます。

次の例で考えてみましょう:

<em>first</em><em>second</em><em>third</em>

<p>fourth</p><p>fifth</p><p>sixth</p>

<em> 要素はインライン要素なので、以下で確認できるように、最初の 3 つの要素は同じ行で他の要素と互いにスペースを空けずにたたずんでいます。一方で、<p> 要素はブロックレベル要素なので、各要素はその上下にスペースを伴った新たな行で表示されます (この間隔はブラウザーが段落に対して適用するデフォルトのCSS のスタイルによるものです)。

注意: HTML5 においては要素カテゴリが再定義されています: 要素のコンテンツ・カテゴリーを見てください。これらの定義は従来のものに比べてより正確で、なおかつ曖昧さが少ないものとなっていますが、一方では、それらは “ブロックレベル要素” と “インライン要素” の対比よりも遥かに理解することが難しくなっています。このため、私たちはここのトピックを通じて従来の分類を堅持するつもりです。

注意: このトピックで使っている "ブロック" と "インライン" の用語はCSS ボックスのタイプと同じ名前で混同するでしょう。既定ではこれらは関係ありますが、CSS の表示タイプの変更は要素のカテゴリーを変更しませんし、どの要素が入っているべきでどの要素に入れられるべきかにも影響しません。HTML5 でこの用語が落とされた理由は、このとてもよくある混同を防ぐためです。

注意: ブロックレベル要素とインライン要素のリストを含む有用なリファレンスページがあります — ブロックレベル要素インライン要素をご覧ください。

空要素

全ての要素が上述の開始タグ・コンテンツ・終了タグのパターンに従っているわけではありません。いくつかの要素は 1 つのタグのみで構成され、それは通常、ドキュメント内でそれが含まれている場所に何かを挿入したり埋め込むために使用されます。例えば、以下の <img> 要素はウェブページ上のそれが含まれた場所に 1 つの画像ファイルを埋め込みます:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

これはページに次の画像を出力するはずです:

注意: 空要素 (Empty elements) は Void 要素 (Void elements) と呼ばれていることがあります。

属性

要素は次のように属性(Attribute)を持つこともできます:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

属性は実際のコンテンツの中で表示させたくない「要素に関する追加情報」を保有します。上のケースでは class 属性は、その要素に後でスタイル情報などが適用される対象であることを示すものとして使用できるような、固有の名前を持つことを許容します。

各属性は次の要件を満たす必要があります:

  1. 属性名と要素名の間に 1 つの半角スペース (その要素内にすでに 1 つ以上の属性が設定されている場合は、併せて各属性名の間)
  2. 属性名とそれに続く等号 (=)
  3. 属性値。始端から終端までをクォーテーションマーク (引用符) で囲む

実習: 要素に属性を追加する

要素のもう一つの例として <a> (これを「アンカー」と言って、テキストの一部を囲ってハイパーリンクにするものです) を考えます。アンカー要素は多くの属性を持つことができますが、例えばこれらのものが使われます:

  • href: この属性にはリンクが参照するウェブ上のアドレスを指定します。またはリンクをクリックしたときにブラウザーが遷移する場所のことです。例えば、href="https://www.mozilla.org/" のように指定します。
  • title: この属性にはリンクについての追加情報(リンク先のページが何であるかなど)を記載します。例えば、title="The Mozilla homepage" のように書きます。この内容はリンクにマウスカーソルを重ねた (マウスホバー) 時にツールチップとして表示されるでしょう。
  • target: リンク先の内容を表示する場所 (ブラウジングコンテキスト) を指定します。例えば、target="_blank" と指定すると、リンク先の内容を新しいタブに表示します。現在のタブにリンク先の内容を表示させたい場合はtarget属性を省略します。

それでは以下の Input 欄にある <p> 要素にあなたの好きなサイトのリンクを貼ってみましょう。まず、<p> 要素を <a> タグで囲います。次に、<a> 要素に href 属性と title 属性を追加します。最後に、新しいタブでリンク先を開くために target 属性を追加します。この変化は Output 欄でリアルタイムで確認できているはずです。まずテキストがハイパーリンクに変わります。そのリンクをホバーしてやる (マウスホバー) と title 属性のコンテンツが表示されます。そのリンクをクリックすると href 属性で指定したページに遷移します。要素名と各属性の間に半角スペースを挿入することに気を付けてください。

もし入力ミスをしても、Reset ボタンを押すことでいつでもリセットできます。立ち往生してしまっても Show solution ボタンを押せばいつでもカンニングできます。

論理属性

沢山の HTML ソースを見ていくうちに、属性値のない属性を発見するでしょう。このことは文法的に許されています。こういった属性のことを「論理属性」と言います。論理属性は一般的に属性名と同じ属性値だけを取ることができます。例えば、input 要素の disabled 属性は論理属性ですが、下記のように記述した場合、 input 要素が "使用不可能に" (disabled, グレーアウト表示) なり、データを入力することができなくなります。

<input type="text" disabled="disabled">

論理属性は、略記法として次のように書くことが文法的に許されています。比較のために "使用不可能に" (disabled, グレーアウト表示) しなかった場合の input 要素も併記しています。

<input type="text" disabled>

<input type="text">

上記のHTMLコードの結果は下記のようになります。

訳者注:下記の様な論理属性の属性名と属性値を一致させない記述は HTML の仕様としては誤りです。このような誤りを防ぐために、論理属性の論理値は必ず省略するようにしましょう。

<input type="text" disabled="foo bar baz">

属性値のクォーテーションマークを省略することについて

ウェブ (正式にはワールド・ワイド・ウェブ) 上の HTML 文章の中には奇妙なマークアップスタイルで記述されているものもあります。その一つとして、「属性値をクォーテーションマークで囲まない」というのがあります。このスタイルでは正しく動作する場合としない場合があります。先ほどの <a> タグの例で言うと、このような基本的な使い方では正しく動作します。

<a href=https://www.mozilla.org/>favourite website</a>

しかし、例えば次のように半角スペースの入った title 属性を追加すると動作がおかしくなります。

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

この場合だと「title 属性は "The" という属性値を持ち、それとは別に <a>要素が Mozillahomepage という論理属性を持つ」というようにブラウザーは誤解します。このように、「属性値をクォーテーションマークで囲まない」ことによる違いは HTML を見ただけでは分からないので、コードのエラーや予期しない動作の原因となります。このコードをブラウザーに解釈させたものを下に用意しましたので、このリンクをホバーしてツールチップに表示される文字がどうなっているかを確認してみましょう。

安全なコードを書くために、必ず属性値にはクォーテーションマークをつけましょう。そうすれば、先ほどのような問題を避けることができ、コードの可読性も向上します。

ダブルクォートかシングルクォートか?

HTML で使用できるクォーテーションマーク (引用符) には、ダブルクォート ( " ) とシングルクォート ( ' ) があります。この記事ではクォーテーションマークとしてダブルクォートを使用しています。これは書き方の問題なので、属性値はダブルクォートで囲ってもシングルクォートで囲っても構いません。例えば次の 2 つの行は等価です。

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

但し、ダブルクォートとシングルクォートを混在させて使うことはできません。次の記述は誤りです。

<a href="http://www.example.com'>A link to my example.</a>

属性値をダブルクォートで囲っている場合は、その内部でシングルクォートを書くこともできますし、シングルクォートの中でダブルクォートを書くこともできます。

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

属性値をダブルクォートで囲っているときに内部でダブルクォートを書きたい場合、または、シングルクォートの中でシングルクォートを書きたい場合は後で説明する HTML エンティティを使用します。

HTML 文書の構成

これまで、個々の HTML の要素の基礎を説明しましたが、それら単体ではあまり有用ではありません。ここでは個々の HTML の要素を使って HTML ページを構成する方法を説明していきます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

上記の HTML 文書を例に、順に解説していきます。

  1. <!DOCTYPE html>: いわゆる "doctype" というものです。 HTML の黎明期(1991~1992年あたり)には、 "doctype" というものは HTML の文法セットへのリンクとしての役割を持っていました。当時の "doctype" の記述は自動エラーチェックが容易であるなどの長所も持っていました。当時の "doctype" は、次のようなものでした。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    しかし、今日においては誰も HTML における "doctype" の本来的な役割なんて考えていません。 "doctype" はつじつま合わせのための歴史的な産物です。今日においてには <!DOCTYPE html> は正しい "doctype" と認識させるための最も簡潔な記述です。 "doctype" について、これ以上知る必要はありません。

  2. <html></html>: <html> 要素。 HTML 文書は<html>要素 1 つだけからなります。この要素はページ全体であり、<html> タグはページ全体を囲んでいます。<html> 要素はルート要素とも呼ばれます。
  3. <head></head>: <head> 要素。この要素は、HTML ページの要素のうち、ページの見た目に反映させたくない要素を記述するためのもので、<head> 要素の中にそれらを記述します。例えば、検索エンジンや SNS などのウェブサイトにこのサイトのキーワードや要約を教えるための要素を記述することがあります。また、ページのスタイルを指定するための CSS を読み込むための要素や文字エンコーディングの宣言をするための要素などを記述することもあります。<head> 要素の中に記述する要素については、このシリーズの次の記事で詳しく説明します。
  4. <meta charset="utf-8">: この要素はこの文書が UTF-8 という文字コードを使用しているということをブラウザーに伝えるためのものです。UTF-8 は世界中の自然言語の大半をカバーしている文字コードです。文字コードとして UTF-8 を指定しておけば、後で説明する問題のいくつかを回避することができます。
  5. <title></title>: <title> 要素。<title> 要素の中にこのページのタイトルを書きます。<title> 要素の中身はページが読み込まれたブラウザーのタブに表示されます。また、このページをブラウザー上でブックマークしたりお気に入りに追加したりすると <title> 要素の内容がページのタイトルとして使われます。
  6. <body></body>: <body> 要素。この中にページで表示したいコンテンツ (例えば、テキスト、画像、ビデオ、ゲーム、オーディオトラック等) を記述します。

訳者注: 1. の "doctype" は文書型宣言(DTD)と呼ばれております。 HTML 以外のマークアップ言語(XML, SVG, MathML等)においては今日においても重要な意味を持っています。

実習: HTML 文書をカスタマイズする

もし HTML 文書を書く練習をローカルコンピュータで試したい場合は、次のようにします。

  1. 上記の HTML ページのコードサンプル(10行)の全体を選択して「コピー」の操作を行います。
  2. テキストエディタ上で新規ファイルを作成します。
  3. 新規テキストファイルの中で「貼り付け」、または「ペースト」の操作を行います。
  4. index.htmlという名前で保存します。

脚注: 元となる HTML テンプレートは MDN ラーニングエリア GitHub リポジトリ にも置いてあります。

index.htmlを開いたり、ウェブブラウザーにindex.htmlをドラッグアンドドロップすることでレンダリングされた HTML 文書が表示されます。コードを編集した場合は、ブラウザー上でページの更新 (または、再読み込み) を行うと編集結果が反映されます。オリジナルの HTML ファイルを表示するとこのような見た目になります。

A simple HTML page that says This is my pageこの実習では、 HTML ファイルを作成することでもコード編集をおこなうことができますが、この節の下の方に編集できるフォーム (Input, Outputと付されているものです) を使うこともできます。スマートフォンなどで学習する際はこのフォームが役に立つと思います。この節のフォームの Input の部分は、 <body> 要素の中身を表しています。以下の手順を踏んで、ページをカスタマイズしてみましょう。

訳者注: 下記の演習項目は後で詳しく学習できますので、できなくても構いません。

  • <body> 要素の開始タグ以降にページのメインタイトルを書きます。このメインタイトルは<h1>開始タグと</h1>終了タグで囲みます。ちなみにこれはhead要素の中に記述するtitle要素とは異なります。実際にやってみると理解できると思います。フォームで編集する場合はすでにbody要素の中なので、コードの先頭にメインタイトルを記述する形になります。
  • すでに<p>要素が記述されていますので、その段落を好きな内容にしてみましょう。また、新しい段落を好きなように追加してみましょう。
  • 段落 (<p>要素) 内で重要な言葉は<strong>開始タグと</strong>終了タグで囲って太字で強調しましょう。
  • この記事の前半あたりで説明したリンクを段落のどれかに貼ってみましょう。
  • この記事の前半あたりで説明した方法を使って、段落の下に画像を挿入しましょう。説明では Firefox のロゴ画像を使用しましたが、他の画像を持ってくることにチャレンジしてもいいと思います。自分のコンピュータの中のファイルやウェブ上のどこか他の場所にある画像リンクといったものです。

間違えた場合は Reset ボタンを押すことで元に戻すことができます。分からない場合は Show solution ボタンを押して答えを見てみましょう。

HTML 内の空白

上記の例において、大量の半角スペースが挿入されていることに気づいたかもしれません。大量の半角スペースはあっても無くても構わないものです。次の2つのコードスニペット (それ単体では動作しないコード例のこと) は等価です。

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

半角スペースをどれ程入力しても (そして、どれ程改行しても)、 HTML パーサはそれを1つの半角スペースとして認識します。ではどうして半角スペースを沢山入力するのでしょうか。それは HTML コードの可読性を向上させるためです。 HTML のコードがいいフォーマット(書式)で記述されていて、1行の中に沢山タグを詰め込まなければ、そのコードの中がどうなっているかが分かりやすくなります。この記事ではインデント(字下げ)として半角スペース2文字分を挿入しています。 HTML のフォーマット(例えば、インデントとして半角スペース何文字分を挿入するのか等)については HTML の書き手によって様々ですが、フォーマットを意識して記述しなければなりません。

訳者注: 全角スペースは、 HTML の文法としては半角スペースや改行とは全く異なる扱いになるので、全角スペースを用いてインデントを行ったりしないでください。また、日本語の文章を段落要素<p>の中で改行すると、半角スペースが挿入されます。

<p>私は日本人です。
四季を好みます。</p>

従って、段落要素(<p>)の中では一切改行はしないでください。ただ、長い文章では段落要素の中身が横に長くなってしまいます。その場合は、テキストエディタで「右端で折り返す」などの設定を行ってみてください。

<p>私は日本人です。四季を好みます。</p>

段落要素の中で改行したい場合は、改行要素<br>を用います(文章内の会話や、詩などに用います)。

<p>彼は言いました。<br>
「私は日本人です。四季を好みます。」<br>
私は彼の発した突然の一言にはっと驚きました。</p>

実体参照: HTML に特殊文字を含める

 

訳者注: HTMLエンティティ、実体参照、文字参照、文字実体参照、は、それぞれほぼ同じ意味で用いられます。

HTML では<>"'&の5つの文字は特殊文字と呼ばれています。これら5つの文字は HTML のコードを記述するために使います。ではこれらの文字そのものを組版したい場合はどうすればいいのでしょうか。例えば「 You & Me 」や「 x < y 」等の表記をしたい場合です。

そのような場合は、「文字参照」を使用する必要があります。文字参照とは「文字を表す特別なコード」のことであり、これを使うことで正確な組版を行うことができます。文字参照は必ずアンパサンド (&) で始まり、セミコロン(;)で終わります。

実際の文字 等価な文字参照
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

次の例では Web 技術について記述している段落要素を2つ並べています。 

間違ったコード
<p>HTML では、<p>要素で段落を定義します。</p>
正しいコード
<p>HTML では、&lt;p&gt;要素で段落を定義します。</p>

上記の例をブラウザに解釈させたものを下記に出力しています。1つ目の段落の出力が間違っていることが分かるかと思います。<p>を新しい段落の始まりとして認識しているためです。2つ目の段落は正しく出力されています。文字参照を山括弧(<>)に置き換えているためです。

間違ったコードの出力

正しいコードの出力

脚注: HTML で使用することのできる文字実体参照のリストはこの Wikipedia の記事で確認することができます: List of XML and HTML character entity references.

HTMLにおけるコメント

大抵のプログラミング言語同様、HTML においてもコード内にコメントを書くことができます。コメントはブラウザによって無視されるので、組版には反映されません。コメントの目的としては、 HTML コードがどのように動作するのかをメモとして残しておくことや、コードの分け目を明示することなどがあげられます。コメントは、 HTML のコードを書いて半年以上経ってから自分で見返した時に大変有用となります。もし HTML コードの中に全くコメントが無ければ、以前自分が何をしたのかを思い出すことができないでしょう。また、自分のコードを他の人に読んでもらう時にも有用です。

HTML ファイル内の一部をコメントにするには、その箇所を<!---->で囲います。例えば次のような感じです。

<p>私はコメントの外にいます。</p>

<!-- <p>私はコメントの中にいます。</p> -->

下記を見ると、最初の段落は表示されますが、次の段落は表示されないことが分かります。

要約

この記事の最後にたどり着きました — HTML のほんの初歩のツアーを楽しんでこられたことを望んでいます!ここではこの言語がどのようなものか、基本的にどうやって動作するのかを理解し、いくつかの要素と属性を書くことができるようになったでしょう。あなたがいる場所は完璧な場所です、続きの記事ではすでに見てきたことをもっと詳細に経験して、いくつか新しい言語機能を紹介します。引き続き注目!

脚注: さて、 HTML についてより深く学習するために CSS (Cascading Style Sheets)の基礎についても理解しておきましょう。 CSS は Web ページのスタイルをカスタマイズするために使用します。具体的には、テキストのフォントや色を変えたり、ページレイアウトを設定したりといったことがあげられます。 HTML と CSS は相互補完、つまり2つで1つです。両方学習するとすぐ気づくでしょう。

関連情報

 

このモジュール内

ドキュメントのタグと貢献者

 このページの貢献者: Uemmra3, haruo-wakakusa, dskmori, hamasaki, karaage-kun, contvel, chrischung
 最終更新者: Uemmra3,