Visual Basic 中学校 HTML講座
 

Visual Basic 中学校 > HTML講座 >

第２回　HTMLの構造

この記事が対象とする仕様

  HTML5 HTML構文 ◎ 対象です。
  HTML5 XHTML構文 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.1 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  XHTML 1.0 △ 対象外ですが、HTML5 HTML構文に対する補足としてふれる場合があります。
  HTML 4.01 ○ 対象ですが、HTML5に対する補足としてふれています。

 

概要

・HTMLはあらかじめ定義されている何十種類かの要素から成り立つ。

・要素を表現するにはタグを使う。

・タグは <要素名> </要素名> <要素名/> の３種類があり、それぞれ開始タグ、終了タグ、空要素タグと呼ぶ。

・要素には属性を使って追加の情報を表記できる。

１．学習の方法

今回はHTMLの構文や要素の通してHTMLの構造を説明します。

一番良い学習方法はただそれを読むだけではなく実際に試してみることです。読むことと実践することは雲泥の差です。

参考：論語 学而「学而時習之不亦説乎」

 

まずは実際に試すための手順を説明します。

 

手順１．フォルダー作成

HTMLを実際に試すために学習用のフォルダーを１つ用意して下さい。統一するためにこのフォルダーの名前は「HTMLSession」とします。

 

手順２．HTMLファイルを作成

次にメモ帳を開いて次の内容を記述してください。

<!DOCTYPE html>
<html>
<head><title>HTMLの勉強</title></head>
<body>
<p>こんにちは、HTML!</p>
</body>
</html>

このファイルをHTMLSessionフォルダーに保存します。

保存後、フォルダーの中のファイルを右クリックし、「名前の変更」でテキストファイルの名前を「test.htm」としてください。(ファイルをクリックして F2 を押すだけでも名前の変更ができます。)

ここでは拡張子htmが非常に重要です。もし、あなたのWindowsが拡張子を表示しない設定になっているのであれば拡張子を表示する設定に変更して、正しく拡張子がhtmに置き換わっていることを確認してください。

見た目の文字だけtest.htmにしても、実際にはtest.htm.txtという名前になっている場合があります。ファイルを右クリックしてプロパティの詳細でファイル名を確認すれば実際のファイル名を見ることができます。

 

手順３．表示確認

名前を変更したら、そのファイルをダブルクリックしてください。Webブラウザーが起動してHTML文書の内容が表示されれば成功です。これであなたは好きなHTMLを実際に書いて表示してみることができるようになりました。

HTMLの内容を編集するには、メモ帳を開いて[ファイル] - [開く]でこのtest.htmを選択します。

いちいちメモ帳を開いたり閉じたりするのが面倒な場合は、メモ帳でtest.htmを開いたままにしておいてもよいです。

 

なお、HTMLが正しい書き方になっているか確認するツールがWeb上で簡単に利用できます。

http://qa-dev.w3.org/wmvs/HEAD/#validate_by_input+with_options

Webブラウザーは多少HTMLの書き方が間違っていても表示してくれる場合が多いので、Webブラウザーで表示されるからと言って正しいHTMLになっているとは限りません。

 

２．HTMLの構造

２−１．HTMLの大構造

HTML文書は、HTML文書であることを示すDOCTYPE宣言、HTML文書の本体を示すhtml要素から成り立ちます。

HTML文書の大構造

 

DOCTYPE宣言

その文書が何のルール(仕様)に準拠しているかを示します。この宣言は必ず先頭に書きます。Webブラウザーなどのユーザーエージェントはこの宣言を見て、2行目以降に記述されている内容を解釈する方法を切り替えます。

 

html要素は必ず１つのhead要素と１つのbody要素から成り立ちます。

html要素の構造

head要素

そのhtml文書自体に関する情報を示します。これには文字コードをはじめとし、Webブラウザーがそのhtml文書をどのように扱うべきかという情報を含みます。html文書のタイトルもこの情報の１つです。

body要素

html文書の内容を示します。これは本文でありユーザーの目に見える部分です。

参考

HTML5 4.2.1「The head element represents a collection of metadata for the Document.」

HTML5 4.4.1「The body element represents the main content of the document.」

 

html要素がその中にhead要素とbody要素を含むように、HTMLでは要素の中に要素を含む入れ子の構造がありえます。

入れ子の構造はこのほかにも無数に登場しまが、どの要素がどの要素を含むことができるかは決まっており、たとえばhead要素の中にbody要素を含むのは誤りです。

 

２−２．DOCTYPE宣言

 

