032.1 レッスン 1

Certificate:

Web開発の要点

Version:

1.0

Topic:

032 HTMLドキュメントマークアップ

Objective:

032.1 HTMLドキュメントの構造

Lesson:

1 of 1

はじめに

HTML（ HyperText Markup Language ）は、Webページの構造や表示方法をWebブラウザに伝えるためのマークアップ言語です。現在のバージョンは、2012年にリリースされた5.0です（2016年にHTML5.1、2017年にHTML5.2、2021年にHTML5からHTML Living Standardへ）。HTMLの文法は World Wide Web Consortium （W3C）によって定義されています。

HTMLは、Webサイトの構造や外観の大部分を定義するもので、Web開発の基本的なスキルです。Web制作の仕事に就きたいと考えているなら、HTMLは間違いなく良いスタートラインに立つことができるでしょう。

HTMLドキュメントの構造

基本的なHTMLページの構造は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>My HTML Page</title>
    <!-- This is the Document Header -->
  </head>

  <body>
    <!-- This is the Document Body -->
  </body>
</html>

それでは、詳しく分析してみましょう。

HTMLタグ

HTMLでは、コンテンツを記述したり、フォーマットするために、要素とタグを使用します。タグは、タグ名を山括弧で囲んだもので、例えば <title> のようになります。タグ名は大文字と小文字を区別しませんが、World Wide Web Consortium (W3C)は、現在のバージョンのHTMLでは小文字の使用を推奨しています。これらのHTMLタグは、HTMLの要素を構築するために使用されます。タグ <title> は、HTMLドキュメントのタイトルを定義するHTML要素の 開始タグ の例です。しかし、要素はさらに2つの要素を持っています。完全な <title> 要素は次のようになります。

<title>My HTML Page</title>

ここでは、My HTML Page が要素の コンテンツ となり、 </title> がこの要素が完了したことを宣言する 閉じタグ となります。

Note	すべてのHTML要素が閉じている必要はありません。そのような場合、空の要素、void要素と呼ばれます。

先ほどの例の他のHTML要素を紹介します。

<html>: HTMLドキュメント全体を囲います。これは、ページを構成するすべてのタグが含まれます。また、このファイルのコンテンツがHTML言語であることも示しています。これに対応する閉じタグは </html> です。
<head>: ページに関するすべてのメタ情報を格納するコンテナです。この要素の対応する閉じタグは </head> です。
<body>: ページのコンテンツとその構造的な表現のためのコンテナです。これに対応する閉じタグは、 </body> です。

<html> 、 <head> 、 <body> 、 <title> タグは、いわゆる スケルトンタグ であり、HTMLドキュメントの基本構造を提供します。特に、これらのタグはWebブラウザにHTMLページを読んでいることを伝えます。

Note	これらのHTML要素のうち、HTMLドキュメントのバリデーション（検証）に必要なのは、 `<title>` タグだけです。

このように、各HTMLページは構造化されたドキュメントであり、ツリーと呼ぶこともできます。ここでは、 <html> 要素がドキュメントのルートを表し、 <head> 要素と <body> 要素が最初のブランチとなります。この例では、要素をネストにすることが可能であることを示しています。例えば、 <title> 要素は <head> 要素の中に入れ子になっていて、さらに <html> 要素の中にもネストされています。

HTMLコードの可読性と保守性を確保するためには、すべてのHTML要素が適切かつ順番に閉じられていることを確認してください。Webブラウザは、Webサイトを期待通りに表示するかもしれませんが、要素とそのタグのネストが正しくない場合、エラーが発生しやすくなります。

最後に、ドキュメント構造例の一番上にある doctype 宣言について、特に言及します。 <!DOCTYPE> は、HTMLタグではなく、ドキュメントで使用されているHTMLのバージョンを指定するWebブラウザ用の命令です。先ほどの基本的なHTMLのドキュメント構造では、 <!DOCTYPE html> が使われていて、このドキュメントではHTML5（2021年にHTML Living Standard）が使われていることを指定しています。

HTMLコメント

