HTMLに関する質問です。


W3Cなどを見てもよくわからないので質問させていただきます。
HTMLのタグは明確にどこからどこに記述しなければいけないといった規定がありますでしょうか?

例えば表示上はまったく意味がりませんが
<html>
<center>
<title>test</title>
</center>
このようにcenterタグでtitleを囲んだり
divタグでmetaタグを囲んだりしても
仕様などでダメと規定されていますか?
これはもちろん表示上はまったく意味がありませんが
仕様として上に記載した記述の方法に規定があればおしえていただければと思います。

回答の条件
  • 1人2回まで
  • 登録:2007/03/12 23:32:23
  • 終了:2007/03/16 08:54:17

回答(5件)

id:b-wind No.1

b-wind回答回数3344ベストアンサー獲得回数4402007/03/12 23:40:02

ポイント20pt

ダメです。HTML は SGML 文書なので、DTD によって規定されています。

たとえばこのページは

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

と宣言されていますのでこれに従わない場合は文法エラーです。

(ブラウザがどう扱うかは別問題)


その他仕様については以下のページに邦訳があります。

HTML 4.01 Specification (ja)

id:quocard

ありがとうございます。

DTDによって規定されてるわけですね。

参考にさせていただきます。

2007/03/16 08:45:07
id:Baiden No.2

Baiden回答回数15ベストアンサー獲得回数32007/03/13 00:10:54

ポイント5pt

W3Cを見ても良く解らなかったとの事なので…

質問で例示されているようなHTMLがどう誤っているのかを確認されるのでしたら、

Another HTML-lint gateway

ここの文法チェック(&エラー解説)も参考になるかと思います。

id:quocard

ありがとうございます。

こちらも使用させていただきます。

2007/03/16 08:45:22
id:jiangmin-alt No.3

jiangmin回答回数125ベストアンサー獲得回数82007/03/13 01:30:21

ポイント20pt

http://www.kanzaki.com/docs/html/element-tree.html

HTMLなどのSGML文書は、どの要素がどの要素の中に書けるのかが、木構造に定義されています。リンク先を見てください。例えば、HEADとBODYはHTMLの直下に書けて、TITLEはHEADの下に、CENTERはBODYの下にありますから、TITLEとCENTERを相互に入れ子にすることは出来ません。

id:quocard

こちらのサイト非常に参考になります。

ありがとうございます。

2007/03/16 08:45:48
id:quintia No.4

quintia回答回数562ベストアンサー獲得回数712007/03/13 02:13:43

ポイント30pt

例えばこれ

http://www.w3.org/TR/html401/struct/global.html

難しく見えるでしょうが、Contents の中に例えば 3.The HTML element ってありますね。

HTML要素(ここではタグという言葉は要素の「開始」と「終わり」の宣言という意味でのみ使います)についての説明です。

ジャンプしてみてください。


7.3 The HTML element

の部分です。まず見るのは、

Start tag: optional, End tag: optional

の部分。開始タグと終了タグは"optional"要は"選択"となっています。

つまりhtml要素の開始タグと終了タグは省略可能です。

気をつけるのは省略可能なのは開始タグと終了タグであって、html要素ではないことです(つまり開始タグと終了タグが無くてもどこがhtml要素なのかが判別可能なので無くてもいいということですか)。


その上の方に

<!ELEMENT HTML O O (%html.content;)    -- document root element -->

とあります。HTML要素は(%html.content;)を中に入れることができます、と書いてあります。%html.content;がリンクになっているのでちょっと押してみましょう。

<!--================ Document Structure ==================================-->
<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;)    -- document root element -->
<!ATTLIST HTML
  %i18n;                               -- lang, dir --
  >

とあります。

<!ENTITY % html.content "HEAD, BODY">

の部分が見るべきところです。html.content はHEADとBODYを(この順番で)含める(含めなければならない)とあります。


1つ前のページに戻って 7.4.1 The HEAD element というのを見てみましょう。

Start tag: optional, End tag: optional

なので開始タグ終了タグは省略可能。

<!ELEMENT HEAD O O (%head.content;) +(%head.misc;) -- document head -->

とあります。%head.content; が1つ、%head.misc;は複数入ってもよい。

では%head.content;のリンク先を見てみましょう。

<!ENTITY % head.content "TITLE &amp; BASE?">

とあります。TITLE は必須。BASEはその後ろに?が付いているので0個か1個という意味です。& は"かつ"という意味なので、"TITLEは必須でかつ0個か1個のBASE"となりますね。