HTML5のHTML文書であることを示すためのDOCTYPE宣言は次の通りです。

<!DOCTYPE html>

DOCTYPE宣言では大文字と小文字を区別しませんが、この例のような書き方が一般的です。

参考資料

 

２−３．タグ

 

２−３−１．要素の表記法

HTMLでは要素を表すのにタグを使います。html要素を表すにはhtmlタグを、body要素を表すにはbodyタグを使います。このように要素とタグは１対１で結びついています。

タグには開始タグと終了タグ(閉じタグとも呼びます)と空要素タグの３種類があり、次の表のように書きます。

タグの種類 書き方 例
開始タグ <要素名> <head>
終了タグ </要素名> </head>
空要素タグ <要素名/> <br/>

 

ほとんどの要素は内容を開始タグと終了タグのペアではさんで表現します。

文書のタイトルを示すtitle要素の例：

<title>吾輩は猫である</title>

 

要素の中には必ず内容が空になる空要素が１６種類あるので、これら空要素をの場合は開始タグだけを使います。終了タグを使ってはいけません。

改行を示すbr要素の例：

<br>

 

空要素タグはXHTMLとのつじつまを合わせるために用意されており通常は使用しません。空要素専用の表現方法です。

参考

空要素の一覧 HTML5 8.1.2 Void elemnts

 

２−３−２．終了タグの省略

一部のタグでは次の要素の開始をもって終了タグの位置が自動的に決まるため、終了タグを省略することができます。

たとえば、段落を表すp要素では、次のp要素が開始すれば直前のp要素が終了することが明らかなので終了タグを省略できます。

終了タグを省略する例を次に示します。

<p>新しい段落<p>次の段落

省略せずに書く場合は次のようになります。

<p>新しい段落</p><p>次の段落</p>

どちらも正しい書き方ですが、p要素の場合省略しないで書く人が大多数のようです。

 

２−３−３．小文字

HTMLのタグはすべて小文字で書くようにしましょう。

HTMLだけ見れば大文字でも小文字でもどちらでもよく自由に書くことができますが、XHTML1.0では小文字で書くことが決まっているためそれに合わせておくのが良いでしょう。

参考

XHTML1.0 4.2 「Element and attribute names must be in lower case」

著者注：HTML5のXHTML構文でも小文字で書くことが決まっていると思いますが仕様書上で明記されている個所が見つけられませんでした。

 

２−３−４．入れ子

入れ子になっている要素はタグを入れ子にして表現します。

例

<html><head></head></html>

タグが入れ子になっているとき、外側のタグを親タグ、内側のタグを子供と呼ぶ場合があります。この表現を使うとheadタグの親タグはhtmlタグです。入れ子が二重三重になっている場合、孫タグ、子孫タグ、先祖のような呼び方をします。

メモ メモ  -  先祖タグ

入れ子が二重三重になっている場合、孫タグ、子孫タグ、先祖タグのような呼び方をします。「先祖タグ」(ancestor tag)という言葉はHTML5の仕様書内で随所に使われていますが、日本語では慣用ですべて「親タグ」と表現してしまうことが多いようです。

入れ子は外側のタグが内側のタグを完全に含んでいなければならず次のように書くことはできません。

例：ダメな例

<html><head></html></head>

また、親子関係になれるタグはあらかじめ決まっており、たとえば、html要素をhead要素の子供にすることはできません。

 

例題

html要素ははじめにhead要素を含み、次にbody要素を含む。head要素はtitle要素を含みます。

タグを使ってこの構造をHTML文書として書いてください。

 

解答

<!DOCTYPE html>
<html>
<head><title></title></head>
<body></body>
</html>

 

解説

HTML文書は必ず先頭に<!DOCTYPE html>を記述します。これがなければHTML文書ではありません。

html要素は全体を含むので全体を大きくはさみます。head要素はtitle要素を含むのでtitle要素をはさみます。body要素はhead要素の次に書く必要がありますが、head要素とbody要素は親子関係になく互いに独立しています。

 

２−４．最小のHTML

 

html要素と、head要素とbody要素はHTML文書の中に必ず存在するので開始タグと終了タグの両方を省略することができます。ただし、head要素には必ずtitle要素を含む必要があり、title要素は省略できません。

そのため 内容を含まない最小限のHTMLは次の通りです。

<!DOCTYPE html>
<title></title>

 

しかし、一般的にはhtmlタグ、headタグ、bodyタグを省略しないで書く場合が多いです。

<!DOCTYPE html>
<html>
<head><title></title></head>
<body></body>
</html>