HTMLページを作成する際には、コードの読みやすさを向上させたり、大きなコードブロックの目的を説明するために、コードにコメントを挿入することをお勧めします。コメントは、以下の例のように、  タグの間に挿入されます。

<!-- This is a comment. -->

<!--
    This is a
    multiline
    comment.
-->

この例では、HTMLのコメントは一行に収めることもできますが、複数行にまたがることもあることを示しています。いずれにしても、  の間のテキストは、Webブラウザによって無視されるので、HTMLページには表示されないという結果になります。これらのことから、前のセクションで示した基本的なHTMLページは、テキストを表示していないことが推測できます。なぜなら、行の  と  は、単なる2つのコメントだからです。

Warning

コメントはネストできません。

HTMLの属性

HTMLタグには、HTML要素の詳細を指定する1つ以上の属性を含めることができます。2つの属性を持つ単純なタグは、次のような形をしています。

<tag attribute-a="value-a" attribute-b="value-b">

属性は必ず開始タグに設定する必要があります。

属性は、設定されるべきプロパティを示す名前、等号、および引用符の中の希望する値で構成されます。一重引用符と二重引用符はどちらでも構いませんが、プロジェクト全体を通して一重引用符または二重引用符を一貫して使用することをお勧めします。Webブラウザは混合引用符を1つの単位として認識しないため、一つの属性値に一重引用符と二重引用符を混在させないようにすることが重要です。

Note	ある種類の引用符を他の種類の引用符の中に入れても、問題はありません。例えば、属性値に `'` を使用する必要がある場合、その値を `"` で囲むことができます。しかし、値の中で、値を包むのに使ったのと同じタイプの引用符を使いたい場合は、 `"` には `"` を、 `'` には `'` を使う必要があります。

属性は、以下のセクションで説明するように、 コア属性 と 特殊属性 に分類されます。

コア属性

コア属性は、どのようなHTML要素にも使用できる属性です。以下のようなものがあります。

title: 要素の内容を記述します。この値は、ユーザーが要素にカーソルを合わせたときに表示されるツールチップとして表示されることが多いです。
id: ある要素に一意の識別子を関連付けます。この識別子はドキュメント内で一意でなければならず、複数の要素が同じ id を共有している場合、ドキュメントは検証されません。
style: 要素にグラフィックプロパティ（CSSスタイル）を割り当てます。
class: スペースで区切られたクラス名のリストで、要素の1つまたは複数のクラスを指定します。これらのクラスはCSSスタイルシートで参照することができます。
lang: ISO-639規格の2文字の言語コードを用いて、要素のコンテンツの言語を指定します。

Note	開発者は、いわゆる `data-` 属性を定義することによって、要素に関するカスタム情報を保存することができます。この属性は、 `data-additionalinfo` のように、目的の名前の前に `data-` を付けることによって示されます。この属性には、他の属性と同様に値を割り当てることができます。

特殊属性

その他の属性は、各HTML要素に固有のものです。例えば、HTMLの <img> 要素の src 属性は、画像のURLを指定するものです。この他にも様々な属性がありますが、次のレッスンで説明します。

ドキュメントヘッダー

ドキュメントヘッダーは、ページに関するメタ情報を定義するもので、 <head> 要素によって記述されます。デフォルトでは、ドキュメントヘッダー内の情報はWebブラウザでは表示されません。 <head> 要素に、ページに表示される可能性のあるHTML要素を含めることは可能ですが、これは推奨されません。

タイトル

ドキュメントのタイトルは <title> 要素で指定します。タグの間に定義されたタイトルは、Webブラウザのタイトルバーに表示され、ページをブックマークしようとしたときに、ブックマークの候補の名前になります。また、検索エンジンの検索結果にも、ページのタイトルとして表示されます。

この要素の例を以下に示します。

<title>My test page</title>

<title> タグは、すべてのHTML文書で必須であり、各文書の中で一度だけ現れるべきものです。

Note	ドキュメントのタイトルと、ボディに記述されているセクションの見出しを混同しないようにしてください。

