ベストアンサー

imgタグをそのまま使うことは正しいの？

2009/02/22 17:06

<h2>hogehogehoge</h2> <p>hogehogehogehogehogehogehoge</p> <img src="images/hoge.gif" alt"hoge" /> これって正しいですか？ <h2>はタイトル <p>は段落（文章？） <img>は？？？？画像？もしかして正確にはimgタグも<p>とかで囲わなければいけないのか？教えてください。。。

biwanoha
お礼率24% (109/450)

HTML
回答数9
ありがとう数2

みんなの回答 （9）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/22 18:07 回答No.4

<img>は空要素のインライン要素ですから、body内にそのまま置けません。必ず仕様書を見ましょうね。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> 　--- 7.5.1 BODY要素 ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) ★BODYには、%block;(ブロック要素)とSCRIPT(スクリプト)が+(一つ以上) +および(INS|DEL)以外は入れられないと明記してある。そして、 <!ELEMENT IMG - O EMPTY -- Embedded image --> 　空要素であり、インライン要素です。　よって、body直下に置く場合は、必ずブロック要素内に置かなければなりません。たとえば<p></p>で括るとか・・・　ですから、 <body> 　　<h1>見出しレベル１</h1> 　　<img src=""???> は間違い、それも最も基本的な間違いです。 <body> 　　<h1>見出しレベル1</h1> 　　<p> 　　　　<img> 　　</p> と書かなければなりません。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^ 　<p>は段落を示すブロック要素で内部にインライン要素以外は含むことが出来ません。</p>は省略できますが、XHTMLを考慮すると省略しないほうが望ましい。　<br>は強制改行 <!ELEMENT BR - O EMPTY -- forced 行区切り --> 　であって、段落区切りとはまったく異なります。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから BR要素は、現在のテキスト行を強制的に区切る(終了させる)。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-BR )］より　行間を空けるために<p></p>を使い、そうでない場合は<br>を使うのは、基本的な誤りです。スタイルシートで段落間のスペースは調整しましょう。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから P要素は、1つの段落を表し、P要素自体を含め、ブロックレベル要素を内容とすることはできない。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#edef-P )］より ★HTMLを学ぶとき、最初に学ぶのは、ブロック要素とインライン要素の違いです。その説明を端折っているサイトや本は捨ててしまいましょう。とりあえず、こちらのサイトあたりで正しいHTMLの書き方を身につけましょう。はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )

その他の回答 (8)

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/23 08:18 回答No.9

No.6 ORUKA1951です。先の回答は訂正します。 DTD確認してみました。確かに、Transitinalではエラーではないですね。・・すみませんでした。

buntan_bun
ベストアンサー率62% (32/51)

2009/02/23 06:28 回答No.8

正しいかどうかは、採用している文書型によります。次の文書型定義（DTD）に当たってみました。 DTDは、テキストエディタで開くことができます。上はHTML4.01 Transitional、下はHTML4.01 Strict用のDTDです。 http://www.w3.org/TR/html4/loose.dtd http://www.w3.org/TR/html4/strict.dtd まず、Transitionalから。 body要素は次のように定義されています。 <!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body --> body要素は、flowが0回以上出現してよい、という意味です。 flowは次のように定義されています。 <!ENTITY % flow "%block; | %inline;"> ブロックとインラインのどちらかが出現しなければならない。まとめると、body要素にはブロックとインラインのどちらかが出現してよい、という意味です。したがって、<body><p><img></p></body>や<body><img></body>という書き方は、どちらもHTML4.01 Transitionalの仕様として正しい、ということになります。次に、Strictです。 body要素は次のように定義されています。 <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> body要素は、ブロックかスクリプトが1回以上出現しなければならない、という意味です。 img要素はブロックでもスクリプトでもないので、<body><img></body>という書き方は、HTML4.01 Strictの仕様として間違い、ということになります。また、<body><p><img></p></body>という書き方が、HTML4.01 Strictの仕様として正しい、ということになります。（ブロックであれば、p要素でなくても構いません）なお、XHTML1.0の場合も同様の理由により、Transitionalであれば正しい、Strictであれば間違い、ということになります。（提示されたソースを見ると、XHTMLっぽいですね） XHTML1.0のDTDは、次になります。 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