http://www.w3.org/TR/html401/struct/global.html

に戻ります。

The TITLE elementのリンクをたどります。

7.4.2 The TITLE element

のところに、

Start tag: required, End tag: required

とあります。

上で見たように"TITLEは必須"でした。加えて、title要素の開始タグと終了タグはrequired、つまり必須です。

<title>タイトル</title>

という形式が必須であることが判ります。

1つ戻って、%head.misc;のリンク先を見てみましょう。

<!ENTITY % head.misc "SCRIPT|STYLE|META|LINK|OBJECT" -- repeatable head elements -->

とあります。SCRIPT,STYLE,META,LINK,OBJECT が | で区切られて書いてあります。| は or を意味します。この中のどれかになります。


また

http://www.w3.org/TR/html401/struct/global.html

に戻りましょう。

7.5.1 The BODY element

を見ます。

またもや、

Start tag: optional, End tag: optional

とあって、開始タグと終了タグは省略可能です。


ここまで整理します。

html要素がトップレベルにある。でも開始タグ終了タグは省略可能。

html要素はheadとbodyを持つ。

head要素は%head.content;を1つ、%head.misc;はなくてもよいし複数でも可。

%head.content; はtitle要素を1つ、base要素を0か1個。

title要素の開始タグ終了タグは必須。

body要素は開始タグ終了タグは省略可能。

ということは。

<title>タイトルです</title>
<p>本文</p>

は正しいです。


body要素をもう一度見てみます。

<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->

とあって、(%block; か SCRIPT)の繰り返しが必要だとなっています。


%block; って何? という話になります。

htmlの各要素はいくつかの例外を除いて、ブロックレベルエレメントとインラインエレメントに分かれます。

各要素には、ブロックレベルエレメントを中に入れられないもの、インラインエレメントを中にいれられないもの、ブロックレベルエレメントもインラインエレメントも入れられるもの、と大ざっぱに分かれます。

また、親要素にできるものの制限もあります。ブロックレベルエレメントの中に入れられないもの、インラインエレメントの中に入れられないもの、ブロックレベルエレメントとインラインエレメントの両方に入れられるもの、とまた大ざっぱに分かれます。


こういうルールが繋がって、書いて良い悪いが決まります。


ちなみに質問にあるhtmlですが、

まず、

http://www.w3.org/TR/html401/present/graphics.html#edef-CENTER

に"The CENTER element is deprecated."とあって、4.01では推奨されないことが判ります。

この時点で4.01としてはアウト。


まぁ、それはおいておくとして。

html要素の下にはheadかbodyが必要。

headの開始タグは省略できるとしてもtitle要素が必須。

ところがその前にcenter要素がきて、これはbody要素の中になければならない。

この時点で、head要素が終わる前にbody要素に突入してしまっている、という解釈になるのでアウト。

という感じです。


実際は必ずしも細かい部分を覚える必要はなくて(覚えておいて損はないけど)、些末な間違いはチェッカにかけてあぶり出した方がよいでしょう。

id:quocard

ありがとうございます。

こんなに懇切丁寧に回答いただけるなんて

とてもうれしいです。

こちらを拝見して理解することが出来ました。

2007/03/16 08:52:03
id:toku4sr4agent No.5

toku4sr4agent回答回数349ベストアンサー獲得回数282007/03/13 02:19:12

ポイント25pt

今、人力検索はてなで、この質問を見ている瞬間は、まさにインターネットブラウザ(InternetExplorerなど)で、インターネット上にある文書ファイルをご覧になっていますよね?


見た目は文章などに飾りがついているものですが、インターネットブラウザというソフトが認識できる文章で書かなくてはいけません。文章の場合、一般の言語と同じように文法が存在します。


ここでソフトを日本人に例えるとするならば、日本人に通じる文章を書く場合には、日本人が認識できる文章(言語)で、なおかつできるだけ正しい文法で書く必要があります。


WEB上で使われている、インターネットブラウザが認識できる特殊な言葉をHTML(HTMLは「Hyper Text Markup Language」の頭文字の略)と言っています。



この質問のページのソースファイルを見ると

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<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">

ということが最初のほうに書いてあります。


最初の一行目

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

は、HTMLという特殊な言語の中でも、HTML 4.01という文法のうち、比較的ゆるやかな決まり(規格)に基づいて書かれている、ということを表しています。

(HTML4.01には規格が厳しいもの、規格が比較的緩やかなもの、フレームが使える規格のものの3種類がある、と思ってください)