メタデータ

<meta> 要素は、HTML文書の内容をさらに詳しく説明するためのメタ情報を指定するために使われます。 <meta> 要素は、いわゆる自己閉塞型の要素で、閉じタグを持たないことを意味します。すべてのHTML要素で有効なコア属性の他に、 <meta> 要素は以下の属性を使用します。

name: この要素にどのようなメタデータが記述されるかを定義します。カスタム定義された任意の値を設定することができますが、一般的に使用される値は author 、 description 、 keywords です。
http-equiv: content 属性の値を表すHTTPヘッダーを提供します。一般的な値は refresh で、これについては後ほど説明します。この属性が設定されている場合、 name 属性は設定してはいけません。
content: name または http-equiv 属性に関連付けられた値を提供します。
charset: HTMLドキュメントの文字エンコーディングを指定します。例えば、 utf-8 とすると、Unicode Transformation Format — 8-bitになります。

作成者、説明、キーワードの追加

<meta> タグを使うと、HTMLページの作成者に関する追加情報を指定したり、ページコンテンツを以下のように記述することができます。

<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">

説明文に、ページの内容に関連する一連のキーワードを入れるようにしましょう。この説明文は、ユーザーが検索エンジンでナビゲートする際に最初に目にすることが多いものです。

また、Webページに関連する追加のキーワードを検索エンジンに提供したい場合は、次の要素を追加することができます。

<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

Note	かつてスパマーは、ページの実際の内容とは関係のない何百ものキーワードや説明文を入力し、人々が検索した言葉とは関係のない検索結果にも表示されるようにしていました。今日では、 `<meta>` タグは二次的な重要性に追いやられており、Webページで扱われているトピックをまとめるためにのみ使用されているため、新しく洗練された検索エンジンのアルゴリズムを誤解させることはできなくなっています。

HTMLページをリダイレクトし、ドキュメントを更新する時間間隔を設定します

下記のように <meta> タグを使って、一定時間後（例えば30秒後）にHTMLページを自動的に更新することができます。

<meta http-equiv="refresh" content="30">

また、以下のコードで、同じ時間が経過した後にWebページを別のWebページにリダイレクトすることもできます。

<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

この例では、ユーザーは30秒後に現在のページから http://www.lpi.org にリダイレクトされます。値は自由に設定できます。例えば、content="0; url=http://www.lpi.org" を指定すると、そのページはすぐにリダイレクトされます。

文字エンコードを指定します

charset 属性は、HTMLドキュメントの文字エンコーディングを指定します。よくある例としては次のとおりです。

<meta charset="utf-8">

この要素は、ドキュメントの文字エンコーディングが utf-8 であることを指定します。 utf-8 は、あらゆる人間の言語のあらゆる文字を実質的に含む、ユニバーサルな文字セットです。したがって、これを使用することで、ISO-8859-1（ラテンアルファベット）などの他の文字セットを使用した場合に生じる可能性のある一部の文字の表示に関する問題を回避することができます。

その他の便利な例

<meta> タグの他の2つの便利な属性は次のとおりです。

サイト訪問者を追跡するためにクッキーの設定（set-cookie）。
ビューポート（Webブラウザのウィンドウ内にあるWebページの表示領域）の制御（viewport）。ビューポートは、ユーザーデバイス（携帯電話やコンピュータなど）の画面サイズに依存します。

しかし、この2つの例は試験の範囲外であり、この研究に興味がある方は別の場所でさらに詳細を勉強してください。

演習

以下の各タグについて、対応する閉じタグを示してください。

<body>

<head>

<html>

<meta>

<title>
タグと要素の違いは何ですか？このエントリーを参考にしてください。

<title>HTML Page Title</title>
コメントを挟むべきタグは何ですか？
属性とは何かを説明し、 <meta> タグの例をいくつか示してください。

発展演習

