HTMLの基礎．ホームページ作成．こひつじの家

「ホームページ作成」メニューへ戻る

「タグの使用法と使用例」メニューへ戻る

　HTMLの基礎

ホームページ作成の部屋－タグの使用法と使用例

　HTMLやタグについての基礎知識をまとめてみました。

HTMLの基本とタグ各部の名称
ブロック要素とインライン要素
タグの使用に関して
HTMLの今後
どの規格のHTMLを使用したらよいか

記：2002-8-11

　HTMLの基本とタグ各部の名称

　WebページはHTMLによって作成します。HTMLはタグを使用し，タグの中にいろいろな情報を埋め込んだ構造をしています。
　HTMLによって作成された内容をHTML文書あるいはHTMLソースといいます。

　次にHTMLの基本構造の例と，各部の名称などを示します。

【基本構造の例】
	`<a href="annai.html">案内のページ</a>`
【各部の名称と解説】
・	`<a href="annai.html">`と`</a>`をタグといいます。
・	`<a href="annai.html">`を開始タグといいます。
・	`</a>`を終了タグまたは閉じタグといいます。
・	開始タグから終了タグまでの全体をhtmlの要素といいます。単に要素ともいいます。
・	`a`を要素名といいます。「a要素」というような表現をすることもあります。
・	要素名が`a`であるタグを「aタグ」ということもあります。
・	`src="annai.html"`をa要素の属性といいます。単に属性ともいいます。
・	`src`を属性名といいます。「src属性」というような表現をすることもあります。
・	`annai.html`を属性の値または属性値といいます。
・	`案内のページ`の部分を要素の内容または要素内容といいます。要素内容に別の要素が入ることもあります。

　要素の種類によっては，終了タグがなかったり，属性がなかったりします。

　書物やWebサイトなどを見ると，要素よりもタグという名称がよく使われています。しかしタグには要素の開始や終了を識別するための印という意味があるだけで，本当に重要なのは要素です。にもかかわらずタグという名称の方が広まったのは，その他ではあまり使われないカタカナ語であることが大きいようです。
　このシリーズでもタグという名称を多く使用しています。本当は要素と書いた方が正しい場合が多いのですが，かえって分かりにくいのではないかと思って，あえてタグと書いたところもあります。

　ブロック要素とインライン要素

　HTMLの要素はブロック要素（block element）とインライン要素（inline element）に分類されます。

ブロック要素

　ページの構造に関係する要素です。見出しの要素 h1～h6，段落の要素 p，配置の要素 div，表（テーブル）の要素 table，リストの要素 ul などがそれにあたります。
　他の要素を押しのけるようにして，親要素が確保している幅いっぱいを確保します。そのためブロック要素の前後で改行されます。
　内容に別のブロック要素やインライン要素を入れることができます。

インライン要素

　テキストなどのある部分だけにかかわる要素です。テキストエディタやワープロのカーソル位置に入れる要素だと考えると分かりやすいです。リンクの要素 a，イメージを表示する要素 img，太字にする要素 b，改行させる要素 brなどがそれにあたります。
　インライン要素の前後には基本的にスペースが空いたり，改行されたりしません。
　内容としてブロック要素を入れることはできません。

　タグの使用に関して

・ 要素名や属性名は大文字で書いても小文字で書いてもかまいません。

　　URLやJavaScriptのプロパティやメソッド等については，大文字と小文字をはっきり区別して書く必要があります。

　次世代のHTMLと言われているXHTMLでは要素名や属性名は小文字で書くことになっています。

　　このシリーズでは将来のことを考慮して，要素名や属性名は小文字で書くように統一しました。また属性の値についても特に大文字と小文字が区別されるところ以外は小文字にしました。

・ 属性の値は " " または ' 'で囲みます。

　　属性の値に英数字，ハイフン，ピリオド以外が含まれていないときは " " 等で囲わなくてもエラーにはなりませんが，囲うことが推奨されています。

　HTMLの今後

　HTMLについての仕様はW3C （World Wide Web Consortium）という非営利団体が決定していて，現時点では，1999年12月24日に勧告されたバージョン4.01が最新です。HTML4.01では，HTMLの要素（タグ）は文書の構造を表すためだけに使い，レイアウトや色などを指定する要素や属性を廃止する方針がとられました。一方でページのレイアウトや色などについてはスタイルシートを使用することが求められています。
　とはいっても，古いブラウザはスタイルシートに対応していなかったり，対応が不完全であったりしますので，WebページをHTML4.01で作成しますと古いブラウザでは見えなくなってしまう可能性がありますので，W3Cでは旧来の要素（タグ）をすぐに廃止するのではなく，移行期間を設けて，次第に新しい規格で作られたページを増やしていくことを考えています。

　どの規格のHTMLを使用したらよいか

　Webページを作るときには，その目的などによって，どの規格のHTMLを使うかを選択することになります。一般的には最新の規格で作ればよいのが当然なのですが，Webページについては，ちょっと事情が複雑です。Webページの読者には古いブラウザを使用している人もいますが，古いブラウザは新しい規格のHTMLには対応していないからです。
　そういうことも頭に入れて，次の選択肢を見てください。
　なお当分の間はブラウザ側で古いバージョンのHTMLにも対応させるようです。

古いHTMLで作成する：
　現時点では最も多くの人に見てもらえるページとなります。
　しかしレイアウトやアクションなどにかなり制限を受けますし，将来登場するブラウザではうまく表示されなくなることがありえます（そのときはHTML文書を修正すればいいですから，小規模なサイトでしたら，それほど問題はないでしょう）。
　
古い要素を使いながら，HTML4.01を取り入れていく：
　今まで慣れ親しんできた<font>タグなども使いながら，スタイルシートを使ったりもします。自由度が大きいです。
　しかし将来登場するブラウザではうまく表示されなくなることがありえます。
　
基本的にHTML4.01で作成し，古い要素も使う：
　基本的にはHTML4.01で推奨されている方法で作成します。しかしスタイルシートを使うとブラウザによって表示が異なってしまうようなもの（text-align など）については古い要素や属性（div align など）を使います。
　古いブラウザでは期待したように表示されない可能性がありますが，将来登場するブラウザによっては，かなり先まで表示される可能性があります。
　
HTML4.01に厳格に従う：
　レイアウトはスタイルシートにまかせるので，すっきりした構造のHTML文書が作れます。レイアウトの自由度も大きいですし，将来にわたっても見てもらえる可能性が大きいです。
　しかし古いブラウザではうまく見えない危険性があります。「IE5.0以上，NN6.0以上で動作を確認しています。古いブラウザでは正しく表示されない可能性があります」というようなことわりを書いておく必要があります。
　
新旧両方のページを作る：
　ブラウザの種類やバージョンを判別して，古いブラウザであれば古いHTMLで書いたページを，新しいブラウザであれば新しいHTMLで書いたページを表示させるようにする方法です。
　最も確実ですが，手間がかかります。特に更新作業は両方のページについて行う必要がありますので，非常に煩雑になります。

というわけですので，ページを作る目的などによって選択することになります。トップページは5.の方法で，各ページは3.の方法でという手もあります。

　私の考えですが，現在は2.または3.の方法が良いと思います。朝日新聞社，NHK，NECなどのサイトも2.または3.ですし，その他プロが作っていると思われるいくつかのサイトを見てみても，4.の方法をとっているものはほとんど見当たりません。このような状況の中で古いHTMLが使えなくなってしまえば大混乱が起きるに違いありませんので，おそらく5年や10年はだいじょうぶだと思います。
　比較的新しいホームページ作成ソフトは3.が中心になっているようです。