この講座ではhtmlタグ、headタグ,bodyタグの３つを省略しないで書くようにします。

省略された状態に慣れるよりも省略しない状態に慣れた方が応用が利くし、多くのWebサイトではこれらのタグを省略していないからです。

 

課題１

題材の文章をHTML文書にしてください。

そのままHTMLにすると改行がなくなってしまいますが、ここではそれでよいです。

題材

しょうゆ工場の感想

  ぼくは野田市にあるしょうゆ工場を見学に行きました。はじめはいいにおいがにしていましたが、工場の中を進むにつれてにおいがすごくつよくなって、死ぬかと思いました。帰りにはおみやげにしょうゆをもらいました。
  ぼくはよい止めのくすりを飲み忘れたので帰りのバスの中でも気持ち悪くなって死ぬかと思いました。
「しょうゆのにおいすごかったね。」とバスの中で少し話をすると、
「マスクしてたから大丈夫。」
「いいにおいだったよね。」と言っている人もいました。

しょうゆのにおいが思い出されますね。酔い止めは忘れないようにしましょう。

 

解答

 

解答できたら実際に表示してどのように見えるか確認してみましょう。

 

 

２−５．要素の種類

 

HTMLでは数十種類の要素が定義されています。要素は自分で新しく作ることはできず、決められたものを決められた意味で使用します。

参考：要素の一覧

HTML5 Index - Elements http://www.w3.org/TR/html5/index.html#elements-1

HTML4 Index Of Elements http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

 

要素の例

要素 意味
title HTML文書のタイトルを示します。
b 注意をひきつけたい箇所を示します。
p 段落を示します。
br 改行を示します。
h1 最高レベルのサブタイトルを示します。
hr 主題が変化したことを示します。(※)

参考

b要素の意味：HTML5Diff 3.3

hr要素の意味：HTML5 4.5.2「The hr element represents a paragraph-level thematic break」

 

課題２

課題１の解答に段落を示すタグを追加してください。

段落は４つからなり、それぞれのはじまりは、「ぼくは野田市に…」、「ぼくはよい止めの…」、「「しょうゆのにおいすごかった…」、「しょうゆのにおいが思い出され…」です。

解答

解答できたら実際に表示してどのように見えるか確認してみましょう。

 

課題３

・課題２の解答に改行を示すタグを追加して、会話の鍵かっこが必ず先頭にくるようにしてください。

・最後の1行は先生のコメントです。ここでは主題が変わったことを示してください。

解答

 

課題４

・ 課題３の解答に追加して、この作文の作者が注意をひきつけたいと考えている個所を示してください。

解答

 

２−６．属性

 

２−６−１．属性の概要

要素には「属性」と呼ばれる付加情報を書くこともできます。たとえば、title属性は要素の補足説明を付加します。

次の例はh1要素に補足説明を付加します。

<h1 title="ドビュッシーのピアノ曲について">グラドゥス・アド・パルナッスム博士</h1>

ほどんどのWebブラウザーではtitle属性をマウスを要素の上に持ってきたときに表示されるヒントとして表示します。

 

次の例はハイパーリンクを表すa要素にhref属性を使ってリンク先のURLを指定しています。

<a href="http://www.kantei.go.jp/">首相官邸</a>

 

２−６−２．属性の構文

属性は開始タグの中で要素名にスペースをはさんで続けて書きます。多くの属性には値を指定する必要があり。値は属性名に=をつなげて " または ' で囲んで指定します。値がない属性もあります。

<要素名 属性名="属性の値">....</要素名>

参考

 

属性は１つの要素に複数つけることもできます。複数指定する場合の属性の順番に決まりはありません。

<要素名 属性名1="属性1の値" 属性名2="属性2の値">....</要素名>

 

２−６−３．属性の定義

属性の名前はあからじめ決まっており、data-から始まるものを除くと、自分で新しい属性を作ることはできません。どの要素にどの属性を指定できるかもあらかじめ決まっています。

data-を使って自分で作った属性は、別途スクリプトやプログラムを作ってそれと連携させるシステム開発者向けのものであって、属性だけhtmlに埋め込んでもユーザーエージェントからは無視されます。

 

課題５

・ 課題４の解答に追加して、この文書の一番下に原稿用紙の使い方のWebサイトとWikipediaの「醤油」の項目へのリンクを追加してください。

原稿用紙の使い方のWebサイト

http://www.mori7.net/gennkou.php

 Wikipedia「醤油」

http://ja.wikipedia.org/wiki/%E9%86%A4%E6%B2%B9

 