タイトルは My first HTML document で、本文には Hello World というテキストを含む1つのパラグラフのみを持つ、シンプルなHTMLバージョン5（HTML Living Standard）のドキュメントを作成してください。ボディには段落タグ <p> を使用します。
HTMLドキュメントの作成者( Kevin Author )と説明( This is my first HTML page. )を追加します。
HTMLドキュメントに関連するキーワードとして、 HTML 、 Example 、 Test 、 Metadata を追加します。
ドキュメントのヘッダーに <meta charset="ISO-8859-1"> 要素を追加して、 Hello World のテキストを日本語（ こんにちは世界 ）に変更します。どうなりますか？また、どうすれば問題を解決できますか？
段落のテキストを Hello World に戻した後、30秒後にHTMLページを https://www.google.com にリダイレクトし、ドキュメントのヘッダーにこのことを説明するコメントを追加します。

まとめ

このレッスンでは、次のことを学びました。

HTMLの役割
HTMLの骨格
HTMLの構文（タグ、属性、コメント）について
HTMLのヘッド
メタタグ
簡単なHTMLドキュメントの作成方法

このレッスンでは、以下の用語が取り上げられました。

<!DOCTYPE html>: 宣言タグ
<html>: HTMLページを構成するすべてのタグのコンテナ
<head>: すべてのヘッド要素のコンテナ。
<body>: すべてのボディ要素のコンテナ。
<meta>: HTMLページの付加情報（作成者、説明、文字コードなど）を指定するためのメタデータ用のタグです。

演習の回答

以下の各タグについて、対応する閉じタグを示してください。

<body>

</body>

<head>

</head>

<html>

</html>

<meta>

None

<title>

</title>
タグと要素の違いは何ですか？このエントリーを参考にしてください。

<title>HTML Page Title</title>

HTML要素は、開始タグ、閉じタグ、およびそれらの間のすべてのものから構成されています。HTMLタグは、要素の始まりや終わりを示すのに使われます。したがって、 <title>HTML Page Title</title> はHTML要素であり、 <title> と </title> はそれぞれ開始タグと閉じタグです。
コメントを挟むべきタグは何ですか？

コメントは、  タグの間に挿入され、1行に収めることも、複数行にまたがることもできます。
属性とは何かを説明し、 <meta> タグの例をいくつか示してください。

属性は、HTML要素をより正確に指定するために用いられます。例えば、 <meta> タグでは、 name と content 属性のペアを使って、HTMLページの作成者と説明を追加しています。その代わりに、 charset 属性を使って、HTMLドキュメントの文字エンコーディングを指定することができます。

発展演習の回答

タイトルは My first HTML document で、本文には Hello World というテキストを含む1つのパラグラフのみを持つ、シンプルなHTMLバージョン5（HTML Living Standard）のドキュメントを作成してください。ボディには段落タグ <p> を使用します。
```
<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>
```

HTMLドキュメントの作成者( Kevin Author )と説明( This is my first HTML page. )を追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

HTMLドキュメントに関連するキーワードとして、 HTML 、 Example 、 Test 、 Metadata を追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>

ドキュメントのヘッダーに <meta charset="ISO-8859-1"> 要素を追加して、 Hello World のテキストを日本語（ こんにちは世界 ）に変更します。どうなりますか？また、どうすれば問題を解決できますか？

この例を説明通りに実行すると、日本語のテキストが正しく表示されません。これは、ISO-8859-1がラテンアルファベットの文字エンコーディングであるためです。テキストを表示するには、UTF-8（ <meta charset="utf-8"> ）などを使って、文字エンコーディングを変更する必要があります。

段落のテキストを Hello World に戻した後、30秒後にHTMLページを https://www.google.com にリダイレクトし、ドキュメントのヘッダーにこのことを説明するコメントを追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>My first HTML document</title>
    <meta name="author" content="Kevin Author">
    <meta name="description" content="This is my first HTML page.">
    <meta name="keywords" content="HTML, Example, Test, Metadata">
    <meta charset="utf-8">
    <!-- The page is redirected to Google after 30 seconds -->
    <meta http-equiv="refresh" content="30; url=https://www.google.com">
  </head>

  <body>
    <p>Hello World</p>
  </body>
</html>