noname#100277

2009/02/23 00:56 回答No.7

規約違反に相当する可能性が在りますがちゃんと認識しなければ行けない事なので・・・検証１サイト http://validator.w3.org/ 検証２サイト http://openlab.ring.gr.jp/k16/htmllint/htmllint.html で以下のソースを検証して見ましょう。 <?xml version="1.0" encoding="Shift_JIS"?> ＃１ <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="application/xhtml+xml; charset=shift_jis" /> <meta http-equiv="content-style-Type" content="text/css" /> <meta name="check" content="確認" /> <meta name="keywords" content="check" /> <meta name="description" content="check" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="pragma" content="no-cache" /> <title>check</title> <link rev="made" href="mailto:yahoo@yahoo.co.jp" /> <link rel="next" href="index2.html" /> <link rel="stylesheet" type="text/css" href="css.css" /> </head> <body> <＃２>（開始） <img src="img.jpeg" alt="img" title="img" width="1" height="1" /> </＃２>（終了） </body> </html> 例ではXHTML 1.0として、＃１にはStrictとTransitionalのどちらかの記述を。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ＃２にはStrictの場合はブロックレベル要素を入れ（divやp等）、Transitionalの場合には入れないで省略。（検証用に入れるのと入れないので作成。） ※StrictでもTransitionalでも入れたソースと入れないソースを作る。コレを４つのファイルにして上記の検証で実行。 Strictの場合はブロックレベルの要素で囲まないとエラー。 Transitionalの場合はどちらでもエラーは確認されない。仕様書を引用したり、仕様書を信望するのは構わないが、HTMLの仕様勧告してるw3cでTransitionalの場合ドチラでもエラーを返さないのは「構文」が正しい事を意味する。検証１サイトよりも検証２サイトの方が厳格に構文チェックするのにも関わらず、エラーは一切無い。拠ってimgはStrictの場合はブロックレベルで囲む。 Transitionalの場合はどちらでも構わない。コレが現実的な回答です。

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/02/22 23:45 回答No.6

　置いておこうかとは思ったのですが、やはり今後このスレッドを見られた方が間違わないように補足だけ　<img>はinline要素なので、Strict(厳密型)もTransitional(移行型)も、body要素には入れられません。いずれもエラーになります。（が、ブラウザは、エラーを無視して表示するように定められています。）　StrictとTransitionalの違いは、【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML 4.01移行型DTD。これは、厳密型DTDのすべての要素・属性に加えて、推奨しない要素や属性も含む(推奨しないもののほとんどは視覚的プレゼンテーションに関わるものである)。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html )］より　という推奨しない要素や属性も使えるというだけで、文法まで許しているわけではありません。　詳しくは、3.3 HTML DTDの読み方 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3 )をご覧ください。

noname#100277

2009/02/22 22:35 回答No.5

Transitionalならエラーでは無い。 Strictならエラーに成る。インラインはブロックで囲む事。

steel_gray
ベストアンサー率66% (1052/1578)

2009/02/22 17:49 回答No.3

HTMLにも色々規格があって、厳格な規格ではbody直下に置くことは文法違反です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html こちらでHTMLの文法チェックをすると http://openlab.ring.gr.jp/k16/htmllint/explain.html#excluded-element こんなエラーとなる事があります。

pasocom
ベストアンサー率41% (3584/8637)

2009/02/22 17:29 回答No.2

<h2>はタイトルというより、「見出し＝大きな文字」です。一般に言うタイトルとは<title>タグです。 <p>は段落（文章？） <p>は単独で使用して段落です。</p>は不要。ただし<br>より大きな段落です。 <img>は？？？？画像です。＞正確にはimgタグも<p>とかで囲わなければいけないのか？そんなことはありません。