目次 < 前項 戻る 次項

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

第弐章 HTMLの基本構造 − 其の参 HTML要素

カミニミハナサレタラ、オノズカラウンヲツカメ?
といれニテ・・・・

神は見放さなかった?
達磨さん?
萌ぇ〜?
貴方、何人?
此処までに判明しているHTMLの構造

神は見放さなかった?

XHTML1.0 のDTD は、

W3CXHTML 1.0Multi-part XHTML fileDTDs

に記述してあります。一度見て下さい。戻る時は、ブラウザの戻るを使用してください。

何が書いてあるのかさっぱり分かりません。でもご心配なく。W3CではHTML4.01 Specification(仕様書)の中でDTDの読み方を解説していますし、解説用のDTDも用意されています・・・・?全部英語?わたしゃ英語なんて読めやしません!ドーすんだ?。

神様、見捨てないでーーーー!

唐突ですが、HTMLの進化は、

HTML4.01 ⇒ XHTML1.0 ⇒ XHTML1.1

でした。

W3Cのサイトでは、HTML4.01のHTML4.01 Specification(仕様書)が用意されていますが、XHTML1.0とXHTML1.1は、Recommendation(勧告仕様書)だけで、進化の過程と違いが書かれているだけでした。

必然、HTML4.01 Specification(仕様書)を参照する機会が一番多くなりました。

貧乏人の中年おっちゃん、翻訳ソフトなど購入できる金もなし。然し、さすがWWWの世界。無料の翻訳サービスが有りました。Googleさんありがとうゴザイマス!私はGoogleツールバー内の ”翻訳” を使用してHTML4.01 Specificationを調べていました。

然し、翻訳された内容が機械的なので、意味が解らない部分がありましたので、自分なりに解釈して翻訳していましたが、またも、さすが!WWWの世界!HTML 4仕様書邦訳計画さんがHTML 4.01 仕様書邦訳を公開してるではありませんか!

そして、とても参考になったのが、HTMLの確認に欠かせない、Another HTML-lint さん。こちらの結果の解説も凄い!!

コレラガアレバコンナさいとイラナイ・・・・
ソンナコトイワズニオツキアイクダサイ <(_ _)><(_ _)>

達磨さん? 頭と胴体だけですか?

さっそくDTDでHTML要素を調べてみましょう。

W3CXHTML 1.0Multi-part XHTML fileDTDsXHTML-1.0-Strict より

<!--================ Document Structure ==================================-->
<!-- the namespace URI designates the document profile -->
<!ELEMENT html (head, body)>

と書いてありました。これの意味を解析します。が、その前に、言い訳を1つ。

DTDの引用部はW3C-DTDに記述してある通りに表示したいと思っています。其の為に、御使用の環境により横方向のスクロールが必要になる場合が有ります。

予め御容赦下さい。 <(_ _)><(_ _)>

DTDは、<!> の間に定義を記述してあります。<!----> の間は、コメントです。

Document Structure
文書構造
コメント行です。HTML要素は、文書構造を定義するのでしょうか?
the namespace URI designates the document profile
説明欄のURIは、文書プロフィールを示します
この行もコメントですが、なんのこっちゃ?先に進みます。
ELEMENT html (head, body)
ELEMENT html
HTML要素の宣言を示します。
(head, body)
要素の内容。要素の内容は、( ) 内で、1つのグループとして纏められ、複数のグループが記述されている場合もあります
要素の内容の定義の読み方要素の内容の定義の読み方の例
A1個のA
ELEMENT aa (bb)
AA要素の内容は、1個のBB要素のみ
ELEMENT cc (dd|ee)+
CC要素の内容は、1個以上のDD要素かEE要素のどちらか一方
ELEMENT ff (%gg;)-(hh)
FF要素の内容は、ggで定義されている要素で、HH要素を含まない
A+1個以上のA
A?0個か1個のA
A*0個以上のA
+(A)Aを含んでも良い
-(A)Aを含まない
A|BA又はB
A,BAとBをこの順序で
A&BAとBを順不動で

ELEMENT html (head, body)と記述されていれば、

HTML要素の内容は、

  1. 1個のHEAD要素
  2. 1個のBODY要素

をこの順序で記述する。つまり

HTML要素の子要素はHEAD要素とBODY要素をこの順序で一回だけ書く事以外は認められない。

ということです。

なるほど!HTML文書は、HEAD要素BODY要素で構成されているんですね。

当にHTML要素は、文書構造を定義していました。

萌ぇ〜? ワタシャヲタクじゃないですよ!

ヲタクさんの間では、萌え属性とか眼鏡属性等と盛り上がっているようで・・・?
 <(_ _)><(_ _)>

要素の属性です。要素の属性は、ATTLIST (ATTribute LIST の略か?)で定義されています。

W3CXHTML 1.0Multi-part XHTML fileDTDsXHTML-1.0-Strict より

