htmlは、HyperText Markup Language(ハイパーテキストマークアップランゲージ)の略です。
このhtmlは、ウェブページ www(ワールド・ワイド・ウェブ)を作成するための言語で、つまりホームページを作るための万国共通の言語でコンピュータに情報を与え読みこませる言語です。
????????
ホームページはタグの集まり
タグのルール
ホームページはタグの組み合わせで構成されます。
HTMLタグとも呼ばれ、かならず <> の中に記述します。 開始タグである <> で始まり、終了タグである</>で終了します。
ホームページを作るhtmlファイルは、必ず<html>で始まり</html>で終了します。「HTMLで記述します」ということを宣言しています。
この<html>と</html>の間に、ホームページのタイトル・本文などをタグを使って記述します。
htmlタグは、必ず半角英数で書きます。全角ではタグと認識されません。
htmlタグは、大文字(A)、小文字(a)の区別がありません。<BR>でも<br>でもどちらでもいいのですが、これはhtml4.01以前の場合です。
xhtmlでは小文字限定です。
html バージョンによってタグのルールに微妙ながら違いがあります。
また、ブラウザによっては表示されないものがあったり、見え方が違ったりするので、注意が必要です。
これからホームページを作ろうとするなら、xhtmlの共通性も考慮して、タグは小文字で書く事をおすすめします。
「HTML 4.01」と「XHTML」と「HTML5」の違い
HTMLファイルを作成する前に、まずはどのバージョンで記述していくのかを決めなくてはいけません。
「HTML 4.01」や「XHTML 1.0」などのバージョンによって書き方が違ってきますので、文書の型を宣言(DTD宣言)した上で、そのバージョンに従った書き方で書いていく必要があります。ホームページ作成のhtmlタイプは、「HTML
4.01」「XHTML」が主流でしたが、最新は「HTML5」です。
ただし、最新の「HTML5」は一部のブラウザでは対応しておらず、対応済みのブラウザでもすべての機能は対応していないというのが現状です。
それでは、「HTML4.01」「XHTML」htmlのタイプの違いを簡単に書いてみます。
タグの書き方で大きな相違点は、HTML4.01では大文字と小文字は区別されません。どちらで書いてもOKなのですが
XHTMLではすべて、タグは小文字で書きます。
また、HTML4.01ではおなじみの <font><marquee> など、XHTMLでは使えないタグがあります。
XHTMLとCSS
Webページ全体のレイアウトやデザインは全て外部スタイルシートを使って記述していきます。HTMLでは、style要素を使い文書内にスタイルシートを記述しました。XHTMLでは記述の仕方が異なりますので注意しましょう。
XHTML文書内にstyle要素を使ったCSSを記述する場合
<head>と</head>の間に下記のように記述します。
<style type="text/css"> < ![CDATA[ body { margin-top: 10px; text-align:center; background-color: #ffffff; color: #666666; } ]]> < /style>
????????
W3Cの勧告
W3Cの勧告には、HTML4.01とXHTMLとの相違点としていくつかの項目が挙げられています。HTML4.01では比較的緩かったルールもXHTMLでは厳密です。
W3Cの勧告 HTMLとXHTMLの違い ↓↓ | 詳細 ↓↓ |
XMLバージョンとドキュメント宣言を行う | HTML4.01では、DTD宣言の省略ができました。 XHTMLでは、省略はできません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/dtd"> ドキュメント宣言 |
文書は整形式でなければならない | 終了タグは省略できない <開始タグ>と</終了タグ>をきちんと書き、全ての要素を正しい入れ子(ネスト)にする ○ <p>タグは<strong>小文字</strong>で記述</p> × <p>タグは<strong>小文字で記述</p></strong> |
要素名及び属性名は小文字でなければならない | XHTMLでは要素、属性は小文字で記述します。XHTMLの場合、大文字と小文字は厳密に区別されるので注意が必要です。 |
非空要素には終了タグが必要である | 例として、HTMLでは、<li>リストタグは</li>の終了タグがなくても表示されていましたが、XHTMLでは終了タグも必ず入れます。 |
属性値は常に引用符で括られなければならない | 例として、HTMLでは、<td rowspan=5> <height=50>など、""(引用符)を省略することもできましたが、 XHMTLでは、<td rowspan="5"> <height="50">のように、きちんと""(引用符)を記述しなければいけません。 |
meta、hr、br、img などは、空要素として書く | HTMLの要素 img, br,のように開始タグしか使わないものを空要素タグといいます。XMLでは、 タグを閉じるときに /> を使わなければなりません。、/> の前に半角スペースを空けます。(ブラウザがタグを正しく認識できない可能性があるからです。) <br /> <img src="photo.gif" border="0" /> のように記述します。 |
属性の省略化はしてはならない | HTMLではchecked、selected、nowrap、compact、disabled、noresize などの属性の値は省略することが出来ました.。XHTMLでは必ず記述します。 ○ <INPUT type="radio" name="c" checked="checked" /> × <input type="radio" name="c" checked> |
属性値内での改行を含む複数の空白は1つと見なす | 1個以上の空白(連続したスペース)や改行は、1つのスペースと見なされ変換されます。 例として、半角スペースを5個空けても、実際のブラウザ上ではスペースは1つ分しか表示されません。 |
スクリプトおよびスタイル要素の定義が異なる | & < > などの記号は、文字に割り当てられたコードを記述します。 例として、頻度の多い & は & と記述することになっています。HTMLでも同様でしたが、XHTMLの場合は用法が徹底しており、実態参照(文字に割り当てられたコード)を記述します。 ・よく使われる文字コード & → & < → < > → > " → " 半角スペース → |
HTML4.01とXHTMLには微妙な違いがあります。HTML4.01のルールで記述されたものは、XHTMLでは通用しないことがあります。逆にXHTMLのルールで記述されたものはHTML4.01としてほとんど通用します。
HTML5の特徴
宣言は、<!DOCTYPE html>
- HTML4.01同様、比較的緩いルール
- HTML5では追加されたり、変更になった要素や属性がたくさんあるので、注意が必要
ただ、先ほども書きましたが新しいhtmlなので、対応していないブラウザもありますし、対応済みのブラウザでもすべての機能には対応しきれていないというのが現状です。
????????