• ベストアンサー

html タグの閉じスラッシュ前のスペースについて

(1).タグ閉じスラッシュ前のスペースはなぜ必要なのでしょうか。可能でしたら詳しく教えて頂けないでしょうか。   ↓ <br /> (2).昔のブラウザ等では <br/>としているとスラッシュまでを一連のタグとして認識してしまうからですか? (3).<img src=""/> ←この場合も src=""/ スラッシュまでを一つの属性として認識してしまうのでしょうか。

noname#204675
noname#204675
  • HTML
  • 回答数4
  • ありがとう数0

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

  • ベストアンサー
  • hirotn
  • ベストアンサー率59% (147/246)
回答No.3

A(1) ご質問の回答としては、HTMLとXHTMLの違いになります。(#2の回答者さんのとおり) XHTMLの仕様は#1の回答者さんの通りです。 (私が申し上げたいこと) XHTMLにおいてすべてのタグは必ず、閉じなければならないということです。 例) <br></br> <br />   ←このように書くこともでき、こちらが推奨されていることは#1の回答者さんの回答の通りです。 ただし、以下はNGです。<p></p>のみが許されています。この場合、<p>< /p>のような書き方もダメです。 <p /> A(2) ブラウザによって解釈がごちゃごちゃです。仕様に従っていない場合もあるからです。 申し訳ありませんが理路整然と切り分けた考察は知りません。 A(3) いいえとも言えますし、微妙なところです。 HTMLの場合はクォーテーションがなくても解釈するブラウザがありましたが、 XHTMLの場合はクォーテーションが必須となります。

その他の回答 (3)

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.4

XML における空要素タグの定義では、スペースは有っても無くても有効です。 http://www.w3.org/TR/REC-xml/#NT-EmptyElemTag XML の応用である XHTML1 の定義も同様ですが、 互換性の為にスペースを入れろと案内があります。 http://www.w3.org/TR/xhtml1/#h-4.6 http://www.w3.org/TR/xhtml1/#guidelines これは推測するに、質問の(2)(3)のケースを想定している為でしょう。 XML とは関係のない HTML5 では、そもそも空要素タグの閉じスラッシュ自体が不要なので、書いても意味はないと定義されています。(必要なケースも存在しますが) http://www.w3.org/TR/html5/syntax.html#start-tags これは推測するに、XHTML5 文書との運用性を考慮しているためでしょう。 というわけで質問者様が X のつかない HTML の質問をなさっているならば、  そもそもスラッシュが不要  なんらかの理由でスラッシュを書くならば、スペースは任意  更に古い環境を考慮する特別な理由があるならば、スペースは必要 XHTML の質問をなさっているならば、  スラッシュは必要だがスペースは任意  XHTML を理解できない古い環境を考慮するなら、そもそもXHTMLなんてやめなさい

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

質問する前に一度調べた方が良いですよ。 「HTMLとXHTMLの違い」 仕様書はもちろん、簡易説明しているサイトや論文のような解説サイトまでありますから。 ------------- HTMLとXHTMLの仕様の違いであって、 ブラウザではどちらでもレンダリングしてくれる可能性大。 XHTMLでは、閉じタグが必須だけど、 <br><img><hr><input>など閉じタグの代用として、 半角スペース+スラッシュにするという決まり = それがルールというか、仕様。 ------------- 誰もが言葉を理解しあえるように、日本語にもルール(文法)がある。 同様に、ウェブページも万人(制作者も回覧者も)が便利に利用できるよう、HTMLも正しく解釈されるよう、W3Cで草案/協議され、共通のルールを作った。 不備を感じるかもしれないが、「郷に入れば郷に従え」って事かな。 「どっちでも、適当でいいんじゃない」といえば、そうかもしれないし、文法/仕様を無視するのは損する事はあっても得をする事はない。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

文法チェックに を使われると思いますが、そのときに警告され、→解説にリンクすると 「空要素タグ <TAG> を閉じるときは `/>` に空白を先行させましょう。」  http://openlab.ring.gr.jp/k16/htmllint/explain.html#leading-space-endtag-slash と解説ページに進みます。 XHTMLには付属文書で  ⇒HTML互換性ガイドライン ( http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#guidelines ) 【引用】____________ここから C.2 空要素  たとえば <br /> や <hr />, <img src="karen.jpg" alt="Karen" /> といったように、空要素の末尾の / と > との前にスペースを1個組み込むこと。  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[XHTML 1.0: 拡張可能ハイパーテキストマークアップ言語( http://www.doraneko.org/webauth/xhtml10/20000126/Overview.html#guidelines )]より  たぶん、ここで聞くより、まず仕様書を探すことを身につけましょう。正確で正しい情報が得られますし、付帯した様々な知識が得られます。

関連するQ&A

  • HTMLのIMGタグについて

    HTMLのimgタグで(1)と(2)のようにした場合、表示が異なります。 (1)のほうが画像間のスペースが広くなります。また(2)の場合でも ほんの少しスペースが開くようです。 (1) <img src="image1"> <img src="image2"> (2) <img src="image1"><img src="image2"> HTMLは文章の構造タグなので(1)でも(2)の場合でも、改行は関係ないので 同じ表示になるべきなのではないでしょうか? なぜ異なった表示になるのでしょうか。 また画像間のスペースを0にしたいのですが、何か方法を教えてください。

    • ベストアンサー
    • HTML
  • 画像タグについて

    画像タグについて テキストエディタにHTML(タグ)を入力してホームページの作成を目指して勉強しています。 ボタンの画像を横一列で4つ並べる場合のでタグの入力の仕方なんですが、 使用しているテキストでは改行せずに横に並べてタグを入力していきましょう。 となっています。 正解→<img src="A" ><img src="B" ><img src="C" ><img src="D" > 不正解↓ <img src="A" > <img src="B" > <img src="C" > <img src="D" > 理由としてはブラウザできれいに表示されるからだそうです。 実際にやってみると確かに不正解パターンより正解パターンの方がブラウザで隙間なくきれいに表示されています。 疑問なのですが、同じタグを縦で入力するか横に入力するかで なぜ、ブラウザの表示に違いで出るのでしょうか? また、<img src="" >タグ以外でも,改行しないで横に入力するタグはあるのでしょうか? それはどうやって見分けるのでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 勝手にタグが改変されてしまいます。

    初心者レベルでお許しください。 ブログにタグを貼ろうとしていますが、 <a href="~><img src="~></a><br><br><a href="~><img src="~></a><img src="~/gif.gif"> という構文をソースで入力し、 普通のモードに変えると、何故か勝手に改変されタグも変わってしまいます。 (~の部分はIDやホームページなどがかかれています。) <a target="_blank" href="http~></a><br /> <br /> <a target="_blank" href~></a><img alt="" src="http~> これが勝手に改変されないようにするにはどうしたらよろしいのでしょうか? 宜しくお願いいたします。

  • HTML5の終端タグ「 />」について

    HTML5で終端タグを「<img src="***" />」としているサイトを見かけます。 XHTML時代の名残なのかとも思いますが 残しておく理由などあるのでしょうか? 何か古いブラウザに認識させる為などの理由があるのでしょうか?

    • ベストアンサー
    • HTML
  • スラッシュ?

    jQueryで要素を作成する場合、jQuery()のExampleを参考にすると、作り方としては下記の方法があります。 $(’<タグ/>’).append(’body’); このタグ/にあるスラッシュ?みたいなのは何を意味するのでしょうか? なぜ、こんなのが必要なのでしょうか。仕様という以外理由はないですか? スラッシュ?みたいのがなくても動作します。 よろしくお願いします。

  • 並べた画像ファイルに不要なスペース行が入ってしまいます(HTML付き)。

    お世話になります。 下記のように、画像ファイルを2つ並べようと思っています。 +---------+ |隅.bmp | +---------+ +---------+ |隅.bmp | +---------+ ただ、上の画像に左側にスペースを入れると、なぜか2つの画像の 間に細いスペース行が入ってしまいます。 この2つの画像の間のスペース行を無くす方法はありますか? <p><img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br>  ↓↓↓ <p>&nbsp;<img border="0" src="隅.bmp" width="160" height="160"><br> <img border="0" src="隅.bmp" width="160" height="160"><br> よろしくお願いします。

  • 子タグを指定する方法

    質問させてください。 imgタグをクリックして画像を変える場合など、JavaScriptの呼び出し元と処理の対象が同じ場合、id属性を指定しなくてもthisを使えば処理が実現できます。(以下、具体例) <img src="hoge.jpg" onClick="this.src='foo.jpg'"/ > では、imgタグをクリックして画像を変える場合など、JavaScriptの処理の対象が呼び出し元の子タグなっている場合、thisのようなタグを指定する方法はないのでしょうか?(以下、具体例) <p onClick="???"> <!-- pタグをクリックした際にJavaScriptを呼び出す --> <img src="hoge.jpg"/ > </p> どなたかご存知でしたらお教えください。 以上宜しくお願いします。

  • imgタグについて

    imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2~ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか? もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • XHTML1.0で空要素タグの「/」は省略可能か

    XHTML 1.0で、エンコードがUTF-8であるなど一定の条件を満たせばXML宣言の省略は可能と聞きましたが、 空要素タグの「/」についてはどうでしょうか。 あるサイトで、XHTML 1.0で書かれているはずのページで、空要素タグに「/」が入っていないので (つまり、<br>とか<img src="...">のようになっている) ちょっと気になりました。 ブラウザーでは一応ちゃんと表示されてはいるようですが。

    • ベストアンサー
    • HTML
  • IMGタグごとにCSSを設定する方法

    自分でGoogleやYahoo検索をしても見つけられなかったので、どなたかお教えください。 現在、HTML内に以下のようにIMGタグで画像添付しています。 -------- <img src="***" width="160" height="140" /><br /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> <img src="***" width="32" height="30" /> -------- 最初に大きな画像を表示し、その下に並列するかたちで小さいサムネイルを並べています。 普段はCSSでレイアウトをして、画像それぞれにstyle属性やclass、ID属性などを付けています。それが、今回は上述のHTMLを外部サイトのPHPから出力しているもので、一切触れない(編集できない)状態にあります。 このような状態の場合でも、画像それぞれにCSSを設定することは可能なのでしょうか?最低限の希望は、大きい画像(160px*140px)をひとかたまり、サムネイル画像(32px*30px)をひとかたまりとして、それぞれのかたまりにCSSを設定できれば良いと思っています。 可能であればHTML+JavaScript+CSSで実現できる方法を希望します。 どなたかお教えください。よろしくお願いいたします。

専門家に質問してみよう