HTML文書を作成する際の基礎中の基礎をまとめてみました。
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>

HTML 4.01のサンプル

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のサンプル

●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>

HTML5のサンプル

 

応用

レスポンシブwebレイアウト

CSS内に下記のコードを加えてメディア(デバイス)毎の画面表示領域(ピクセル解像度)の違いにより、適用させるCSSを切り替える。

CSSファイル内に記述()

@media only screen and (min-width: 961px) {
  適用させたいCSSの内容を記述
}

レスポンシブwebレイアウトのサンプル