HTML の基本1

code, pre { background-color: #eee; } pre { border-left: 6px solid #00458b; font-size: 1rem; line-height: 1.4; margin: 0 0 24px; max-width: 100%; overflow: auto; padding: 24px; width: 100%; }

HTML (Hypertext Markup Language、ハイパーテキスト・マークアップ・ランゲージ)は、 Web サイトのコンテンツに構造を指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。タイトルが示すように、この記事では、HTML とその機能の基本的な理解ができるように説明します。

そもそも HTML とは

HTML はプログラミング言語ではありません。マークアップ言語と言って、コンテンツの構造を決めるものです。 HTML は 要素 の集まりでできています。要素とは様々なコンテンツがどのように見えるか、またどのように動くかを表現するためにタグで囲まれたまとまりです。タグ は言葉や画像を表示したり、他のページに移動するハイパーリンクを作ったり、文字を斜体にしたり、大きくしたり小さくしたり、色々なことが出来ます。例えば、次の文を見てください。

My cat is very grumpy

上の文を単体で表示したいなら、段落タグ (<p>) で文を囲うことでこれが段落であると指定することができます。

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

HTML 要素の中身

この段落要素についてもうちょっと詳しく見ていきましょう。

要素は主に以下のようなもので構成されています:

  1. 開始タグ (opening tag): これは、要素の名前(今回は p)を山括弧で囲ったものです。どこから要素が始まっているのかやどこで効果が始まるのかを表しています。今回の場合どこから段落が始まるかを表しています。
  2. 終了タグ (closing tag): これは、要素名の前にスラッシュが入っていることを除いて開始タグと同じです。どこで要素が終わっているかを表しています。今回の場合どこで段落が終わるかを表しています。終了タグの書き忘れは、初心者のよくある間違いで、正しく表示されません。
  3. コンテンツ (content): 要素の内容です。今回の場合はただの文字です。
  4. 要素 (element): 開始タグ、終了タグ、コンテンツで要素を構成します。

要素は属性 (Attribute)を持つことが出来ます。このような感じです:

属性とは要素に対し実際には表示されない追加情報を含んだものです。ここでは class が属性の名前で editor-note が属性の値です。 class 属性を使って要素に識別するための名前を与えていて、後でこの要素を指定してスタイルをつけたり様々なことができるようになります。

属性は次のような形式です。

  1. 要素名 (すでにいくつか属性がある場合はひとつ前の属性) との間の空白
  2. 属性名とそれに続く等号
  3. 引用符で囲まれた属性の値

メモ: ASCII の空白 (または " ' ` = < > 文字) を含まない単純な属性値は引用符を付けないままにすることができますが、コードの一貫性と理解を容易にするため、すべての属性値を引用することをお勧めします。

要素のネスト

要素の中に他の要素を入れることも出来ます。これをネスト(または入れ子)と言います。もしあなたの猫が「とっても」機嫌が悪いことを表したいとしたら、「とっても」という単語を <strong> 要素に入れて単語の強調を表すことが出来ます。

<p>私のネコは<strong>とっても</strong>機嫌が悪い。</p>

しかしながら要素のネストは正しく行われなければなりません。上記の例ではまず始めに <p> 要素が開始され、その次に <strong> 要素が開始されています。そうしたならば、必ず <strong> 要素、 <p> 要素の順で終了しなければなりません。次の例は間違いです。

<p>私の猫は<strong>とっても機嫌が悪い。</p></strong>

要素は確実に他の要素の中もしくは外で開始し、終了する必要があります。上記の例のように要素が重複してしまうと、 Web ブラウザはあなたがしようとしていたことを推測してもっともよいと思われる解釈をするため、予期せぬ結果になることがあります。そうならないよう気を付けましょう！

空要素

コンテンツを持たない要素もあります。そのような要素を空要素 (empty elements) と呼びます。 <img> 要素を例に見ていきましょう。

<img src="images/firefox-icon.png" alt="My test image">

この要素は 2 つの属性を持っていますが終了タグ </img> はありませんし、内部にコンテンツもありません。これは image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。

HTML 文書の構造

ここまでは HTML 要素についてみてきました。しかし要素単体ではあまり役には立ちません。ここからはどのようにしてそれぞれの要素を組み合わせ、 HTML ページ全体を作っていくのかを勉強していきましょう。ファイルを扱うで出てきた index.html に書いてあるコードをもう一度見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

この中にあるものは以下の通りです。

  • <!DOCTYPE html> — 文書型宣言です。昔々、 HTML がまだ出来たばかりの頃 (1991～2年)、文書型宣言は HTML ページを正しい書き方がなされているかを示すルールセット (自動エラーチェックなどの便利なもの) に関連付けさせる役割を担っていました。しかし、最近ではそのようなことを気にする人はいなくなり、うまく動くために存在するただの遺産となってしまいました。今はこれだけ知っていれば大丈夫です。
  • <html></html> — <html> 要素です。この要素はページのすべてのコンテンツを囲み、ルート要素とも呼ばれます。
  • <head></head> — <head> 要素です。この要素は HTML ページの、閲覧者に向けて表示されないコンテンツをまとめるための入れ物です。<head>要素は検索エンジン向けのキーワードや説明書き、ページの見た目を変更するための CSS、文字コードの情報などを含みます。
  • <meta charset="utf-8"> — この要素は文書に対し文字コードを UTF-8 に設定しています。 UTF-8 には人類が使う言語の殆どの文字が含まれています。基本的には指定することにより文書に書いたテキストコンテンツを扱うことが出来ます。指定しない理由は特に無く、指定することで後から出てくる様々な問題を避けることが出来ます。
  • <title></title> — <title> 要素です。ページのタイトルを指定しています。このタイトルはページが読み込まれた時にブラウザのタブに表示され、ブックマーク（お気に入り）に登録した時の名前にもなります。
  • <body></body> — <body> 要素です。 <body> 要素はページの閲覧者に対して見せたいものすべてを含みます。文字、画像、ビデオ、ゲーム、再生できる音楽など、どんなものでもです。

画像

もう一度 <img> 要素について見ていくことにしましょう。

<img src="images/firefox-icon.png" alt="My test image">

前に説明したように、これは書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ src (source) 属性を指定する事によってその画像を表示できます。

また、 alt (alternative; 代替) 属性も指定しています。これは以下の様な理由で画像を見られない人に向けて文字で説明をするものです。

  1. 目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像の alt 属性の内容を読み上げます。
  2. 何らかの理由で画像の表示に失敗した場合。例えば、 src 属性に指定したパスが間違っていたときなどです。ページを保存したり再読み込みしたりするとこのような本来画像があるべき場所に下記のような何かが表示されるでしょう。

alt 属性の内容は「説明する文」であるということが重要です。代替文は画像が伝えたいことをうまく言い表しているべきです。上の「My test image」はあまり良い例ではありません。 Firefox のロゴの代替文字列として適切なのは、「地球を囲む燃えるような狐の Firefox ロゴ」というようなものです。

あなたが用意した画像に良い代替文字列を付けてみましょう。

注記: アクセシビリティについて詳しくは MDN のアクセシビリティのページを参照してください。

テキストのマークアップ

この章では、文字列をマークアップするために使用する基本的な HTML 要素をいくつか見ていきます。

見出し

見出し要素は文書中の見出し、小見出しを指定することができるものです。通常の書籍でも主題、章題、副題があります。 HTML でも同じことが出来ます。 HTML では <h1> から <h6> の 6段階の見出しが用意されていますが、よく使うのはせいぜい 3 つから 4 つほどでしょう。

<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>

それでは、あなたの HTML の <img> 要素の上に適切なタイトルを付けてみましょう。

メモ: 見出しレベル1には暗黙のスタイルがあることがわかります。テキストを大きくしたり太字にしたりするために見出し要素を使用しないでください。これらはアクセシビリティや SEO などのその他の理由で使用されます。レベルをスキップせずに、ページ上に意味のある一連の見出しを作成してください。

段落

先に説明したように、 <p> 要素は段落を示しています。通常の文章を書く時にはこの要素を頻繁に使うことになるでしょう。

<p>This is a single paragraph</p>

試しに <img> 要素のすぐ下にいくつか段落を作り、文章を書いてみましょう。(文章は Web サイトはどんな見た目にしたいですか？から持ってきても良いです。)

リスト

多くの Web のコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。

  1. 番号なしリストは、お買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは <ul> 要素で囲みます。
  2. 番号付きリストは料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは <ol> 要素で囲みます。

リストの中に入るそれぞれのアイテムは <li> (list item) 要素の中に書きます。

例えば、次の段落の一部をリストにしたい場合、

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

以下のようにマークアップします。

<p>At Mozilla, we’re a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

あなたのページに番号付きリストと番号なしリストを追加してみましょう。

リンクはとても重要です ―― これが Web をひとつの Web にします。リンクを追加するには、シンプルな要素 <a> を使えばよいです。 a は "anchor" を省略したものです。段落中の文字をリンクにするには次の手順で行います。

  1. リンクにしたい文字を選びます。今回は "Mozila Manifesto" を選びました。
  2. 選んだ文字を <a> 要素で囲みます。 
    <a>Mozilla Manifesto</a>
  3. このように <a> 要素に href 属性を追加します。 
    <a href="">Mozilla Manifesto</a>
  4. このリンクがリンクしたい Web アドレスをこの属性の値に書き込みます。 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

アドレスの先頭にある https:// や http:// の部分 (プロトコルと言います) を書き忘れると、予期せぬ結果となってしまうかもしれません。リンクを作ったら、ちゃんとそれが遷移したいところに行ってくれるかを確かめましょう。

href は属性名として変に思うかもしれません。覚えにくかったら、 href は hypertext reference を表しているということを覚えておきましょう。

もしまだやってないのなら、ページにリンクを追加してみましょう。

まとめ

ここまでの説明に沿ってやってきたのなら、下のようなページが出来上がっているはずです (ここでも見られます)。

もし途中で行き詰まってしまったなら、 GitHub にある完成版のコード例と見比べてみてください。

この記事では HTML の表面的な部分だけを勉強しました。もっと知りたい場合は HTML を学ぶを読んでみてくだい。

このモジュール

レッスン