最初の一行目を見て、ブラウザはどんな文法で書かれているかを判別し、その文法に合った表示をします。


で、この特殊な言語であるHTMLには独特の決まりがあります。

例えば

<html>で始まったら</html>で終わることになっています。

もっと簡単に言うと、<html>がここからが始まりで、</html>がここで終わりの意味です。

括弧の場合【】でセットですよね?

タグも【と】がセットになっていると考えればわかりやすいと思います。(後のほうの括弧は口語に直すと「括弧閉じ」っていいますよね?)


更に、括弧が沢山ある場合は

【 「 『 』 」 】

という順番で閉じるのと同じように、閉じる順序が決まっています。


順に説明していくと

<html>

はこれからhtml文書が始まるよ、といった意味と思ってくださって構いません。

次の<head>は、「頭」の部分で、文法以外の必要な情報を記載する部分です。

<meta http-equiv="content-type" content="text/html; charset=utf-8">

は、utf-8という変換装置を使って日本語を表示しているという感じです。

(シフトJISとかEUCとか他にも表示方法があります。ここできちんとどの表示方法を使うか指定をしておかないと、わけのわからない文字になってしまいます。)


例えば、別の表示方法で間違って表示してしまうと質問文は

HTML・・磨瘁吮"倶ア・撫・с☆・・br /> 
W3C・・≦モ剃、銀!・b・遺!鞘"鞘!銀"俄!・>・・>・I・鞘!補!帚!・>・溪!・坂!障☆・・br /> HTML・・pモ違∴・轣ク・・≦メ凪!銀"俄!・%・・・菴違@・・¢・娯!違>・鯛!・>・・>・c◆荀上M壺!娯!や"岩!障☆・с@・・!・!玖[・br /> 
箴銀!遺!域;腓坂決・・¥瘁c◆・上o・潟′・岩!障○・凪!・br /> <html>
<center>
<title>test</title>
</center>
・凪!・h・・!・enter・帥h瘁・itle・偵;蚊s・・・br /> div・帥h瘁・eta・帥h痰偵;蚊s・・岩!冷!・b
篁輔・倪!・≦メсム・<>諠阪M壺!補"娯!・>・障☆・玖[・br /> ・凪"娯!・b・<m・謎氛蛯ク筝岩!・¥瘁c◆・上o・潟′・や"岩!障○・凪!・br /> 篁輔・倪!・@・・決・・・莠俄!冷!滉ヲ倅ス違∞莓号・・・ロ絎壺!娯!や"娯!違♀・冷!遺!・>・溪!・鯛"娯!違>艢昶!・!障☆・・

という感じになってしまいます。

(文字化けてしてしまいます。)


<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

この2行についてはあまり今回は関係ないので説明は省きます。


次に頭の部分に入れなければならないのは文章のタイトルです。

<title>     </title>

の中に入るのがタイトルです。


ここまでまとめますと

最初の一行目には、どんな文法か?を書くことになっています。

2行目は、今からhtmlの文書が始まることを宣言する命令

その次の、頭(head)の部分には最低限、

文字の表示方法(utf-8、シフトJISなど)、そのページのタイトルに関することなどを書くことになっています。

そして頭の部分が終わることを宣言する命令である</head>を書きます。


その後、いよいよ本文が始まることを示す<body>(身体?)を書きます。

<center>や<div>といったタグは、<body>の中に書かれている文章を整えるためのタグですので、頭の部分である<head>の中には書くことはできません。


なお、私も最初はHTMLの文法についてはちんぷんかんぷんでしたし、現在でも全てを理解できているわけではありません。

初めて2番の方が挙げられていた文法のチェックをした時は、間違いだらけで点数もマイナス・・・真っ青になりましたし、書いてある内容がほとんど理解できませんでした。

沢山HTMLで文書を書いてみて、慣れていくしかないと思います。


説明としては

http://www.kanzaki.com/docs/htminfo.html

上記あたりもわかりやすいかもしれません。


ご参考まで。

(但し、上記の認識の仕方が正しいかどうかは専門外ですのでわかりません。自分なりにわかりやすい言葉で説明したつもりですが、わかりにくかった場合には、コメント欄などで質問してください。)

id:quocard

ありがとうございます。

こちらもとても参考になります。

こんなに丁寧に解説いただけるとは思ってなかったので

とてもうれしいです。

重ね重ねありがとうございます。

2007/03/16 08:53:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません