032.2 レッスン 1
Certificate: |
Web開発の要点 |
|---|---|
Version: |
1.0 |
Topic: |
032 HTMLドキュメントマークアップ |
Objective: |
032.2 HTMLセマンティクスとドキュメント階層 |
Lesson: |
1 of 1 |
はじめに
前回のレッスンでは、HTMLがWebサイトの内容を意味的に記述することができるマークアップ言語であることを学びました。HTMLドキュメントは、HTML要素 <html> 、 <head> 、 <body> からなる、いわゆるスケルトンを含んでいます。<head> 要素は、Webサイトを訪れた人には見えないHTMLドキュメントのメタ情報のブロックを記述しますが、 <body> 要素は、HTMLドキュメントの構造と内容を定義するために、他の多くの要素を含むことができます。
このレッスンでは、テキストの書式設定、基本的なセマンティックHTML要素とその目的、HTMLドキュメントの構成方法について説明します。ここでは、買い物リストを例に説明します。
|
Note
|
以降のすべてのコード例は、完全なスケルトンを含むHTMLドキュメントの |
テキスト
HTMLでは、要素の外にテキストのブロックがむき出しになっていてはいけません。短い段落であっても、 <p> というHTMLタグで囲むべきで、これは paragraph の略語です。
<p>Short text element spanning only one line.</p>
<p>A text element containing much longer text that may span across multiple lines, depending on the size of the web browser window.</p>このHTMLコードをWebブラウザで開くと、 Figure 1 のような結果が得られます。
Webブラウザのデフォルトでは、読みやすさを向上させるために、 <p> 要素の前行と次行に空行を入れます。このような理由から、 <p> は ブロック要素 と呼ばれています。
見出し
HTMLでは、HTMLドキュメントの内容を記述し、構造化するために、6段階の見出しを定義しています。これらの見出しは、HTMLタグの <h1> 、 <h2> 、 <h3> 、 <h4> 、 <h5> そして <h6> によってマークされています。
<h1>Heading level 1 to uniquely identify the page</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>Webブラウザは、このHTMLコードを Figure 2 のように表示します。
LibreOfficeやMicrosoft Wordなどのワードプロセッサに慣れ親しんでいる方は、HTMLドキュメントでのさまざまなレベルの見出しの使用方法や、Webブラウザでの表示方法にいくつかの共通点があることに気づくかもしれません。デフォルトでは、HTMLはサイズを使って見出しの階層と重要性を示し、各見出しの前後にスペースを加えてコンテンツと視覚的に分離します。
要素 <h1> を使った見出しは、階層の最上位に位置するため、ページの内容を特定する最も重要な見出しとみなされます。これは、前のレッスンで説明した <title> 要素に相当しますが、HTMLドキュメントのコンテンツ内でのことです。後続の見出し要素は、コンテンツをさらに構造化するために使用することができます。見出しのレベルを飛ばさないようにしてください。ドキュメントの階層は、 <h1> で始まり、 <h2> が続き、 <h3> というようになります。コンテンツが必要としない場合は、 <h6> までのすべての見出し要素を使用する必要はありません。
|
Note
|
見出しは、意味的にも視覚的にも、HTMLドキュメントを構造化するための重要なツールです。しかし、見出しは、構造的に重要でないテキストのサイズを大きくするために使われるべきではありません。同じ原理で、短い段落を見出しのように見せるために、太字や斜体にするべきではありません。見出しタグを使用して見出しをマークします。 |
ショッピングリストのHTMLドキュメントを作成するために、そのアウトラインを定義することから始めましょう。 <h1> 要素を作成して、ページのタイトル（ここでは Garden Party ）を入れ、その後に短い情報を <p> 要素で囲みます。さらに、2つの <h2> 要素を使って、2つのコンテンツセクション Agenda と Please bring を紹介します。
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<h2>Please bring</h2>このHTMLコードをWebブラウザで開くと、 Figure 3 のような結果になります。
改行
時には、他の <p> 要素や同様のブロック要素を挿入せずに 改行 を発生させる必要があるかもしれません。そのような場合には、自閉式の <br> 要素を使用することができます。ただし、詩や歌の歌詞、住所などのように、コンテンツに属する改行を挿入する場合にのみ使用してください。内容が意味で区切られている場合は、代わりに <p> 要素を使用するのが良いでしょう。
例えば、先ほどの例の情報段落のテキストを次のように分割することができます。
<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>このHTMLコードをWebブラウザで表示すると、 Figure 4 のような結果になります。
水平線
<hr> 要素は水平線を定義するもので、 水平方向のけい線 とも呼ばれます。デフォルトでは、その親要素の幅全体に渡ります。 <hr> 要素は、コンテンツのテーマ的な変化を定義したり、ドキュメントのセクションを分離するのに役立ちます。この要素は自分で閉じることができるので、閉じタグはありません。
今回の例では、2つの見出しを分けることができます。
<h1>Garden Party</h1>
<p>Invitation to John's garden party on Saturday next week.</p>
<h2>Agenda</h2>
<hr>
<h2>Please bring</h2>Figure 5 がこのコードの結果です。
HTMLリスト
HTMLでは、3種類のリストを定義することができます。
- 順序付きリスト
-
リスト要素の順序が重要な場合
- 順序なしリスト
-
リストの要素の順序が特に重要ではない場合
- 説明リスト
-
ある用語をより詳しく説明する場合
それぞれのリストには、任意の数の リストアイテム が含まれています。ここでは、リストの各タイプについて説明します。
順序付きリスト
HTMLの要素 <ol> で示される 順序付きリスト は、任意の数の リストアイテム を集めたものです。この要素が特別なのは、そのリスト要素の順序が関連しているからです。このことを強調するために、Webブラウザはデフォルトで子リストアイテムの前に数字を表示します。
|
Note
|
|
今回の例では、 <ol> 要素を使って、ガーデンパーティのアジェンダを以下のコードで記入します。
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>このHTMLコードをWebブラウザで表示すると、 Figure 6 のような結果になります。
オプション
この例でわかるように、リストのアイテムには、デフォルトでは1から始まる10進数の番号が付けられています。しかし、 <ol> タグの type 属性を指定することで、この動作を変更することができます。この属性の有効な値は、10進数であれば 1 、大文字であれば A 、小文字であれば a 、ローマ字の大文字の数字であれば I 、ローマ字の小文字の数字であれば i です。
必要であれば、 <ol> タグの start 属性を使って開始値を定義することもできます。start 属性は、 type 属性が異なるタイプのナンバリングを設定していても、常に10進数の数値を取ります。
例えば、先ほどの例の順序付きリストを調整して、次の例のように、リストの項目の前にCから始まる大文字を付けるようにします。
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>Barbecue</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>Webブラウザでは、このHTMLコードは Figure 7 のように表示されます。
また、値を指定しない reversed 属性を記述すると、リストアイテムの順序を逆にすることができます。
|
Note
|
順序付きリストでは、 |
順序なしリスト
順序なしリスト は、順序付きリストのものとは異なり、特別な順序や順番を持たない一連のリストアイテムを含みます。このリストのHTML要素は <ul> です。もう一度言いますが、<li> はそのリストアイテムをマークするためのHTML要素です。
|
Note
|
|
今回の例では、パーティーでゲストに持ってきてもらうアイテムをリストアップするのに、順序なしリストを使うことができます。これを実現するには、次のようなHTMLコードが必要です。
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>このHTMLコードは、Webブラウザ上では Figure 8 のように表示されます。
デフォルトでは、各リストアイテムは円盤状の箇条書きで表現されています。CSSを使って見た目を変更することができますが、これについては後のレッスンで説明します。
ネストリスト
リストは他のリストの中に入れ子にすることができます。例えば、順序付きリストの中に順序なしリストを入れたり、逆に順序なしリストの中に順序付きリストを入れたりすることができます。これを実現するためには、入れ子になったリストはリスト要素 <li> の一部でなければなりません。なぜなら、 <li> は順序なしおよび順序付きリストの唯一有効な子要素だからです。ネストするときは、HTMLタグが重ならないように注意してください。
今回の例では、先に作成したアジェンダの情報を追加することで、以下のようになります。
<h2>Agenda</h2>
<ol type="A" start="3">
<li>Welcome</li>
<li>
Barbecue
<ul>
<li>Vegetables</li>
<li>Meat</li>
<li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li>Fireworks</li>
</ol>Webブラウザでは、 Figure 9 のように表示されます。
さらに言えば、複数の階層を入れ子にすることも可能です。理論的には、いくつのリストをネストしても制限はありません。しかし、これを行う際には、訪問者の読みやすさを考慮してください。
説明リスト
説明リスト は、 <dl> 要素を用いて定義され、 キー と 値 の辞書を表します。キーは説明したい用語や名前で、値は説明文です。説明リストには、単純なキーと値のペアから、広範な定義まで様々あります。
キー（または ターム ）は <dt> 要素で定義され、その説明は <dd> 要素で定義されます。
このような説明リストの例としては、エキゾチックな果物のリストで、それらがどのように見えるかを説明することができます。
<h3>Exotic Fruits</h3>
<dl>
<dt>Banana</dt>
<dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots when
overripe.
</dd>
<dt>Kiwi</dt>
<dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.
</dd>
<dt>Mango</dt>
<dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>Webブラウザでは、 Figure 10 のような結果になります。
|
Note
|
順番付きリストや順番なしリストとは対照的に、説明リストでは、どのようなHTML要素も直接の子として有効です。これにより、要素をグループ化し、CSSを使って別の場所でスタイルを設定することができます。 |
インラインテキストフォーマット
HTMLでは、書式設定要素を使ってテキストの見た目を変えることができます。これらの要素は、 表示要素 または フレーズ要素 に分類されます。
表示要素
基本的な表示要素は、テキストのフォントや外観を変更するもので、 <b> 、 <i> 、 <u> があります。これらの要素はもともと、CSSでテキストを太字や斜体にできるようになる前に定義されたものです。現在では、テキストの見た目を変えるためのより良い方法がありますが、これらの要素も依然目にすることもあります。
太字のテキスト
テキストを太字にするには、以下の例のように、 <b> 要素で囲みます。結果は Figure 11 で表示されます。
This <b>word</b> is bold.
<b> タグを使います。HTML5の仕様では、 <b> 要素は、これ以上適切なタグがない場合にのみ使用することになっています。同じ視覚的な出力を得ることができ、さらにマークされたテキストに意味的な重要性を持たせることができる要素が <strong> です。
斜体のテキスト
テキストをイタリックにするには、以下の例のように、 <i> 要素で囲みます。結果は Figure 12 で表示されます。
This <i>word</i> is in italics.
<i> タグを使います。HTML 5の仕様では、 <i> 要素は、他に適切なタグがない場合にのみ使用することになっています。
下線付きのテキスト
テキストに下線を引くには、以下の例のように、 <u> 要素で囲みます。結果は Figure 13 で表示されます。
This <u>word</u> is underlined.
<u> タグは、テキストに下線を引くのに使われます。HTML 5の仕様では、 <u> 要素は、テキストに下線を引く他の方法がない場合にのみ使用することになっています。CSSにはその代替手段が用意されています。
固定幅または等幅フォント
コンピュータコードの表示によく使われる等幅（固定幅）フォントでテキストを表示するには、以下の例のように、 <tt> 要素を使用します。結果は Figure 14 で表示されます。
This <tt>word</tt> is in fixed-width font.
<tt> タグを使用します。HTML5では <tt> タグはサポートされていません。Webブラウザはこれでも期待通りに表示します。ただし、 <code> 、 <kbd> 、 <var> 、 <samp> など、より適切なタグを使用する必要があります。
フレーズ要素
フレーズ要素は、テキストの見た目を変えるだけでなく、単語やフレーズに意味的な重要性を持たせることができます。フレーズ要素を使用することで、単語を強調したり、重要な単語としてマークすることができます。これらの要素は、表示要素とは対照的に、スクリーン・リーダーによって認識されます。これにより、視覚障害のある訪問者がテキストにアクセスしやすくなり、検索エンジンがページ・コンテンツをよりよく読み、評価できるようになります。このレッスンで使用するフレーズ要素は、 <em> 、 <strong> 、 <code> です。
テキストの強調
テキストを強調するには、次の例のように、 <em> 要素で囲むとよいでしょう。
This <em>word</em> is emphasized.
<em> tag is used to emphasize text.ご覧のように、Webブラウザでは <i> と同じように <em> が表示されますが、 <em> にはフレーズ要素としての意味的な重要性が付加されており、視覚障害者の方のアクセシビリティが向上します。
強い重要性要素
テキストを重要なものとしてマークするには、次の例のように、 <strong> 要素で囲むことができます。結果は Figure 16 に表示されます。
This <strong>word</strong> is important.
<strong> タグは、テキストを重要なものとしてマークするために使われます。ご覧のように、Webブラウザでは <strong> は <b> と同じように表示されますが、 <strong> はフレーズ要素として意味的な重要性が加わり、視覚障害者の方のアクセシビリティを向上させます。
コンピュータコード
コンピュータコードの一部を挿入するには、次の例のように、 <code> 要素で囲みます。その結果、 Figure 17 に表示されます。
The Markdown code <code># Heading</code> creates a heading at the highest level in the hierarchy.
<code> タグは、コンピュータコードの一部を挿入するために使用されます。マークされたテキスト
テキストを蛍光ペンのように黄色の背景で強調したい場合は、以下の例のように <mark> 要素を使用します。結果は Figure 18 で表示されます。
This <mark>word</mark> is highlighted.
<mark> タグは、テキストを黄色の背景でハイライトするのに使われます。HTMLショッピングリストのテキストのフォーマット
これまでの例を参考に、フレーズ要素を挿入してテキストの見た目を変えつつ、意味的な重要性を持たせてみましょう。結果は Figure 19 のようになります。
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
このサンプルHTMLドキュメントでは、ガーデンパーティーそのものに関する最も重要な情報は、 <strong> 要素を使って重要であることを示しています。バーベキューに用意されている食材は、 <em> 要素で強調されています。花火は <mark> 要素を使ってシンプルに強調されています。
演習として、他のテキストにも他のフォーマット要素を使ってフォーマットしてみましょう。
フォーマット済みテキスト
ほとんどのHTML要素では、ホワイトスペースは通常、1つのスペースに縮小されるか、あるいは完全に無視されます。しかし、 <pre> という名前のHTML要素があり、いわゆる フォーマット済みの テキストを定義することができます。この要素の内容は、スペースや改行などのホワイトスペースが保存され、Webブラウザで表示されます。また、 <code> 要素と同様に、テキストは固定幅のフォントで表示されます。
<pre>
field() {
shift $1 ; echo $1
}
</pre>
<pre> HTML要素が空白を保存する方法を示しています。要素のグループ化
慣例により、HTMLの要素は2つのカテゴリーに分けられます。
- ブロックレベルの要素
-
これらは新しい行に表示され、利用可能な幅全体を占めます。すでに説明したブロックレベルの要素の例としては、
<p>、<ol>、<h2>などがあります。 - インラインレベルの要素
-
これらの要素は、他の要素やテキストと同じ行に表示され、その内容に必要なだけのスペースを取ります。インラインレベルの要素の例としては、
<strong>、<em>、<i>などがあります。
|
Note
|
HTML5では、CSSのブロックやインラインボックスとの混同を避けるために、より正確で精密な要素カテゴリを導入しました。ここでは、わかりやすくするために、従来のブロック要素とインライン要素の分類にこだわります。 |
複数の要素をグループ化するための基本的な要素は、 <div> 要素と <span> 要素です。
<div> 要素は、他のHTML要素のためのブロックレベルのコンテナであり、それ自体では意味的な価値を付加しません。この要素を使って、HTMLドキュメントをセクションに分割し、コンテンツを構造化することができます。これは、コードの可読性を高めるためと、後のレッスンで学ぶように、CSSスタイルを要素のグループに適用するためです。
Webブラウザのデフォルトでは、 <div> 要素の前後には必ず改行が入り、それぞれが1行で表示されるようになっています。
一方、 <span> 要素は、HTMLテキストのコンテナとして使用され、一般的には、テキストのより小さな部分にCSSによるスタイルを適用するために、他のインライン要素をグループ化するために使用されます。
<span> 要素は、通常のテキストと同じように動作し、新しい行で始まることはありません。そのため、インライン要素となります。
次の例では、セマンティックな <p> 要素と、グループ化された要素 <div> と <span> の視覚的表現を比較しています。
<p>Text within a paragraph</p>
<p>Another paragraph of text</p>
<hr>
<div>Text wrapped within a <code>div</code> element</div>
<div>Another <code>div</code> element with more text</div>
<hr>
<span>Span content</span>
<span>and more span content</span>このコードをWebブラウザで表示すると、 Figure 21 のようになります。
デフォルトでは、Webブラウザは <p> 要素の前後の行に空行を追加することをすでに説明しました。このスペーシングは、グループ化された要素である <div> と <span> のどちらにも適用されません。しかし、<div> 要素はそれぞれのブロックとしてフォーマットされ、<span> 要素のテキストは同じ行に表示されます。
HTMLページ構造
これまで、Webページのコンテンツを意味的に記述するために、つまりテキストに意味や文脈を伝えるために、HTML要素を使用する方法について説明してきました。もう一つの要素は、Webページの 意味的な構造 、表現やその構造を記述する目的で設計されています。これらの要素はブロック要素であり、視覚的には <div> 要素と同様の動作をします。これらの要素の目的は、ヘッダー、フッター、ページのメインコンテンツなどの明確に定義された領域を指定することで、Webページの意味的な構造を定義することです。これらの要素は、コンテンツを意味的にグループ化することで、検索エンジンやスクリーンリーダーなどのコンピュータでも理解できるようにします。
<header> 要素
<header> 要素は、HTMLドキュメント内の周囲のセマンティック要素への導入情報を含んでいます。ヘッダーは見出しとは異なりますが、ヘッダーはしばしば見出し要素（ <h1> , … , <h6> ）を含みます。
実際には、この要素は、ロゴ入りのバナーなど、ページのヘッダーを表現するために最もよく使用されます。また、以下のような要素のコンテンツを紹介するためにも使われます。 <body> 、 <section> 、 <article> 、 <nav> 、または <aside> です。
ドキュメントは複数の <header> 要素を持つことができますが、 <header> 要素を別の <header> 要素の中に入れ子にすることはできません。また、<footer> 要素を <header> の中で使用することもできません。
例えば、例のドキュメントにページヘッダーを追加するには、次のようにします。
<header>
<h1>Garden Party</h1>
</header>なぜなら、 <h1> は（他のすべての見出し要素と同様に）ブロックレベルの要素であり、それ以上の視覚的なプロパティを持たないからです。
<main> 要素
<main> 要素は、Webページの中心となるコンテンツを格納するためのコンテナです。1つのHTMLドキュメントには、hidden属性が未指定の <main> 要素が1つより多くあってはなりません。
今回のドキュメントの例では、これまでに書いたすべてのHTMLコードは、 <main> 要素の中に置かれます。
<main>
<header>
<h1>Garden Party</h1>
</header>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</main><header> 要素と同様に、 <main> 要素も、この例では視覚的な変化はありません。
<footer> 要素
<footer> 要素は、 <section> 、 <nav> 、 <aside> などの周囲のセマンティック要素に対して、著者情報や連絡先、関連ドキュメントなどの脚注を含んでいます。ドキュメントは複数の <footer> 要素を持つことができ、それによってセマンティック要素をよりよく表現することができます。ただし、 <footer> 要素は別の <footer> 要素の中に入れ子にすることはできませんし、 <footer> の中で <header> 要素を使うこともできません。
今回の例では、次のようにホスト（John）の連絡先情報を追加することができます。
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer><nav> 要素
<nav> 要素は、一連のハイパーリンクを含む、メニューなどの主要なナビゲーションユニットを記述します。
|
Note
|
すべてのハイパーリンクが |
ハイパーリンクについてはまだ説明していないので、このレッスンの例ではナビゲーション要素は含まれていません。
<aside> 要素
<aside> 要素は、メインページのコンテンツの順序の中では必要ではないが、通常は間接的に関連していたり、補足的であったりするコンテンツのためのコンテナです。この要素は、用語集のような副次的な情報を表示するサイドバーによく使われます。
今回の例では、 <aside> 要素を使って、残りのコンテンツとは間接的にしか関係のない住所や旅程の情報を追加することができます。
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside><section> 要素
<section> 要素は、ドキュメント内の論理的なセクションを定義します。このセクションは、周囲のセマンティック要素の一部ですが、章のような独立したコンテンツとしては機能しません。
今回のドキュメント例では、以下の例のように、アジェンダのコンテンツセクションをラップして、リストセクションを持ってくることができます。
<section>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</section>
<hr>
<section>
<header>
<h2>Please bring</h2>
</header>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>この例では、セクションの中にさらに <header> 要素を追加し、各セクションがそれぞれの <header> 要素の中に入るようにしています。
<article> 要素
<article> 要素は、ページの残りの部分とは関係なく、単独で意味を持つ独立したコンテンツを定義します。そのコンテンツは別の文脈で再配布または再利用できる可能性があります。典型的な <article> 要素の例や適した素材としては、ブログの投稿、ショップの商品リスト、商品の広告などが挙げられます。そのため、広告は、それ自体でも、より大きなページの中でも存在することができます。
今回の例では、アジェンダを包んでいる最初の <section> を <article> 要素に置き換えてみましょう。
<article>
<header>
<h2>Agenda</h2>
</header>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>前の例で追加した <header> 要素は、ここでも持続する可能性があります。なぜなら、 <article> 要素は、自分自身の <header> 要素を持つ可能性があるからです。
最後の例
これまでの例をすべて組み合わせると、招待状の最終的なHTML文書は次のようになります。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Garden Party</title>
</head>
<body>
<main>
<h1>Garden Party</h1>
<p>
Invitation to <strong>John's garden party</strong>.<br>
<strong>Saturday, next week.</strong>
</p>
<article>
<h2>Agenda</h2>
<ol>
<li>Welcome</li>
<li>
Barbecue
<ul>
<li><em>Vegetables</em></li>
<li><em>Meat</em></li>
<li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li>
<li><mark>Fireworks</mark></li>
</ol>
</article>
<hr>
<section>
<h2>Please bring</h2>
<ul>
<li>Salad</li>
<li>Drinks</li>
<li>Bread</li>
<li>Snacks</li>
<li>Desserts</li>
</ul>
</section>
</main>
<aside>
<p>
10, Main Street<br>
Newville
</p>
<p>Parking spaces available.</p>
</aside>
<footer>
<p>John Doe</p>
<p>john.doe@example.com</p>
</footer>
</body>
</html>Webブラウザでは、 Figure 22 のようにページ全体がレンダリングされます。
演習
-
以下の各タグについて、対応する閉じタグを示してください。
<h5><br><ol><dd><hr><strong><tt><main> -
次の各タグについて、そのタグがブロック要素とインライン要素のどちらの始まりを示すかを示してください。
<h3><span><b><div><em><dl><li><nav><code><pre> -
HTMLではどのようなリストを作ることができますか？それぞれにどのようなタグを使うべきでしょうか？
-
HTMLページを構成するためのブロック要素を囲むタグは？
発展演習
-
基本的なHTMLページを “フォームルール” というタイトルで作成します。このHTMLページはすべての発展演習に使用し、それぞれの演習は前の演習に基づいて行われます。レベル1の見出しとして、 “リクエストフォームへの記入方法” というテキストを、段落には “HTMLコースの完全版PDF文書を受け取るためには、以下の項目を入力する必要があります。” というテキストを、そして順不同のリストとして次のようなリストアイテムを追加します。 “名前” 、 “姓” 、 “メールアドレス” 、 “国” 、 “地域” 、 “郵便番号” です。
-
最初の3つのフィールド（ “名前” 、 “姓” 、 “メールアドレス” ）を太字にして、意味的な重要性も加えます。そして、レベル2の見出しに “必須項目” というテキストを入れ、パラグラフに “太字の項目は入力必須です” というテキストを入れます。
-
別のレベル2の見出しとして “手順は以下の通りです。” というテキスト、段落に “4つのステップがあります。” というテキスト、そして次のリストアイテムを持つ順序付きリストを追加します。 “項目に入力します。” 、 “送信ボタンをクリックします。” 、 “Eメールを確認し、送られてきたリンクをクリックしてリクエストを確認します。” 、 “メールをチェックしてください - 数分後にHTMLコースのフルバージョンが届きます。” という順序のリストを追加します。
-
<div>を使って、レベル2の見出しで始まる各セクションのブロックを作ります。 -
<div>を使って、レベル1の見出しで始まるセクションのブロックをもう一つ作ります。そして、このセクションと他の2つのセクションを水平線で区切ります。 -
ヘッダー要素には “フォームルール - 2021” というテキストを、フッター要素には “Copyright Note - 2021” というテキストを追加します。最後に、3つの
<div>ブロックを含むmain要素を追加します。
まとめ
このレッスンでは、次のことを学びました。
-
HTML文書のコンテンツのマークアップを作成する方法
-
階層的なHTMLテキスト構造
-
ブロック型とインライン型のHTML要素の違い
-
セマンティックな構造を持つHTML文書の作成方法
このレッスンでは、以下の用語が取り上げられました。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>-
見出しタグ。
<p>-
段落タグ。
<ol>-
順序付きリストタグ。
<ul>-
順序付けされていないリストタグ。
<li>-
リストアイテムタグ。
<dl>-
説明リストのタグです。
<dt>、<dd>-
各用語のタグと説明文のリストです。
<pre>-
フォーマットを保持するタグです。
<b>、<i>、<u>、<tt>、<em>、<strong>、<code>、<mark>-
フォーマットのタグです。
<div>、<span>-
グループ化タグ。
<header>、<main>、<nav>、<aside>、<footer>-
HTMLページに簡単な構造とレイアウトを提供するためのタグです。
演習の回答
-
以下の各タグについて、対応する閉じタグを示してください。
<h5></h5><br>存在しない
<ol></ol><dd></dd><hr>存在しない
<strong></strong><tt></tt><main></main> -
次の各タグについて、そのタグがブロック要素とインライン要素のどちらの始まりを示すかを示してください。
<h3>ブロック要素
<span>インライン要素
<b>インライン要素
<div>ブロック要素
<em>インライン要素
<dl>ブロック要素
<li>ブロック要素
<nav>ブロック要素
<code>インライン要素
<pre>ブロック要素
-
HTMLではどのようなリストを作ることができますか？それぞれにどのようなタグを使うべきでしょうか？
HTMLでは、3種類のリストを作成することができます。それは、番号の付いた一連のリスト項目で構成される順序付きリスト、特別な順序や順番を持たない一連のリスト項目で構成される順序なしリスト、そして、辞書や百科事典のような項目を表す説明リストです。順序付きリストは
<ol>と</ol>のタグで囲まれ、順序なしリストは<ul>と</ul>のタグで囲まれ、説明リストは<dl>と</dl>のタグで囲まれています。また、順序付きリストや順序なしリストの各項目は、<li>と</li>のタグで囲まれ、説明リストの各用語は、<dt>と</dt>のタグで囲まれ、その記述は、<dd>と</dd>のタグで囲まれます。 -
HTMLページを構成するためのブロック要素を囲むタグは？
<header>と</header>タグはページヘッダーを囲みます、<main>と</main>タグはHTMLページのメインコンテンツを囲みます。<nav>と</nav>タグはいわゆるナビゲーションバーを囲みます。<aside>と</aside>タグはサイドバーを囲みます。<footer>と</footer>タグはページフッターを囲みます。
発展演習の回答
-
基本的なHTMLページを “フォームルール” というタイトルで作成します。このHTMLページはすべての発展演習に使用し、それぞれの演習は前の演習に基づいて行われます。レベル1の見出しとして、 “リクエストフォームへの記入方法” というテキストを、段落には “HTMLコースの完全版PDF文書を受け取るためには、以下の項目を入力する必要があります。” というテキストを、そして順不同のリストとして次のようなリストアイテムを追加します。 “名前” 、 “姓” 、 “メールアドレス” 、 “国” 、 “地域” 、 “郵便番号” です。
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li>Name</li> <li>Surname</li> <li>Email Address</li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </body> </html> -
最初の3つのフィールド（ “名前” 、 “姓” 、 “メールアドレス” ）を太字にして、意味的な重要性も加えます。そして、レベル2の見出しに “必須項目” というテキストを入れ、パラグラフに “太字の項目は入力必須です” というテキストを入れます。
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </body> </html> -
別のレベル2の見出しとして “手順は以下の通りです。” というテキスト、段落に “4つのステップがあります。” というテキスト、そして次のリストアイテムを持つ順序付きリストを追加します。 “項目に入力します。” 、 “送信ボタンをクリックします。” 、 “Eメールを確認し、送られてきたリンクをクリックしてリクエストを確認します。” 、 “メールをチェックしてください - 数分後にHTMLコースのフルバージョンが届きます。” という順序のリストを追加します。
<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </body> </html> -
<div>を使って、レベル2の見出しで始まる各セクションのブロックを作ります。<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html> -
<div>を使って、レベル1の見出しで始まるセクションのブロックをもう一つ作ります。そして、このセクションと他の2つのセクションを水平線で区切ります。<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </body> </html> -
ヘッダー要素には “フォームルール - 2021” というテキストを、フッター要素には “Copyright Note - 2021” というテキストを追加します。最後に、3つの
<div>ブロックを含むmain要素を追加します。<!DOCTYPE html> <html> <head> <title>Form Rules</title> </head> <body> <header> <h1>Form Rules - 2021</h1> </header> <main> <div> <h1>How to fill in the request form</h1> <p> To receive the PDF document with the complete HTML course, it is necessary to fill in the following fields: </p> <ul> <li><strong> Name </strong></li> <li><strong> Surname </strong></li> <li><strong> Email Address </strong></li> <li>Nation</li> <li>Country</li> <li>Zip/Postal Code</li> </ul> </div> <hr> <div> <h2>Required fields</h2> <p>Bold fields are mandatory.</p> </div> <div> <h2>Steps to follow</h2> <p>There are four steps to follow:</p> <ol> <li>Fill in the fields</li> <li>Click the Submit button</li> <li> Check your e-mail and confirm your request by clicking on the link you receive </li> <li> Check your e-mail - You will receive the full HTML course in minutes </li> </ol> </div> </main> <footer> <p>Copyright Note - 2021</p> </footer> </body> </html>