HTMLの基本

« 前のページ次のページ »

Hypertext Markup Language (HTML、ハイパーテキスト・マークアップ・ランゲージ)は、Webサイトのコンテンツに構造を指定して、それぞれの部分がどういう意味や目的を持っているのかを指定するために使うコードです。具体的に言うと、構造というのは、段落や箇条書きのリスト、画像、テーブルなどのようなものです。この記事では、分からなくならないように、HTMLに親しめるように丁寧に説明します。

そもそもHTMLってなに?

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

My cat is very grumpy

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

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

HTML要素の中身

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

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

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

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

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

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

要素名(すでのいくつか属性がある場合はひとつ前の属性)との間のスペース
属性名とそれに続く等号
クォーテーションで囲まれた属性の値

要素のネスト

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

画像

もう一度image要素について見ていくことにしましょう:

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

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

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

目が不自由な人。著しく目の不自由な人はよくスクリーンリーダーと呼ばれるツールを使っていて、それは画像のalt属性の内容を読み上げます。
何らかの理由で画像の表示に失敗した場合。例えば、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>要素の上に適切なタイトルを付けてみましょう。

段落

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

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

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

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

番号なしリストはお買い物リストのようにアイテムの順番が特に関係ない時に使います。番号なしリストは<ul>要素で囲みます。
番号付きリストは料理のレシピのようにアイテムの順番が関係ある時に使います。番号付きリストは<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”を省略したものです。段落中の文字をリンクにするには次の手順で行います。

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

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

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

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

まとめ

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

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

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

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