３．HTMLのアウトラインガイド

(X)HTMLリファレンス(3)：目次sitemap-gif

sitemap-gif

HTMLバージョン情報：ドキュメントタイプの定義（DTD)

HTMLを作成するために、メーカー仕様ではない世界標準を策定する団体であるW3Cグループによる定義に従って記述するのが望ましく、また短い歴史の中でもいくつも改変されてきたわけで、自分がどの定義に従って記述しているかを、サーバー及びクライアントへ確実に通知(宣言)する必要があります。

この宣言だけは、通常の要素とは違った形式で表現(記述)します。

<!DOCTYPE

公開識別子とシステム識別子

自分自身がどの仕様に基づいて記述しているかを、サーバー・クライアントに正しく伝える。（正しく処理してくれるかどうかは別問題）

《公開識別子》バージョン指定

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

《公開識別子》＋《システム識別子》

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 注意： W3Cでは、「HTML 4.01仕様は、3つのDTDを規定しており、･･･次の3つの何れかの文書型宣言を含めねばならない」と記している。
また、DTDのシステム識別子を宣言する/しないで、ブラウザの挙動が変わりますので注意が必要です。
特にIEは独自に自分の都合いいように勝手にやっているので、きちんとしたHTMLを書いても思ったように表示されないことがありますので要注意です！
TOPへ

(1)厳密型DTD

※ W3C の仕様で「推奨しない」とされる要素や属性、さらにフレーム用の内容を使用しない

HTML4.01厳密型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
TOPへ

(2)移行型DTD

※ 厳密型DTDに加えて、W3C の仕様で「推奨しない」とされる要素や属性も使用する

HTML4.01移行型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
 注意： HTML4.01 の仕様において「非推奨（廃止、または廃止予定）」とされる古い要素や属性に関しては、Transitionalを宣言したとしても、CSSを使って使用することがW3Cで推奨されている
TOPへ

(3)フレーム設定型DTD

※ 移行型DTDに加えて、フレーム用の内容も使用する

HTML4.01フレーム設定型DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">
TOPへ

HTML文書本文

HTML要素

１ページに１組しか出現しません。

HTML4.01

<html lang="ja">
…
</html>

XHTML 1.0

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
…
</html>

HTML文書のコンテンツをこの中に記述します。つまり１ページに１つのコンテンツということになります。

これは「異なる内容のものは別ページで記述しよう」という考えが覗えます。

TOPへ
<html>
<head>
…
</head>
</html>

HTML文書の、言語、文書タイトル、スタイルシートの利用宣言、JavaScriptの利用宣言、サーチエンジン向け情報（キーワード、説明など）、作者に関する情報、ナビゲーション情報などが記述できます。

１ページに１組しか出現しません。

具体的に記述できる要素は、title要素、meta要素、link要素、style要素、script要素です。

title要素

Googleの検索結果に表示されます。

また、ユーザーがブラウザで表示した際に左上の帯または、タブに表示されるので短い語句でそのページの独自性が表現できるとよいでしょう。

<title>ＷＥＢリファレンス‐《ようこそオーガスの窓へ》‐</title>

meta要素

視覚的に表現されるものではないが、検索エンジンに伝えたいことや、ブラウザに伝えたいことを記述するものって感じかな。

<html>
<head>
<meta …       >
</head>
</html>
TOPへ
HTTPヘッダの代用としてのmeta要素

http-equiv属性を使用することで、HTMLヘッダと同等のメタデータを埋め込める。日本語を扱う場合はほぼ必須である文字セット(言語ではない)を定義できる。

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" >
Type : 文字コード［Charset］を宣言する
<meta http-equiv="Content-Type"
  content="text/html; charset=Shift_JIS" >
Language : 言語を宣言する
<meta http-equiv="Content-Language" content="ja" >
★javascript を使うことをを宣言する
<meta http-equiv="content-script-type" content="text/javascript" />
★css を使うことをを宣言する
<meta http-equiv="content-style-type" content="text/css" />
pragma : キャッシュさせない
<meta http-equiv="pragma" content="no-cache" />
No Image Toolbar: ツールバーを表示させない

ちょいと前のブラウザでは画像にカーソルを乗せると、画像ツールバーの画像が表示され、保存・印刷・メール添付などができるようになっていますが、サイトの性質上表示したくない場合に使います。

<meta http-equiv="imagetoolbar" content="no" />
meta要素のname属性

文書のプロパティ情報を宣言するのに使用します。content属性とセットで使用します。

各プロパティに対し、正しい内容をcontentに記述することが大切です。
誤った使い方や同一内容を繰り返し使うようなことをすれば、スパムと見なされるでしょう。
☆keywords : キーワードを宣言する
<meta name="keywords" content="半角カンマ区切りで,キーワードとなる語句を,最大１２個程度" >
☆description : 紹介・説明文を宣言する
<meta name="description" content="HPの紹介・説明文を記述する" >

Googleの検索結果に表示されることがあります。４０字程度が収まりがよいかと。長くても８０文字程度がよいとされてます。

abstract : 要約・抜粋を宣言する

descriptionと同じ内容を入れているサイトがたまにありますが、どうなんでしょう？subjectと同様descriptionで書ききれない内容や、要約を書き足したいのであれば別の内容であることが前提で、書いてもいいけど、くらいのものです。

<meta name="abstract" content="XHTMLリファレンスです。" />
author : 著作者・制作者を宣言する

Webページの著者やWebページを開設している会社名などを記入します。

<meta name="author" content="T.Augustine" />
creation dat : 作成日を宣言する

ここは欧米式に月(英単語)・日付(数字)・西暦の順で書きます。一般的に初版の日付を記述します。

