HTML4,XHTML,HTML5の違いを簡単説明しています。
HTML 4.01の文書を作成する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>HTML 4.01の文書を作成する</title> </head> <body> <h1>HTML 4.01のマークアップ例</h1> <p>HTML 4.01のマークアップの例です。</p> </body> </html>
XHTML1.0の文書を作成する
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XHTML1.0の文書を作成する</title> </head> <body> <h1>XHTML1.0のマークアップ例</h1> <p>XHTML1.0のマークアップの例です。</p></body>
</html>
●XHTML1.0の文書を作成する際のポイント
- 1行目：文書の先頭でXML宣言をする
- 2行目：文書型宣言をする
- 3行目：XML名前空間と言語コードを指定する
- 8行目：終了タグを省略しない
- ■■行目：空要素タグを /> で閉じる
- ■■属性の値はすべて引用符で囲う
- 属性名を最小化しない
- 要素名と属性名は小文字で記述する
HTML5の文書を作成する
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5の文書を作成する</title> </head> <body> <h1>HTML5のマークアップ例</h1> <p>HTML5のマークアップの例です。</p> </body> </html>
応用
レスポンシブwebレイアウト
CSS内に下記のコードを加えてメディア(デバイス)毎の画面表示領域(ピクセル解像度)の違いにより、適用させるCSSを切り替える。
CSSファイル内に記述()
@media only screen and (min-width: 961px) {
適用させたいCSSの内容を記述
}