head要素の中に何を書くか？

head部
  • UA（user agent）が表示するための必要な条件とページの目的、そして外部との関連づけを記述する
  • あくまでもブラウザが理解するための部分
  • 不可視（非表示）


現在のインターネットの利用の仕方は、ほぼ「検索」から始まります。
つまり、検索対象になるWebページを作成しない限り、見られることはないということです。


では「検索」は、何を検索するのか？
検索エンジンのサーバーに記録してあるデーターから検索します。
インターネットの世界にある「ありとあらゆるデータ」から検索されるわけではありません。


この「検索エンジンのサーバーに記録されること」を、インデックスと呼びます。


この「インデックス」をされるためには、HTML文書内の「head部」と「body部」のバランスが必要になります。

DTD

  • Document Type Definition（文書型定義、DTD）とは、文書構造（文書型）を定義するためのスキーマ言語の一つ
  • ごくごく簡単なDTDの説明
  • Strict（厳密型）、Transitional（移行型）、Frameset（フレーム設定型）の三種類がある - 詳細はテキストに入ってから解説します
  • 記述する位置は、ドキュメントの最上位部

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>


XHTML 1.0 Transitional

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="ja" xml:lang="ja">
<head>
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>
  • 「XML宣言」は、IE6対策として記述しない場合もあります。


HTML5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<p>内容</p>
</body>
</html>

XHTMLでの記述

  • 2012年末の時点で主流の文書型です（HTML5は限定的）
XML宣言（必須）
<?xml version="1.0" encoding="UTF-8"?>

省略する場合もあります。（IE6対策のときに説明します。）
※エンコードタイプが「UTF-8」のときのみです。

DTD（Document Type Definition）DOCTYPE宣言
  • 厳密な記述を目指していました
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • 現在では、Transitional（移行型）に落ち着いています
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
名前空間（xmlns）と言語コード（xml:lang）を指定する
  • xmlns：xml name space
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">


XML言語は、データを管理するのには適しています。
メリットは、自由な名前を付けて管理しやすくできることです。
そのルールを規定しているのが「名前空間」です。
そのルールに則って名前を付けますよ。という意味になります。

HTMLとXHTMLの記述上の違い

  • 要素名、属性名は小文字で記述する
  • 必ず開始タグ・終了タグのセットで記述する（できない場合（非空要素）は、「　/」半角空き+スラッシュで閉じる）
  • meta、hr、br、img などは、空要素として書く
  • ‘id’および‘name’属性をもつ要素は、‘id’属性を使用する
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
外部リンク

rel：relative 関係性（HTMLドキュメントに対しCSSファイル）

<link href="base.css" rel="stylesheet" type="text/css" media="screen, print" />


「media属性」は「screen, print」場合によって「tv」を追加します。
※「media="all"」は、旧ブラウザにCSSファイルを認識させないための指定で、現在のようにPCサイトを携帯キャリア（ガラパゴス）で見る場合などに、大きい画像を読み込ませないようにするために使用しません。

HTML5

  • XHTMLより簡潔な記述が可能
  • 授業の中では、この記述を基本とします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ホームページ</title>
</head>
<body>
<p>内容</p>
</body>
</html>

meta

  • Metainformation（メタ情報）の略
  • 「超〜」「高次〜」「〜の間の」「〜の後ろの」「〜を含む」などの意味を持つ英語の接頭辞
  • metaphorが語源
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="description" content="サンプル">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
HTML5の場合
  • 「http-equiv」を自明として省略します
  • 「keywords」も基本的には省略しますが、おまじないとして残すこともあります
<meta charset="UTF-8">
<meta name="description" content="ページの内容を説明する文章">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">