- ベストアンサー
HTML、divについて
HTMLについて質問です。 <head> <body> 文章 <hr> 文章 <hr> 文章 </body> </head> というページを作った時、上、中、下の文章はそれぞれを特にcssに設定したいことはないですが、divで囲ってグループ分け？すべきでしょうか。 このままでも構わないでしょうか。 もうひとつ、現在はhead部にtitleではなくTITLEを使うべきなのでしょか。 回答よろしくお願いします。
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
先に書きましたので省きますが、 HTML4.01までは、推奨・非推奨となっていました。そして推奨要素だけを使用するstrict自体が推奨でした。 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 確かにブラウザは、HTMLが間違っていても何とかそれを表示しようと努力します。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから しかし、様々なHTMLバージョンの実装間での実験及び相互運用性を促進するため、次の動作を推奨する。 ・認識できない要素があった場合、ユーザエージェントは、内容のレンダリングを試みねばならない。 ・認識できない属性があった場合、ユーザエージェントは、当該属性定義全体(すなわち、属性とその値)を無視しなければならない。 ・認識できない属性値があった場合、ユーザエージェントは、デフォルトの属性値を用いねばならない。 ・宣言されていない実体があった場合、この実体を文字データとして扱わねばならない。 これに加えて、ユーザエージェントがユーザに対しエラーを知らせる機能を提供するよう推奨する。 ・エラー条件をどのように処理するかはユーザエージェントにより様々なので、HTML文書の著者もユーザも、特定のエラー復元方法に依存してはいけない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［B.1 不正文書に関する注意( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/appendix/notes.html#notes-invalid-docs )］より HTML5では、さすがにHTML4.01の勧告以来12年以上経過したので 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 一方で、ユーザーエージェントは古い要素や属性をサポートし続けなければなりません。このため、HTML5 仕様は製作者に対する要件と、ユーザーエージェントに対する要件を明確に分けています。たとえば、製作者は isindex や plaintext 要素を使用することはできませんが、ユーザーエージェントはこれらの要素を Web 上のコンテンツと互換性をとるかたちでサポートする必要があります。 「製作者の要件」「ユーザーエージェントの要件」という2つの適合性要件を定義したことで、要素や属性に「非推奨 (deprecated)」という扱いを行う必要はなくなりました。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点/1.2. 後方互換性( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#backwards-compatible )］より いずれにしても、それが不正であっても、ブラウザが期待通り表示してくれるからと考えてはならないのです。 <head> <body> 文章 <hr> 文章 <hr> 文章 </body> </head> は明らかな間違いで、表示すらされないはずです。head内にbodyは置けません。 <html> <head> </head> <body> 文章 <hr> 文章 <hr> 文章 </body> </html> だと思いますが、body直下に文章を直接書くことは出来ません。 7.5.1 BODY要素 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) この意味は、 <!ELEMENT 要素 BODY O O 開始タグ、終了タグ 省略可能 (%block;|SCRIPT)+ +(INS|DEL) ブロック要素か(|)SCRIPTをひとつ以上(+) およびINSまたはDEL -- document body --> ドキュメントの本文 です。 必ずブロック要素で囲むことが求められています。 よって <html> <head> <head> <body> <p>文章</p> <hr> <p>文章</p> <hr> <p>文章</p> </body> </html> でしょうね。HRにも意味があります。もし文書の内容的なものでないとしたら、スタイルシートで指定すべきです。 ★もっとも関心がありそうな問題点ですが、ウェブは巨大なデータベースです。それが利用されるためには、そのHTMLに何が書かれているかが機械にも分からないと利用されないのです。 例えば、次のように書かれていると <title>見出し</title> </head> <body> <div class="header"> <h1>見出し</h1> <p id="abstract">このページでは<strong>何々</strong>について詳しく説明しています</p> <div class="nav"> <ol> <li><a href=""></a></li> ・・・・・ </ol> </div> </div> <div class="section"> <h2>本文見出し</h2> ・・・・ <div class="section"> <h3>項見出し</h3> ・・・・ </div> <div class="footer"> </div> </body> 検索エンジンも無論ですが、世界中から発見しやすいですし・・なによりもあなた自身が将来的に分かりやすいです。 もちろんスタイルシートでデザインするにしても div.header{background-color;black;color:white;} を見れば、どこに何を指定してるか、すぐ分かりますよね。!!! タグを大文字で書くか書かないかは、HTML仕様で書く場合は問いませんがXHTMLの場合はXMLに従いますから、要素名、属性名は必ず小文字、値は""で括る。HTMLで省略可能な終了タグも省略してはならない。内容を持たない要素は/>で閉じるなどのルールを守る必要があります。 (注) HTML5では、HTMLであっても/>,>のいずれも使えます。 私は、xml,XHTMLも利用するので、統一してすべて小文字で書いてます。
その他の回答 (8)
大文字・小文字を使い分ける必要がない！とかかれていませんか？・・・ 以前、ＨＴＭＬでは、タグは、大文字、xhtmでは、小文字で書くことが推奨されていましたが、どちらで書いても問題ないことが、明らかにされていました。 ＨＴＭＬ５でも、まったく同じことがいえるのでは？・・・ 私は、タグはすべて小文字で書いています。 titleでも、ＴＩＴＬＥでも、Ｗ３ＣのValidatio(http://validator.w3.org/)も通ります。
補足
＞すべてのHTML文書には、HEAD中に、1つのTITLE要素があらねばならない。 とはありましたが、そのような文は見つけられませんでした。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.4.2
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞それともtitleとTITLEは使いわけるべきということでしょうか。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML要素型の中には、著者が終了タグを省略することを許容するものもある。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ (例えば、P要素型やLI要素型)。 さらに一部の要素型は、開始タグの省略も許容する。例えば、 HEADや BODYがこれである。 HTML DTDは、すべての要素型について、開始タグと終了タグが必須であるかどうかを示している。 HTMLの要素型には、内容が存在しないものもある。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 例えばline breakの要素 BRには内容がない。 その唯一の役割は、テキストに含まれる1つの行の終端を示すことである。 このような 空要素は、終了タグを絶対に持たない。 文書型定義にも仕様本文にも、どの要素型が空であるか(内容がないか)や、内容を持てる場合の正当な内容は何かといったことが、示されている。 要素名には、常に大文字小文字の区別はない。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［On SGML and HTML (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2 )］より これがHTMLのルールです。 それぞれの項目( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/lists.html#edef-OL )を見ると <!ELEMENT LI - O (%flow;)* -- list item --> 要素 LI - O 開始タグ省略できない(-) 終了タグ省略できる(0) (%flow;)がゼロ個以上(*) 箇条書きのの項目 と書いてあります。 このように、すべての情報は仕様書にあります。仕様書を見て分からないことをこの様な掲示板で聞くのがよいです。なぜなら、正確に正しくすべてを伝えることは難しいし、中には性格でない情報を答える人もいるからです。 一方、XHTMLは、HTMLをXMLの仕様に合わせて書き直したものですから、XMLのルールに従います。詳しくは ⇒たのしいXML: HTMLからXHTMLへ(書き方の注意)( http://www6.airnet.ne.jp/manyo/xml/struct/step2.html ) ⇒XHTMLへの移行を考える時のポイント( http://www.w-frontier.com/xhtml.html#move ) ⇒1. XHTMLとは何か( http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#xhtml ) XML/XHTMLで記述するときは、要素名は小文字でなければなりませんが、HTMLは「常に大文字小文字の区別はない。」ですから、<tiTLE>とかいても良いということです。 No.3でも 『タグを大文字で書くか書かないかは、HTML仕様で書く場合は問いませんがXHTMLの場合はXMLに従いますから、要素名、属性名は必ず小文字、値は""で括る。』 と答えさせていただいてます。 ・・・・分からないときは仕様書を調べてみるという癖をつけましょう。・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞ユーザーエージェントとはＩＥやＦｉｒｅＦＯＸのようなブラウザでしょうか。 いいえ、 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より ＞つまりブラウザがＨＴＭＬの形式を超えて、それぞれ独自のサポートしてしまっているために、本来のＨＴＭＬの使用法を無視されがちになってしまっているといことでしょうか。 なんとか、表示しようと頑張ります。--そのように仕様で定められている---ブロックに入ってなくても、仮にブロックをつくって入れてしまいます。このときの解釈に差があることがブラウザによる表示差の原因になることもしばしばです。 ＞やはり、ブロック要素にいれることが適切なのですね。 というより、ブロックに入っているはずですよ。 ＞完全に仕様書にのっとることもまた、必要とされていない場合もあるということですね。 誰も得しません。著者であるあなた自身がもっとも得をするのです。
お礼
回答有難うございました。
仕様書に従う従わないは、WHATWGとW3Cの話になりますが、この両者がたがいに協力し合って策定しているのが、現在のＨＴＭＬ５です。 利害とか見えるからいいではないか！・・・といわれるのであれば、別に仕様書に従う必要はありませんが、より多くの閲覧者に、見ていただきたいのであれば、仕様書に従って記述したほうがリスクが少ないということです。 健常者以外の閲覧者にも、あらゆるデバイスを利用する人に、情報を正しく伝えるという理念があるかないか？・・・の問題になると思います。 みえるだけでは、次元が低いとおもわないですか？・・・ そのあたりの解釈の問題です。 あなたが制作したＷＥＢを、閲覧者が、正しく見えないとしたら、せっかく見に来てくれた閲覧者に失礼と思わないのであれば、別に仕様書に従う必要もないでしょう。 もっと大人の考えを持ってＷＥＢと向いあっていただきたいと思います。 あらゆるブラウザでご自身の制作したページがどのようにみえているか？・・・を確かめられてみてはいかがでしょうか？・・・ たとえば、音声ブラウザでは？・・・ この辺が理解できれば、なぜ勧告が必要なのかも理解できると思いますよ！
補足
もちろん仕様書にのっとるべきという事は理解できました。 ですが、私が ＞完全に仕様書にのっとることもまた、必要とされていない場合もあるということですね。 といったのは、仕様書にtitleとTITLEを使い分けるべきと書かれているのにも関わらず、ここでの回答では全てtitleでもよいとのことでしたので、そう発言したのですが・・・ それともtitleとTITLEは使いわけるべきということでしょうか。
- DrFell
- ベストアンサー率55% (305/551)
sorakanaさんの意図がわかりかねますが、前の質問と併せて考えると、グループ分けした方がいいと思います。 今回のお題ですと、 <body> <div class="sansei"> <p>文章</p> <p>文章</p> </div> <div class="hantai"> <p>文章</p> <p>文章</p> </div> <div class="chuuritu"> <p>文章</p> <p>文章</p> </div> </body> などと、グループ分け（構造化）しておいてはいかがでしょうか？ そのうえでデザインを付けるときには div{ border-bottom:1px solid #000; padding-bottom:0.5em; margin-bottom:1em; } .sansei{ background-image:url(○○.jpg) right; padding-right:150px;/*○○.jpgの横幅+アルファに変更してください*/ } などとされてはいかがでしょうか？ デザインは構造化の為のdivを利用するわけで、空のdivを挿入する必要はありません。後からデザイン的に画像が欲しいとなってもhtmlをいじる必要がなく、cssファイルを変更するだけで、そのｃｓｓファイルを参照しているページすべてに画像が挿入されます。 構造化する必要がある内容なら（最近新しく作られる場合は殆んど構造化する必要があると私は考えています）、構造化された方が、後々の管理が楽ですし、さまざまなメリットが後々生まれる可能性があります。サイト管理を続けると、増え続けますが、ご質問のような文章構造では、しょっちゅう全ページ書き直すことになるのではないか？と推察します。 「エラーでもいい、問題がなければやりたいようにやる。今の自分の表現したいことが、今の自分の環境でのみ見えたらいい」、というのも管理者であるsorakanaさんの自由です。 文法だのなんだの難しいことは今はわからないかもしれないので、お読み物として次のようなお話はいかがでしょうか？ http://web.archive.org/web/20100606054829/http://3ping.org/2005/09/27/0126
お礼
ブロック分けはしすぎなほどしようと思いました。 ＞デザインは構造化の為のdivを利用するわけで、空のdivを挿入する必要はありません。 やはり皆さんの反応から察するに、私の質問の仕方が悪いためにやりたいことは伝わっていないようです・・・ 説明に不備があり、すみませんでした。 ＞エラーでもいい、問題がなければやりたいようにやる。今の自分の表現したいことが、今の自分の環境でのみ見えたらいい」 とは思っていません。ただ理由が分からなかっただけです。 回答有難うございました。
- neko-ten
- ベストアンサー率55% (1287/2335)
DOM指定とかまともにできなくなるから、Ajaxや動的コンテンツ作成とかするならきちんと構造化しないといけない。 まぁ、気にしないなら気にしないで現状表示されるのは確かですが・・・ ただ ＞少なくとも自由にhtmlを書いてＩＥやＦｉｒｅＦＯＸでは不備なく表示されます。 不備なく表示されてるというより、無理やり表示してるので表面化していないってだけですね。 デコード段階ではエラー吐いてます。 上記のとおりDOMを扱い始めるとまともな指定ができなくなりますし、普通にエラー吐き始めます。 本来の仕様としては表示しないべきなんですが、ここはブラウザが勝手に解釈しているにすぎません。気を聞かせてると言えなくもないけど・・・。 ただ本来の仕様ではないので無茶過ぎる場合はまともに表示されないこともあるっぽい。 また、ブラウザで表示が変わることもあります。 規格ではNGなのを無理やり表示してるから、ブラウザによって実装違いがあります。 現在ブラウザによる実装違いがいろいろあって開発現場を困らせていますが、その原因の一端は仕様に乗っ取らないHTMLの氾濫があったと言われてます。 （・・・まぁ、IE6世代やNNといったバグや独自実装が多いブラウザがたくさんあったのが本原因だと思っていますが。） 現状、HTMLの仕様に乗っ取った構造を守ろうって考えが多くなってまして、ブラウザ開発もそれに乗っ取った考えが出てきています。 今後仕様を外れたHTMLはまともに表示されないって可能性は普通にありますね。というかはよなってほしい。IE6は滅してほしい。 あとはレンダリングに無駄なリソース食うようになるから、小規模なら気にならないけど大規模なサイトを作った場合にはきちんとstaticなのかどうかで表示速度が変わります。 一般的に例外処理扱いになりますから、本来のレンダリングとは別に処理します。 ＞というページを作った時、上、中、下の文章はそれぞれを特にcssに設定したいことはないですが、divで囲ってグループ分け？すべきでしょうか。 ＞このままでも構わないでしょうか。 headに本分入れてる時点でアレなのはまぁおいといて・・・ divを使うかどうかはデザイン次第だから、別に使わなくてもいい。 ただ、コンテンツ増やしてUIを考えて・・・階層化して・・・ とか考えると、きちんとオブジェクトを扱って言ったほうが後々楽です。
お礼
前の方に回答頂いて認識した内容の確認を再度できました。 アドバイスも有難うございました。 回答有難うございました。
- pasocom
- ベストアンサー率41% (3584/8637)
IEやFirefoxで問題なく表示される、とのことですが、現状ブラウザの種類はたくさんあります。GoogleChrome、Lunarscape、Opera、Safari。さらに今後スマホでネット閲覧する人も増えるでしょう。 それらの多くのブラウザで同じに表示されるか自分でいちいち確かめるのは大変ですね。 それで、リスク回避のためにはなるべく新しい仕様のHTMLなどの決まりを守った方が安心っていうことじゃないでしょうか。 ちなみに質問のような単純な構成であればどのブラウザでも現状同じに表示できるでしょうけど。 （必要なければdivタグを使うまでもない）。 二つ目ですが、titleタグを使うのはブラウザのアクティブバーのところにページ名を表示したり、ブックマーク登録の際に簡単にページ登録するためですね。制作者自身でもタイトル表示があった方が何かと便利だと思います。 （大文字、小文字という質問ならどっちでも同じというのが答えです）。
お礼
スマートで、納得できそうな、質問に理解のある回答有難うございます。 2つ目に関しては他の方に教えていただいた、「仕様書」（Ｗ３Ｃ）なるものに、titleとTITLEが分けて使うよう書かれていたのです。 回答有難うございました。
HTMLでは、大文字、xhtmlでは、小文字で書く、と言われていますが、どちらで書いてもエラーにはないません。 ただ、タグの意味を理解されていないようなので、仕様書を読まれることをお勧めします。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html 基本的な記述方法は、文章型宣言から始まり<html>～</html>で終わります。 <body>は、文章全体を表しますが・・・・・説明していると、文面が長くなりますので、ご自身で、仕様書を熟読してください。 書店に売っている本には、多くの間違いがあります。 W3Cの原文でお確かめください。英語が苦手な場合は、紹介したページでとりあえず学んでください。 すべてのことが決められています。ただしhtml4.01の仕様書は、1999-12-24に勧告となったもので、現在はHTML5のドラフトで、記述される方が多いようです。 一部の仕様が決定していないので、現状では、HTML4.01とxhtml1.1が、最新版ということになります。 <hr>タグは、ほとんど使うことがないのが現状ではないかな？・・・<border>タグで自由になるはずです。 ｈｔｍｌは文章構造を書くものだという認識がないと、なかなか前に進めないと思いますよ。 参考になるかどうかはわかりませんが、下記サイトからtemplateをダウンロードして学んでいただければ、幸いです。
補足
他の質問から引き続き回答有難うございます。 ですが、 ＞ただ、タグの意味を理解されていないようなので、仕様書を読まれることをお勧めします。 の意味や ＞すべてのことが決められています。 決められている。ではなく、それに従う必要性、反した場合のリスクを教えていただきたいのです。 少なくとも自由にhtmlを書いてＩＥやＦｉｒｅＦＯＸでは不備なく表示されます。 ですがそこにそれ以外のところで、理解できない注文があるため「理由」や「リスク」を教えていただきたいのです。
お礼
ユーザーエージェントとはＩＥやＦｉｒｅＦＯＸのようなブラウザでしょうか。 つまりブラウザがＨＴＭＬの形式を超えて、それぞれ独自のサポートしてしまっているために、本来のＨＴＭＬの使用法を無視されがちになってしまっているといことでしょうか。 やはり、ブロック要素にいれることが適切なのですね。 <p>の存在をわすれていたのと、<p>で良い事を教えていただき有難うございます。 titleは大文字でも小文字でも構わないとのことで。 完全に仕様書にのっとることもまた、必要とされていない場合もあるということですね。 回答有難うございました。
補足
お察しの通りheadにbodyを入れてしまったのは、間違えてしまいました；