SGML/XML/HTML/XHTML/HTML5
SGML
Standard Generalized Markup Language
文書用マークアップ言語(メタ言語)
任意の意味を持つタグ名を付けられる。タグはDTDに定義する。
DTDに基づいて記述する事で異種のコンピュータでも文書の論理構造を再現できる
SGMLを元に機能をWEBに限定した仕様がHTML、XML
DTD
Document Type Definition
文書型定義
マークアップ言語における構成要素、親子関係、属性等を規定
文書中、または外部ファイルに記述する
HTMLではDOCTYPE宣言で外部DTDを指定する
XML
Extensible Markup Language
SGMLを元に拡張した仕様
SGML同様、DTDにタグを定義する
HTML
HyperText Markup Language
ハイパーテキストを記述するためのマークアップ言語
SGMLを元に拡張した仕様
XMLと違いDTDは独自に変更できず、DOCTYPE宣言において、W3Cで規定済みのものの中から選択して使用する
例 HTML4.01
1) Transitional(移行型) ※非推奨要素、非推奨族制：〇、フレーム：×
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2) Strict(厳密型) ※非推奨要素、非推奨族制：×、フレーム：×
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3) Frameset(フレーム設定型) ※フレーム：〇
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML
XHTMLとは
Extensible HyperText Markup Language
XMLとの互換性を持つHTML。
HTMLを使って書かれたXML。
XHTMLのメリット
・厳密に構造化されるのでSEO的に有利に解析される。
(htmlでも終了タグを省略したりせず、見出しタグ等を的確に使用して厳密に構造化した場合は効果は同じ)
・携帯電話で閲覧した場合に正確に描画される。
・RSSアプリを利用できる
XHTML文法
・タグは全て小文字に
・属性値は""(ダブルコーテーション)で囲む
<DIV Class=test> ⇒ <div class="test">
・終了タグは省略不可
・終了タグのないタグの「/」は省略不可
<li>～ ⇒ <li>～</li>
<input ～> ⇒ <input ～ />
・<font>タグ、<b>タグ使用不可
<font color="red"> ⇒ <span style="color: red;">
<font bgcolor="red"> ⇒ <span style="background-color: red;">
<b> ⇒ <strong>
・XML宣言 / DOCTYPE宣言
<?xml version="1.0" encording="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
・<html>タグ
<html> ⇒ <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
以上はHTML4.0時代のXHTML。
HTML5に対応したXHTML5
HTML5
html4.01の後継仕様
html5にはDTDはない。外部DTDの参照もしない。
仕様はブラウザに組み込み済み。タグの独自変更もできない
フォーマット
<!DCTYPE html>
<html>
<head>
<title>～</title>
</head>
<body>～</body>
</html>
XHTML5
XHTML仕様を満たしたhtml5
<?xml version=”1.0″ encoding=”UTF-8″?>
<!DCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>～</title>
</head>
<body>～</body>
</html>
Follow me!