解答

 

２−７．HTMLの違い

 

開始タグ・ 終了タグ・空要素タグのルールはHTMLのバージョンによって違いが大きく、HTMLを記述するときにそれがHTML4なのか、HTML5なのか、XHTML1.0なのかを常に意識する必要があります。。。。。。。。。

たとえば、HTML4では、<br/>という書き方はできません。また、XHTMLでは閉じタグのない<br>は間違いです。

この講座では特記のない限りHTML5を扱っています。上述の終了タグの説明もすべてHTML5が前提になっています。

追加情報 HTMLの仕様ごとの違い
本文ではHTML5のHTML構文の説明をしています。他の仕様も含めてタグの使い方の違いをまとめます。
HTML5 HTML構文(本文) ・開始タグと終了タグをペアで使用するか
・または、開始タグだけを使用するか、
・または、空要素タグだけを使用します。
HTML5 XHTML構文 ・開始タグと終了タグをペアで使用するか
・または、空要素タグを使用します。
XHTML 1.0 ・開始タグと終了タグをペアで使用するか
・または、空要素タグを使用します。
HTML 4.01 ・開始タグと終了タグをペアで使用するか
・または、開始タグだけを使用します。

参考
HTML5 8.1.2 「Void elements only have a start tag; end tags must not be specified for void elements.」
HTML5 9.1 「The syntax for using HTML with XML, whether in XHTML documents or embedded in other XML documents, is defined in the XML and Namespaces in XML specifications.」
XML1.0 3.1 [44] 「Empty-element tags may be used for any element which has no content, whether or not it is declared using the keyword EMPTY. 」
XHTML1.0 4.6「Empty elements must either have an end tag or the start tag must end with />.」
HTML4 3.2.1 「Such empty elements never have end tags.」
終了タグの省略可能・不可能、空タグであるか否かの資料 HTML4 HTML4 Index of Elemnts http://www.w3.org/TR/1999/REC-html401-19991224/index/elements.html

３．本文の表現の特例

HTML文書の本文はタグと異なりほぼ自由に文章を書けますが、 < や > などを本文中で使用するとタグと区別がつかなくなるためいくつかの文字では特別なルールが決められています。

問題点：次の文章をHTMLで表現するにはどうしたらよいでしょうか？

XよりもYが大きいことを示すには X<Y と書きます。

この文章をそのままHTMLで表現すると、途中に <Y という箇所がでてきてまるで <Y というタグを書こうとしているかのようになってしまいます。しかも > がなくそのタグは閉じられていないように表現されます。これではユーザーエージェントが文法エラーと解釈しても無理はありません。

こういったことを解決するためにHTMLで特別な意味がある文字は本文中では特別な表現に置き換えることになっています。以下がその表です。

表現したい文字 その代りに置き換えて書くもの
< &lt;
> &gt;
& &amp;
" &quot;
' &#39;
(スペース) &nbsp;

スペースは1つであれば、本文中でも１つのスペースとしてそのまま認識されますが、複数の連続するスペースは１つのスペースと解釈されてしまうので、明示的に&nbsp;と書く必要があります。また、HTML内での改行は文書中での改行を意味するのではなく単なる１つのスペースと解釈されます。

著者注： HTML5の仕様書の中で該当部分を発見できませんでした。

近い部分 HTML5 8.1.4 「Character references」

４．コメント

HTMLには特定の箇所を無効にするコメントという機能があります。

特定の箇所をコメントにするには <!-- -->で囲みます。

例

<!DOCTYPE html>
<html>
<head>
    <!-- <title>味覚の生理学(仮)</title> -->
    <title>美味礼賛</title>
</head>
<body>
    <p>省略</p>
</body>
</html>

この例ではHTMLドキュメントのタイトルは「美味礼賛」です。

コメントは、以前書いた部分を消してしまうのではなく念のためとっておきたいが有効にはしたくない場合に使うことが多いです。この場合、とっておく必要がなくなった時点でコメントの部分は消してしまうことでしょう。

もう１つのコメントの活用はHTMLの中で何らかの説明やメモをしたいけれども、HTMLの一部にはしたくない場合のメモ書きです。

例

<!DOCTYPE html>
<html>
<head>
    <title>美味礼賛</title>
    <!-- 将来この位置に目次へのリンクを追加すること -->
</head>
<body>
    <p>省略</p>
</body>
</html>


なお、コメントは入れ子にできません。また２つ以上の連続した -- をコメントの中に含むことはできません。

参考

HTML5 8.1.6 Comments