<meta name="creation date" content="Novenbar 15, 2006" />
copyright : 著作権のクレジットを宣言する
<meta name="copyright" content="Copyright &copy; 2006-2009 T.Augustine" />
designer : デザイナーを宣言する
<meta name="designer" content="St.chanyiaam" />
subject : 概要を宣言する

descriptionが検索エンジンで結果に反映されるのに対し、特に結果に影響を及ぼすものではないようですが、descriptionで書ききれない内容の説明がしたいのであればこれを使うとよいでしょう。

<meta name="subject" content="XHTMLリファレンスです。" />
owner : オーナーを宣言する
<meta name="owner" content="オーナー" />
publisher : 出版者を宣言する

Webの世界で『出版者』とはピンときませんが、サイトを提供しているサーバーのオーナーに相当すると考えてよいでしょう。

<meta name="pubrisher" content="fc2.com" />
telephone : 電話番号を宣言する
<meta name="tel" scheme="000-000-0000" />
facsimile : ファクス番号を宣言する
<meta name="fax" scheme="000-000-0000" />
country code : 国番号を宣言する
<meta name="country code" scheme="81" />
generater : ページ作成ソフトを宣言する

有償HTMLエディタソフトを使用した場合は、自動で付与されます（だいたい）。

<meta name="generater" content="ez-HTML" />
targeted geographic area: 地理的対象エリアを宣言する
<meta name="Targted Geographic Area" content="Japan" />
distribution: メタタグの適用対象範囲を宣言する
<meta name="distribution" content="Global" />
coverage : サービス提供対象を宣言する
<meta name="coverage" content="Japan" />
classification : カテゴリ・分類を宣言する

カテゴリの分類方法は、Yahoo!などのサイトを参考にするとよいでしょう。

<meta name="classification" content="インターネット,スポーツ,プロレス" />
document class

「Completed」「Draft」「Living Document」「Published」…

<meta name="doc-class" content="Completed" />
rating : 対象年齢層

「General」「All Ages」「Safe For Kids」「Child」

<meta name="rating" content="General" />
★robots : 検索ロボットへの指示
No Archive : 保存させない
<meta name="robots" content="NOARCHIVE" />
No Image Index: 画像を検索させない
<meta name="robots" content="NOIMAGEINDEX" />
No Image Click: 画像へリンクさせない
<meta name="robots" content="NOIMAGECLICK" />
Expires : 有効期限
<meta name="expires" content="Novenbar 10, 2004" />
Revisit-After : ロボット再巡回までの日付
再度巡回してもらいたい場合に使用すます。最近はロボットが頻繁に巡回するので必要なければ使わない方がよい 
<meta name="revisit-after" content="5 days" />
TOPへ

link要素は、文書全体に対する情報を記述するものです。従って、head要素内に記述されます。

多くは、ナビゲーションを機能させるために定義されたものですが、一般的なブラウザでは実装されていません。その他、著者や著作権に関するページへのリンクを示します。

rel属性
index
現在の文書に対してインデックスを提供している文書へのナビゲーション
contents
現在の文書に対して目次を提供している文書へのナビゲーション。　私個人的には、indexとcontentsを同じものとし、サイトマップへリンクしています。
また、サンプルではシングルウォーテーションで囲ってますが、これはテキストブラウザで見たときに判りやすくするために私が独自にしているものです。 
<link rel="index contents" href="/sitemap.html"
 title=" 'オーガスの窓のサイトマップ' " />
next
次のページ文書を記すナビゲーション 
<link rel="next" href="/MARTIAL_ARTS/RIKIDOZAN/index.html"
 title=" 'NEXT 格闘技/プロレス/力道山年表‐戦前戦後を駆け抜けた一人の朝鮮人‐' " />
prev
前のページ文書を記すナビゲーション
start
一つのカテゴリなどの開始ページ文書へのナビゲーション 
<link rel="home start" href="/index.html"
 title=" 'HOME それいけ！力道山年表　オーガスの趣味の入り口‐《ようこそオーガスの窓へ》‐' " />
stylesheet
スタイルシートを別ファイルで記述した場合のリンク
alternate
同じ内容で別言語で記述したページ文書へのリンク
help
<link rel="help" href="/help.html" title=" 'Augus-Site HELP' " />
author
著者 
<link rel="author" href="/augustine.html"
 title=" 'T.Augustineの自己紹介‐《ようこそオーガスの窓へ》‐' " />
copyright
<link rel="copyright" href="/copyright.html"
 title=" '著作権・動作環境について‐《ようこそオーガスの窓へ》‐' " />
favicon
ブラウザ用アイコンを宣言する 
<link rel="shortcut icon" href="/img/augus.ico" />
stylesheet
スタイルシートを外部ファイルにして読み込む 
<link rel="stylesheet" type="text/css" href="/css/common.css" />
rev属性
made
文書の作者を示す時に使う。メールアドレスやホームページを記述するナビゲーション。
<link rev="made" href="mailto:rikidozan1114-master&#64;yahoo.co.jp" />
<link rev="made" href="http://taugus.web.fc2.com/" />
TOPへ

style要素

script要素

外部Javascriptを読み込む

<script  type="text/javascript"  src="/common/prototype.js" ></script>

読み込みエラーを表示する方法（デバッグ用？）

<script  type="text/javascript"  src="/common/prototype.js"
  onerror="alert('Error: failed to load ' + this.src)"></script>

案の定うまく動作しない

TOPへ

コメント

<!-- 
…～この間はコメント扱いになりブラウザ上で表示されません～
-->
 注意： DOCTYPE宣言より前に記述すると一部のブラウザではDOCTYPE宣言の形式に関わらず過去互換モードとしてレンダリングされることがあります。

TOPへ
ようこそオーガスの窓へ

IT用語辞典


inserted by FC2 system