情報サイト WIZ
HEAD部の書き方
最終更新：
匿名ユーザー
HTMLの書き方 HEAD
ドキュメントタイプを明記する
なぜドキュメントタイプが必要なのか？
HTMLは、「タグ」と呼ばれる記号を付けて文章の構成を決めた言語である SGMLの一つであり、HTML自身もバージョンによりさまざまな「タグ」が存在している。WEBページを正確に表示するためには使用するドキュメントタイプを明記して、これから使う「タグ」の種類を宣言する必要がある。
書き方
ドキュメントタイプの指定方法 ３種類
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01に厳格に従った場合、現時点では対応できないブラウザがある。互換性を考慮すると、将来無効になるとされたタグもやむを得ず使用しなければならない。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Update! 2001/12/4
XHTML1.0を先取りして、DOCTYPEの後ろのHTMLを小文字のhtmlに変更した
- HTML
- Hyper Text Markup Language
- SGML
- Standard Generalized Markup Language
- DTD
- Document Type Definition
原理主義の経典 Update! 2001/12/4
ＨＴＭＬのバージョン
| バージョン | 年代 | 概要 |
|---|---|---|
| 初期のHTML | 1991年ころ？ | ブラウザごとにタグが定義されていた |
| 通称HTML 1.0 | 1993年 | 最初のDTDが提出された |
| HTML 2.0 | 1995年11月制定 | フォーム・画像の取り込み、テーブルなし |
| HTML 3.2 | 1997年1月勧告 | ブラウザで拡張されたタグの取り込み |
| HTML 4.0 | 1997年12月勧告 | 国際化・デザイン要素の分離 |
| HTML 4.01 | 1999年12月勧告 | 改訂最新版=最終版? |
| HTML 5.0 => XHTML 1.0 (XMLの規格に従ってHTMLのタグや属性を定義した言語) | ||
原理主義が採用するバージョン
HTML4.01とXHTML1.0の教義が混在していた点を深く反省し、HTML4.01を原理主義で最も尊ぶべき経典と定めた。前述の通りHTML4.01は構造と表現の分離を進めた画期的なDTDである。しかし、DTDに対応してないブラウザがある点や表現を分離する上でスタイルシート側で対応できない表現が残っている点を考慮し、現実的な対応はこれを許容する。また、XHTMLについては次代を担う教義だと確信しており、先取りできるものは積極的に採用していくが、現時点ではあくまでHTML4.01を最優先とする。具体的な対応は以下の通り。
| 項目 | HTML4.01 | XHTML1.0 | 原理主義者の取るべき道 |
|---|---|---|---|
| タグの表記 | 大文字または小文字 | 小文字のみ | 小文字のみとする × <HTML> ○ <html> |
| 属性値 | #や%等を含む値は引用符で囲む | すべての値を引用符で囲む | すべてを引用符で囲む × <table border=1> ○ <table border="1"> |
| 終了タグ | なくてもよい | 必須 | 必ず終了タグを書く × <p>段落１<p>段落２ ○ <p>段落１</p><p>段落２</p> |
| 空要素タグ br hr等タグの要素のないタグ |
規定なし | />で終らせる /の前には空白が必要 |
/>はHTML4.01では違反 何もしない >で閉じる × <br /> ○ <br> |
HTMLの始まり
タグは小文字で
おなじみのhtmlタグとheadタグを書く。HTMLではタグは大文字でも小文字でもＯＫだが、原理主義ではXHTMLを先取りして小文字で書いている。
htmlにも属性があった！ New! 2001/12/4
htmlタグには文書の言語指定を行うためにlang属性をつけること！
検索エンジンの補助・音声合成装置の補助・スペルチェッカや文法チェッカの補助等でこの属性が役に立つ
書き方
<head>
文字コード
本来はサーバの役割？
Apacheの.htaccess等、本来はサーバ側で付加することになっているが、サーバが変更されることも考慮して文字コードを記述することにする。
New! 2001/12/4
文字コードを指定する前にはASCII以外の文字は書かないこと！ つまり、文字コード指定はheadの先頭で行った方がよい。
書き方
EUCの場合 charset=以下が euc-jp となる。文字コード名は大文字小文字どちらでも可。
その他の宣言New! 2001/12/4
スタイル属性を指定する言語の宣言
タグにスタイル属性 sytle を指定するときは、その言語をメタタグで宣言しておく必要がある。
スクリプト言語の宣言
スクリプト言語を使用して OnFocus等のイベント処理を行うときは、そのスクリプト言語をメタタグで宣言しておく必要がある。
作者のメールアドレスの指定
ページの作者を明示し、作者へ直ちにメールを出せるように、メールアドレスを記述する。ただし、この機能をサポートしているブラウザは一部のみ。Mozilla4.0 になってようやく LINK がサポートされたとのこと。
検索エンジン対策
検索エンジン用キーワード
検索エンジンにはディレクトリ検索型とキーワード検索型の二種類がある。Yahoo等のディレクトリ検索型は、ジャンル別に分類されたページ情報に登録することでページ検索の対象となる。Gooに代表されるキーワード検索型は、検索エンジンが自動的にページの情報を収集して検索対象に登録していく。後者のキーワード検索型のエンジンに対しては、的確なキーワードを与えてやることがポイントとなる。
検索結果に表示される概要文
検索されたページは検索結果の一覧に表示される。何も指定しないとページの中の数行が表示されるため、ページの内容が的確に表示できないことが多い。検索エンジンによっては製作者が用意した概要文を表示してくれるので、概要文を利用してページの内容が検索結果にキチンと反映できるようにする。全角で８０～１００字以内が適当か。
書き方
<meta name="description" content="シンドバッドネットワークはインターネットを利用した中古自動車部品販売ネットワークです。">
キーワードは、content以下にカンマ,で区切ってキーワードを列挙する
metaタグには、この他に author,Expires,Reply-to等が書ける
タイトル
タイトルの重要性
タイトルはブラウザのタイトルバーに表示されるだけでなく、ブラウザのお気に入りの登録名や履歴の表示名、検索エンジンの見出しになる。タイトルがわかりにくければ他人にアクセスしてもらえなくなる。
わかりやすいタイトル
「インデックス」・「ホームページ」・「体験記」等の一般的なタイトルでなく、「ＨＴＭＬの書き方 インデックス」・「佐藤家のホームページ」・「八方尾根モーグルコース体験記」等の具体的で、中身がわかるような、他人にわかりやすいタイトルをつける。
とは言え、長すぎるタイトルはカットされる。セイゼイ日本語２０文字程度？
１ページ、１タイトル
タイトルは文字通りページの顔。手を抜かずにキチンとつけること！
書き方
標準HTML HEAD New! 2001/12/4
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="keyword" content="ＸＸＸＸ,ＹＹＹＹ,ＺＺＺＺ">
<meta name="description" content="ＸＸＸＸＸＸＸＸＸＸＸＸ">
<link rev="made" href="mailto:[email protected]">
<link rel="stylesheet" type="text/css" href="default.css">
<title>ＸＸＸＸＸＸＸＸＸＸＸ</title>
</head>