<!ATTLIST html
  %i18n;
  id          ID             #IMPLIED
  xmlns       %URI;          #FIXED 'http://www.w3.org/1999/xhtml'  >

HTML要素の属性です。i18n に記述してある属性、id属性、xmlns属性を指定できると定義されています。属性は、値を持ち、該当要素に特徴付けをします。

id属性

id属性は、該当要素に識別名IDentification)を付けます。

xmlns属性

xmlns属性は、前節で直訳?した、『 説明欄のURIは、文書プロフィールを示します 』 の部分で、

URIで指し示されているW3Cの文書プロフィールに準じて書かれたXML文書

だと明記する意味だそうです。

貴方、何人? 変人・・・・

で、何の話かというと、HTML要素の i18n に定義してある属性(国際化対応用の属性)です。
ENTITY(実態/構成要素)に記述してあります。

W3CXHTML 1.0Multi-part XHTML fileDTDsXHTML-1.0-Strict より

<!-- internationalization attributes
  lang        language code (backwards compatible)
  xml:lang    language code (as per XML 1.0 spec)
  dir         direction for weak/neutral text -->
<!ENTITY % i18n
 "lang        %LanguageCode; #IMPLIED
  xml:lang    %LanguageCode; #IMPLIED
  dir         (ltr|rtl)      #IMPLIED"  >

i18n ?

internationalization を国際化と訳しました。WWW は、文字通り World Wide ですから、internationalization という表記がDTD内の各所に必要になります。

が、internationalization ではあまりに長いので、internationalization をどの様に略せば良いのか・・・・

そこで、internationalization の i 〜 n 間の nternationalizatio の文字数が18文字なので internationalization を i18n と略しています。

lang 属性 , xml:lang 属性

lang 及び xml:lang 属性は Language Code で何語で文書を書いているのか。

WakariMasuka?

ページの書き出しが

Hello! Watasino name ha Georgi desu

だったとします。ブラウザは何語で書かれていると判断するでしょうか?出だしが Hello だから英語だと判断したとします。

元締め?の項目でも書きましたが、体の不自由な方もウエブページを閲覧します。目の不自由な方は、音声ブラウザでウエブページを閲覧します。ページの内容を音声で読み上げてくれるブラウザです。

上記の場合、どのように解釈して読むのでしょう。

Hello - unknown - name - unknown - Georgi - unknown

とでも読むのでしょうか。

しかし、そのウエブページが日本語で書かれていると明示されていたら、音声ブラウザは

ハロー、わたしの、ネーム、は、ジョージ、です

と解釈して読んでくれるはずかな?

かなり強引な説明でしたが、DTDでは、HTML要素の属性 lang 及び xml:lang は省略可となっていますが、こう考えると、省略はしない方が良いと判断できます。

W3C内にはWAI(Web Accessibility Initiative)という部会があり、アクセシビリティ(利便性)の研究を行っています。

WAIは、HTML要素の lang属性 は省略しないように勧めています。

又、W3Cの XHTML 1.0 Recommendation のC7には、

W3CXHTML™ 1.0 RecommendationC7 より

C.7. The lang and xml:lang Attributes
Use both the lang and xml:lang attributes when specifying the language of an element. The value of the xml:lang attribute takes precedence

C.7. lang 及び xml:lang 属性
要素内で言語指定する場合、lang 及び xml:lang 属性を両方使用して下さい。xml:lang 属性が優先されます。

という事で、当サイトでも HTML要素の lang 及び xml:lang 属性省略不可 とします。

dir属性

dir属性は、文章を左右どちらからから表示するのか(DIRection for weak/neutral text)ですが、UAには、文書内で使用している言語に応じて表示方向を制御する仕組みが組み込まれています。日本語なら左から右に、アラビア語なら右から左に表示するでしょう。

省略しても何ら問題がありませし、BDO要素で表示方向の制御を無効にする場合を除き、正常に解釈しないようです。

HTML要素に dir="rtl" と指定したページを作ってみましたが、with ? mark です。

開始タグの属性の記述方法です。

  1. 要素名の後に半角の空白を空けて、属性=" と記述します。
    <html lang="
  2. 空白を空けずに属性の値 を記入します。属性の値は省略不可です。
    <html lang="ja-JP
  3. 空白を空けずに " で属性の値を閉じます。
    <html lang="ja-JP"
  4. 属性が複数ある場合は、半角の空白を空けて同様に続けます。
    <html lang="ja-JP" xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml"
    属性の記述順は任意です。
  5. 最後に、空白を空けず > を書いてタグを閉じます。
    <html lang="ja-JP" xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml">

此処までに判明しているXHTMLの基本構造

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja-JP" xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml">
<head>

HEAD要素の内容
(ヘッダ部 ページ全体に関する事柄)

</head>
<body>

BODY要素の内容
(実際に表示されるページの構成や内容)

</body>
</html>

目次 < 前項 戻る Top ↑ 次項

Created:Jun 01, 2005 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新