HTML の基本的な事をこのページにまとめてみます。 正しく覚えておくべき基本となる記法、文法、用語等を中心に集約しました。 初心者にもなるべく分かり易く書いたつもりですが、このページだけでは恐らく不十分 ですので、全くの初心者には理解し難い部分もあるかも知れません。 HTMLバージョン4.01を前提としています。
MIMEタイプが
text/html となっているものがHTML文書になります。これはファイルの種類を示す
もので、HTTPサーバー
(以後サーバーと略します) がファイルの拡張子を判別し、ファイルが送信される際に
情報としてブラウザに通知されます。
従って、通常のHTML文書はファイルの拡張子を html または htm にしなければ
なりません。
※ 拡張子を付けなかったり txt や未知の拡張子にすると、サーバーは通常MIMEタイプを
text/plain(普通のテキストファイル)として送信しますので、ブラウザによっては
HTMLとして描画表示されません。
※ MIMEタイプはContent typeとも言います。
< で始まり > で終るもの をタグと言い、特に <要素名 で始まり > で終るものを開始タグ、 </要素名> となっているものを終了タグと言います。 そして、開始タグと終了タグとの間に挟まれた部分が内容となります。 この内容には文字や別のタグが含まれます。(空の場合も有り) 開始タグの要素の後に半角スペースを置いて書かれている部分は属性と言い、必要なら 更に半角スペースで区切って、いくつでも追加する事が出来ます。
上の例では
| 開始タグ | <span style="color:red"> |
| 終了タグ | </span> |
| 内容 | この文章は赤く表示されます |
| 要素 | span |
| 属性 | style="color:red" |
上記ソースの様に一般的な要素は、開始タグ・内容・終了タグで一組のマークアップ
(タグによるマーク付け)となりますが、要素によっては開始タグだけで用い、
内容と終了タグを持たない要素(空要素と言います)もあります。
また、要素によっては終了タグを省略可能な要素もあります。
属性は半角スペースで区切って 属性名="値" のように書きます。
※ 要素名や属性名は大文字・小文字の区別は無く、大文字と小文字を混ぜて
記述しても問題ありません。
※ 要素毎に使用出来る属性は異なります。
※ 属性名="値" とせず属性名のみで使用する特別な属性もあります。
※ 属性値は " または ' で挟んで書きますが、値がアルファベットや数字等の場合には
引用符を省略可能です。
※ マークアップされたソースコード自体は「タグ」ではありません。
開始タグ+内容+終了タグとなる通常の要素のタグの書式
<要素名>内容</要素名>
または
<要素名 属性名="値" 属性名="値" 属性名="値" ... >内容</要素名>
※ 上の例の様に開始タグ、内容、終了タグの各区間で改行しても問題ありませんが、
内容が文字や画像(imgタグ)等のインライン要素の場合は改行が半角スペースとなって
表示されます。
※ 横に並べて表示する事の出来る要素(span, a, img, strong, iframe 他)は
インライン要素(行内要素)、前後が改行されて表示となる要素(div, p, pre, hr, form,
blockquote 他)はブロックレベル要素と呼ばれます。
終了タグの省略することの出来る一部の要素のタグは次のように記述する事も出来ます。
終了タグの省略出来る要素は
html, head, body, tbody, thead, tfoot, colgroup, tr, th, td, li, dt, dd, p,
option 等
※ html, head, body は開始タグも省略可
※ tbody は thead、tfootを含まないtableで単独の場合は開始タグも省略可
終了タグの存在しない開始タグのみで使用する要素のタグ(空要素のタグ)の書式
<要素名>
または
<要素名 属性名="値" 属性名="値" 属性名="値" ... >
次の様に <!-- と --> に挟まれた範囲はコメントとして扱われ
表示されません。
<!-- この文章は表示されません -->
但し、この範囲内には -- (２個以上連続したハイフン)は入れられません。
URLはサイト内のファイルに
対するとき相対パスで指定します。
ここで言うパスは英語で Path 、ディレクトリの位置を表すものです。
. は同ディレクトリ内、 .. は一つ上のディレクトリ内を意味します。
相対パスを使用すると以下の様に相対的に書き表す事が出来ます。
http://www.example.com/magick/index.html のページに
http://www.example.com/magick/grimoire.html へのリンクを貼る場合
<a href="grimoire.html">グリモワール</a>
または
<a href="./grimoire.html">グリモワール</a>
http://www.example.com/magick/grimoire.html のページに
http://www.example.com/magick/index.html へのリンクを貼る場合
<a href="index.html">魔法</a>
または
<a href="./index.html">魔法</a>
もしくは
<a href="./">魔法</a>
http://www.example.com/magick/grimoire.html のページに
http://www.example.com/magick/abramelin/index.html へのリンクを貼る場合
<a href="abramelin/index.html">アブラメリン</a>
または
<a href="abramelin/">アブラメリン</a>
http://www.example.com/magick/abramelin/index.html のページに
http://www.example.com/magick/index.html へのリンクを貼る場合
<a href="../index.html">魔法</a>
または
<a href="../">魔法</a>
http://www.example.com/magick/abramelin/index.html のページに
http://www.example.com/img/hga.jpg の画像を貼る場合
<img src="../../img/hga.jpg" alt="聖守護天使">
※ 別のサーバー内のファイルに対しては絶対パス(http://から記述)
でURLを指定します。
※ ディレクトリはフォルダとも呼ばれます。
※ サイトのトップまたはディレクトリを指定するとサーバーがディレクトリ内の
index.html を送信します。
色、サイズ、位置、フォント等、主に見栄えに関するものの多くはスタイルシートの 使用が推奨されています。 スタイルシートはHTML文書中に書く（埋め込む）事も、外部スタイルシート (別のファイル)に書く事も可能です。 CSS(カスケーディングスタイルシート)はHTMLから独立したスタイルシート言語に なりますので、タグというものは無く、構文は「規則」（ルール）と呼ばれ 「@規則」と「規則集合」に大別されます。
@規則は@から始まるもので、外部スタイルシート内で主に別のcssファイルを 読み込んだり、文字コードを指定する等に使用されますが、一般的に使用頻度も少ない と思いますので詳細は述べません。
@import "sub.css";
規則集合（ルールセット）は、セレクタ{プロパティ:値}
となるCSS規則です。
「プロパティ:値」の部分は「宣言」と呼ばれ、特に宣言を挟んでいる{ }は
宣言ブロックと呼ばれます。
宣言は複数必要なとき ; で区切ります。
※ 規則集合、宣言、プロパティと言う表現だけでは「何の？」といった感じですので、
一般的にはCSS規則、CSS宣言、CSSプロパティ等と明記されることも多いです。
HTML文書中に書く場合はヘッダ部分でstyleタグを使って書く方法が理想的ですが、 各要素にstyle属性を使って書く事も出来ます。
style属性を使う場合(行内スタイル情報)はCSS宣言のみを使用し、 style="プロパティ:値" のように記述します。
この例では、２つの宣言があり、それぞれfont-sizeとcolorがプロパティ、11ptとredが
値です。このspan要素内の文字サイズを11pt、色を赤に設定しています。
※ 行内スタイル情報を使用するときはページのヘッダ内に
<meta http-equiv="Content-Style-Type" content="text/css">
が必要です。(後述)
外部スタイルシートやstyleタグ(ヘッダスタイル情報)を使用して書く場合はセレクタと 宣言ブロックを使用して書きます。 セレクタは要素名やクラス名、ＩＤを使用して特定の要素にプロパティを結びつける ためのもので、body要素に対する場合はbodyと指定します。 セレクタにクラス名やＩＤを使用するには任意の要素にそれぞれclass属性やid属性を 設定し、クラス名の場合は .クラス名 、ＩＤの場合は #ＩＤ として指定します。 セレクタは他にも色々な構文がありますが、ここではこの程度の説明に留めておきます。
※ 状況に応じて適当に { や } および : や ; の前後に半角スペースを入れると
見易くなりますし、改行してもOKです。また、大文字・小文字は区別されません。
※ プロパティ:値(CSS宣言)を複数書くときに ; で区切りますが、一番最後は ; が
有っても無くても構いません。
※ 上の例ではstyle要素の内容となるスタイルシート部分がHTMLの<!--と-->で
コメントアウトされていますが、これはスタイルシートに対応していない古いブラウザ
で表示されないようにするものですので絶対に必要という訳ではありません。
※ id属性に設定するＩＤはページ内で重複してはいけません。
また、文字列はアルファベットから始め、アルファベット、数字、ハイフン、
アンダースコア、コロン、ピリオド以外の文字は使用出来ません。
※ CSSではコメントは /* と */ で挟みます。
外部スタイルシートとする場合はファイルの拡張子をcssとしてファイルを作成し、
スタイルシートのみを作成したファイル内に書き込みます。(styleタグも不要です)
そして、HTML文書中にはヘッダの部分(後述)にlinkタグを使って読み込ませます。
次の例はmain.cssというファイル名で作成しています。
<link rel="stylesheet" href="main.css" type="text/css">
※ 外部スタイルシートとして作成したファイルにはHTMLのタグやスクリプトは
書き入れる事が出来ません。
HTML文書中にはISO/IEC 10646(UNICODE互換)という文字集合で定義されている数値を 使用して他国語の文字や入力困難な記号等を含める事が出来ます。 これを数値文字参照と言い、&#数値; として使用します。
| 文字 | 記述方法 | 備考 |
|---|---|---|
| ' | ' | アポストロフィー |
| ☮ | ☮ | ピースマーク |
| ➀ | ➀ | 丸の中に1 |
| א | א | ヘブライ文字のALEF |
| 안 | 안 | ハングル文字のAN |
| ヸ | ヸ | カタカナのVI |
また、よく使用される文字は別名でも定義されています。 これは文字実体参照と言い、 &シンボル名; で使用します。
| 文字 | 記述方法 | 備考 |
|---|---|---|
| | スペース(空白) | |
| © | © | コピーライト |
| ® | ® | 登録商標 |
| ™ | ™ | トレードマーク(商標) |
| ♥ | ♥ | ハート |
| " | " | クォーテーション(二重引用符) |
| & | & | アンド(アンパサンド) |
| < | < | 小なり |
| > | > | 大なり |
※ 当然ですが該当する文字を含むフォントがインストールされていないシステムでは
表示されませんし、フォントがUNICODEマッピングとなっていない旧式のシステム等では
NGです。
※ Window9X系(95、98、98SE、Me)+IEの組合せは一部の記号等が表示されません。
(MeではOperaやFirefox等を使用すると上手く表示される事もあります)
ここで言うユーザーエージェントはブラウザを含めHTTPサーバーにアクセス可能な ソフトウェアを指します。 画像を表示しないユーザーエージェントには、検索エンジンのクローラ、 視覚障害者用の音声ブラウザ、テキストブラウザ等があります。 これらユーザーエージェントのために、imgとarea要素ではalt属性での代替テキストが 必須とされています。 代替テキストを設定しておくとテキストブラウザでは画像の代りにalt属性の値が 文字として表示され、音声ブラウザでは音声出力されます。
※ ページの整形目的で余白を作るための画像や単なる飾りにしかならない画像
(テキストブラウザや音声ブラウザで無駄な出力となるもの)は alt="" とします。
img要素におけるalt属性は、ツールチップ(マウスカーソルが乗ったときに表示される
説明)と間違えられる事が多いので注意してください。
×
<img src="画像URL" alt="説明">
○
<img src="画像URL" alt="代替テキスト" title="説明">
※ 昔のブラウザ(Netscape 4.x等)はalt属性をツールチップとして表示する機能を実装
していました。しかし、それは飽くまでメーカー側が勝手に実装したもので、
HTML仕様書では代替テキストであり、ツールチップは後のHTML4からtitle属性に割り
当てられました。
IEはalt属性での表示も継続していますが、他のブラウザはalt属性では表示されず、
title属性でのみ表示するよう変更されています。
※ IEはarea要素にalt属性とtitle属性があればalt属性を表示してしまうというバグが
あるようです。(img要素では問題ありません)
HTML文書のページとして基本的な構成は、
となります。
HTMLバージョン情報は、HTMLバージョン4.01対応のページの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTMLバージョン4.01対応でフレームのページの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
この他にもW3CのURLを付加した厳密型DTDや移行型DTD等がありますが、
ここでは割愛します。
ヘッダはhead開始タグと終了タグで区切って、タイトルやスタイル、スクリプト、
ページの補助的なデータ等を置く部分で、ヘッダ内に置かなければならない要素は、
base, link, meta, style, titleと決まっています。（廃止予定の要素を除く）
scriptはヘッダ内でも本体内で良いとされていますが、本体内でなければ動作に支障の
あるスクリプト以外はヘッダ内に置いた方が良さそうです。
行内スタイル情報(style属性)にCSSを
使用する場合(もちろん通常はCSSですね)、次のmetaタグでの指定が必要です。
<meta http-equiv="Content-Style-Type" content="text/css">
組込みイベントとしてスクリプト言語にJavaScriptを使用する場合(通常はJavaScript)、
次のmetaタグでの指定が必要です。
<meta http-equiv="Content-Script-Type" content="text/javascript">
※ 一般的なブラウザでは内蔵されてるスタイルシート言語はCSS、スクリプト言語は
JavaScriptですが、HTMLではそれぞれ他の言語も使用され得る事が想定されています。
※ 組込みイベントは
onload, onunload, onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onfocus, onblur, onkeypress, onkeydown, onkeyup,
onsubmit, onreset, onselect, onchange
等スクリプトを作動させる属性です。
本体はbody開始タグと終了タグで区切って、ページの本文を書きます。
※ フレームページの場合はbodyの代りにframesetとなります。
html、head、title、bodyの各開始タグ及び終了タグは１つのページにそれぞれ一組のみ です。複数記述する事は出来ません。 HTML文書にはタイトル(title要素)は必須とされています。
典型的なページの構成は次のようになります。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
この行はブラウザにページの正しい文字コードを伝え、サーバーに対しては
HTML文書である事を示します。
charset=Shift_JIS は本文の文字コードがシフトJISの場合です。
html、head、bodyは開始タグをも省略する事が出来ます。 従って、以下のように記述してもHTML文書として正しいと言えます。
※ html、head、bodyを省略しても「記述を省略しているだけ」ですので、
html、head、body自体はページ内に存在します。
ヘッダ内に置くべき要素は上部に、本体内に置くべき要素は下部にまとめ、
互いに入り混じらないようにすべきです。
※ フレーム文書ではbodyではなくframesetを使用しますが、代替表示となる部分 (noframesの内容)にはbodyが入ります。
時折、CSS規則で body { overflow:hidden; } またはIEに限れば <body scroll="no"> としてページ全体のスクロールバーを消去している サイトを見掛けます。 ページ全体のスクロールバーはブラウザの操作に必要不可欠なものですので、 見栄えのためだけに消去してはいけません。 何故なら、画面の小さなモバイルPCもありますから、このようなシステムでは スクロール出来ないためにページ全体を閲覧する事がが困難となってしまうからです。
WindowsのIEでなければ閲覧に支障のある サイトも少なくはありません。 IEは他のブラウザに比べ、HTML、CSS、DOM等の標準仕様を満たせていない部分が 多い割に独自拡張の目立つブラウザですので注意が必要です。 そのため、特にスクリプトや特殊なCSSを使用するときは最低でももう一種類別の ブラウザで問題無く閲覧出来る事を確認しながら作成すべきでしょう。
現時点でパソコン用の主要なブラウザはIEやIEコンポーネントを利用したもの以外に 次のものがあります。