web-dev-qa-db-ja.com

HTML 5:<br>、<br/>、または<br />のどちらですか。

他の答え をチェックしてみましたが、特に W3schools HTML 5リファレンスを見た後 /で混乱しています.

私は、HTML 4.01が単一タグを単に<img><br>に「許可」することになっていると思いました。それからXHTMLは<img /><br />誰かが古いブラウザ用のスペースがあると言った )と共に来ました。

今私はHTML 5を練習するときどのように私が私のコードをフォーマットすることになっているべきかと思っています。

<!DOCTYPE HTML>

<br><br/><br />のどれですか。

1866
Eikern

単に<br>で十分です。

他の形式はXHTMLとの互換性のためにあります。 XHTMLと同じコードを記述し、それをHTMLとしても機能させることを可能にするため。 HTMLを生成するシステムの中には、XMLジェネレータに基づいているものもあります。そのため、<br>タグだけを出力することはできません。あなたがそのようなシステムを使っているなら、<br/>を使っても大丈夫です、あなたがそれをする必要がなければそれはちょうど必要ではありません。

ただし、XHTMLを実際に使用する人はほとんどいません。 XHTMLとして解釈されるようにするには、コンテンツをapplication/xhtml+xmlとして提供する必要があります。これはIEの古いバージョンでは機能しません。 XHTMLをサポートしているブラウザでは。そのため、Web上のXHTMLのように見えるもののほとんどは、実際にはHTMLとして処理され、解釈されています。 XHTMLをtext/htmlとして扱う - 有害と見なされる を参照してください。

1411
Brian Campbell

HTML 5 Reference Draft からのこの引用は答えを提供すると思います:

ただし、一部の要素ではコンテンツを一切禁止しています。これらは無効要素として知られています。 HTMLでは、上記の構文をvoid要素に使用することはできません。そのような要素の場合、要素はパーサーによって自動的に閉じられるため、終了タグを省略する必要があります。そのような要素には、とりわけ、br、hr、link、およびmetaが含まれます。

HTMLの例:

<link type="text/css" rel="stylesheet" href="style.css">

XHTMLでは、XML構文上の要件により、これは上記のような明示的な終了タグまたは空の要素の構文を使用して明示的にする必要があることが規定されています。これは、開始タグの最後に直角ブラケットの直前にスラッシュを挿入することによって実現されます。

例:

<link type="text/css" href="style.css"/>

作成者は、HTML構文のvoid要素にも同じ構文を使用することを選択できます。著者の中にはスラッシュの前に空白を含めることを選択する人もいますが、これは必須ではありません。 (この方法で空白を使用することは、XHTML 1.0の付録Cの互換性ガイドラインから継承した規約です。)

208
Daan

XMLはタグを開いたままにすることを許可していないので、<br>を他の2つより少し悪化させます。他の2つは、古いブラウザとの互換性のために推奨される2番目(<br/>)とほぼ同等です。実際のところ、/の前のスペースは互換性のために好まれていますが、属性を持つタグに対してのみ意味があると思います。それで、私は<br/><br />のどちらかあなたの美学を喜ばせる方を言うでしょう。

要約すると、3つすべてが有効で、最初の1つ(<br>)は「移植性」が少し劣ります。

編集 :私たち全員が仕様に夢中になっているので、 dev.w3.orgに従って指摘する価値があると思います

開始タグは、正確に次の順序で、次の部分で構成されています。

  1. "<"文字.
  2. 要素のタグ名.
  3. オプションで、1つ以上の属性。各属性の前には1つ以上のスペース文字を付ける必要があります。
  4. オプションで、1つ以上のスペース文字.
  5. オプションで "/"文字。要素がvoid要素の場合にのみ存在できます。
  6. ">"文字.

HTML(HTML 4まで) :use <br>

HTML 5 <br>が推奨されますが、<br/>および<br />も使用できます

_ xhtml _ の場合:<br />が推奨されます。 <br/>または<br></br>も使用できます

ノート:

  • <br></br>はHTML 5では無効です。2つの改行と見なされます。
  • XHTMLは大文字と小文字を区別し、HTMLは大文字と小文字を区別しません。
  • 下位互換性のために、古いブラウザの中にはXHTMLをHTMLとして解析し、<br/>で失敗するが<br />で失敗するものがあります。

参照:

101
JackDev

spec によると、HTML 5では期待される形式は<br>ですが、スラッシュを閉じることはできます。

54
tvanfosson

XMLでは、すべてのタグに対応する終了タグが必要です。そのため、内容がないタグには、特別な簡略構文があります。

HTML5はXMLではないので、そのような要件を課すべきではありません。 HTML 4.01でもありません。

例えば、 HTML5の仕様 では、brタグを持つすべての例は、<br>ではなく<br/>構文を使用します。

_ upd _ 実際、HTML5では<br/>許可されています 。 9.1.2.1、7。

20
sastanin

以下の理由から<br />の使用をお勧めします。

1)XML構文をさまざまな色で強調表示するテキストエディタおよびXMLエディタでは、<br />で正しく強調表示されますが、<br>を使用する場合は常にそうとは限りません。<br>

2)<br /> XHTMLとの後方互換性があり、整形式のHTML(例:XHTML)はエラーの検証とデバッグがより簡単です。

3)WordPress Plugin Coding specのように、古いパーサやコーディングスペックの中には、スラッシュの前にスペースが必要なものがあります(<br />ではなく<br />)。 http://make.wordpress.org/コア/ハンドブック/コーディング標準/ html/

私の経験では、<br />を使用することに問題がある場合に出会ったことは一度もありませんが、古いブラウザやツールでは<br/>または特に<br>が問題になることが多くあります。

15
Kmeixner

比較可能性(互換性ではなく比較可能性)に興味があるなら、私は<br />を使い続けます。

それ以外の場合、<br>は問題ありません。

13
MindStalker

HTML5では<br><br />の両方が受け入れられますが、HTMLの精神では<br>が使用されるべきです。 HTML 5では、以前のHTML 4.01およびXHTML 1.0であった文書との互換性を高めるためにスラッシュを閉じることができ、HTML 5への移行が容易になります。もちろん、<br/>も使用できますが、一部の古いブラウザとの互換性を保つために、スラッシュ(/)の前にスペースが必要です。

12
kevinji

<br><br/>はどちらも問題ありませんが、少し論理的なので<br/>のほうが好きです。開始タグがあるときはいつでも終了タグを予期することは論理的です。したがって、終了タグがない場合に開始タグを使用しないと、コードが読みやすくなります。

すべてのブラウザ(おそらく問題にならない非常に古いものを除く)は、両方ともまったく同じに表示されます。ただし、<br>はxHTMLに準拠していません。

11
Dan Bray
  1. 通常のWebサイトでHTMLを出力している場合は、<br> または <br/>を使用できます。両方とも、HTML 5をtext/htmlとして提供している場合はいつでも有効です。

  2. HTML5をXHTMLとして提供している場合(つまり、XML宣言付きのcontent type application/xhtml + xml)、<br/>のように自己終了タグを使用する必要があります。

    そうしないと、ブラウザの中にはあなたのページをレンダリングすることを拒否してしまうものがあるかもしれません(特にFirefoxは有効なxhtml + xmlページだけをレンダリングすることに関してvery strictです)。

    1で述べたように、<br/>は偶然XMLとして生成されるが通常のtext/html withoutとして機能するHTML5にも有効です(ウェブページを生成するXSL変換からのものなど)。似ています。

混乱を避けるために:HTML5ではスラッシュの前にスペースを入れてもページのレンダリング方法には何の影響もありません(誰かが例を挙げることができれば私はこれを撤回しますが、私はそれを信じませんtrue - しかしIEは確かにすべての形式の<br>タグで他の多くの奇妙なことをします)。

http://validator.w3.org にある優れたバリデーターは、有効なものをチェックするのに非常に役立ちます(ただし、content-typeもチェックするために信頼できるかどうかはわかりませんが)。

11
Iain Collins

<br><br/>は異なったレンダリングをします。ブラウザによっては、<br/><br></br>として解釈し、2つの改行を挿入します。

7
Samuel

<br>で十分ですが、XHTMLでは<br />が推奨されています WHATWGによる および W3Cによる

HTML 5.2 W3C勧告の セクション8.1.2.1 を引用するには、2017年12月14日

開始タグの形式は次のとおりです。

  1. 属性の後、または属性がない場合はタグ名の後に、1つ以上のスペース文字がある可能性があります。 (いくつかの属性はスペースが続く必要があります。下記の§8.1.2.3属性を参照してください。)

  2. その後、その要素がvoid要素の1つである場合、またはその要素が外部要素である場合、単一のU + 002F SOLIDUS文字(/)が存在する可能性があります。この文字はvoid要素には効果がありませんが、外部要素には開始タグを自己終了としてマークします。

Dreamweaver CS6を使用している場合は、<br />としてオートコンプリートされます。

W3CでHTMLファイルを検証するには、以下を参照してください。 http://validator.w3.org/

6
krupal

この質問の検証において、それは本当にあなたがどのような!DOCTYPEを検証に通そうとしているかにかかっています。

私の個人的なお気に入りは4.01 Transです。ここでは<br/>を使うだけで、検証中にポップアップした可能性のある警告やエラーをクリアします。

Strictはもっと複雑な獣です、それは"SHORTTAGS"が嫌いで文字通り<br></br>だけを望んでいます

HTML5またはコードの世界の「LAX」では、detects every example you put upが正しいのでそこには正しい答えがありません......

最後に、is what validation YOU PREFERまたはthe person that you are working for prefers.... html5のコードの厳密さにおけるlackadaisicalの動きが重要であることはすべて、非常に怠惰なコーダーを見ていると思います

5
Slow Poke

以下の理由から、 forgiving 表記法(<br />)の代わりに通常の表記法(<br>)を使用することをお勧めします。

一貫性

あなたのHTMLにはおそらくいくつかのSVGとSVGが普通の表記法(例えば<rect />)だけをサポートしているでしょう。

ハッカビリティ

React および NativeScript のようなフレームワークがXML表記を使用しているわけではありません。
あなたのマークアップコードは解析しやすくなります。

明快さ

通常の表記は、夜遅くても読みやすく理解しやすいものです。

仕様

<br><br />はどちらも有効なHTMLタグです。

結論

本格的なテキストエディタを使用する場合は、通常の表記法( Emmet でXHTMLと呼ばれる)を使用するように設定します。
たとえば、 Visual Studio Code には、設定に次の行を追加するだけです。

"emmet.syntaxProfiles": {"html": "xhtml"}
4
isar

私が知っていることは、<br />が白い線で区切られ、<br>が単なる切れ目を入れることです。これは、私がIPNスクリプト(PHP)を設定してメールを送信し、受信トレイをチェックしたときに起こりました。理由はわかりませんが、両方の<br /> and <br>を使用してメッセージがきれいに見えるようにしただけです

こちらのメールを見てください: http://snag.gy/cLxUa.jpg

テキストの最初の2つのセクションは<br />で区切られているため、空白行、最後の3行のテキスト、最後のセクションは<br>で区切られ、新しい行が表示されます。

3
Emanuel Olsson

HTML5 ではスラッシュは不要になりました:<br><hr>

3
harold ramos

HTMLでは<br>、そしてXHTMLでは<br/>

<br/>を使うことをお勧めします。

3
Shubham Kumar

<br>はうまく動きます。 XHTMLのようなより厳密なバージョンでは、クロージングを追加する必要があり、本当に古いバージョンのHTMLでは、DOCTYPEを含まない<br><br></br>のような非voidタグにします。

まとめると、<br>は問題ありません。他のものもちょうどいいです。

2
Aravind Suresh

他の多くの人がカバーしてきたように、<br><br/>の両方が受け入れられます。

トレードオフは、<br/>を使用してエンドユーザーに1文字少なく送信するよりも、<br>の読みやすさと下位互換性が優れていることによると思います。

そして Google<br>を使っているので、私もそうでしょう。

(もちろん、私は彼らがそれをサポートしていると知っているChromeを使っているので、彼らは私に<br>を提供しているかもしれないことを覚えておいてください。IEで彼らはまだ<br/>を提供しているかもしれません)

2
Dimitris

うーん.....誰かが今までにW3Cの仕様100%に従ったことがあるシングルベンダー、ユーザーエージェント、またはブラウザメーカーを知っていますか? HTML5が3つすべてのbreak要素バージョンをサポートすると言っているならば、あなたはベンダーが同じそしてもっともっとゆるいバージョンをサポートすることを賭けることができます!

この議論で重要なのは、可能であればHTML仕様だけでなくXML仕様にも準拠するコーディングを一貫して使用することだけです。つまり、正しいXMLバージョンのbreakタグを使用して、チーム全員に同じことをするように勧めてください。

<br />

コード内のimg、a、hr、およびmetaタグにも同じスペーススラッシュ形式を適用する必要があります。どうして?なぜなら

  1. それは古いXHTMLユーザーエージェント/ブラウザと後方互換性があります
  2. とにかくブラウザベンダーはXMLバージョンをサポートしているので、HTML5の仕様は議論の余地があります。
  3. 今日、過去、そして未来のほとんどのユーザーエージェントのずさんな実装はそれを受け入れます。
  4. マークアップからXHTML/XMLドキュメントの作成に戻る必要がある場合は、マークアップをXML標準と同等にすることができます。
  5. すべての小文字でのコーディング、引用符付きの属性、エスケープされたXML文字などを含む、XMLに準拠した堅実なマークアップ方法を使用し続けるのは、すべてのWeb開発者にとって「良いコーディング方法」です。将来XMLデータに切り替える必要がある場合は、自動的にXMLでコーディングして考える必要があります。
  6. 将来のワールドワイドウェブにおいて、私達が個人的なベンダー実装の標準から離れ、より速く解析し、データをより速くワイヤーで送り、そして私達の将来のインターネットをより標準化する堅実で信頼できる検証済みマークアップに戻るXMLを使用したメディア.

その上、ロボットやHTML5が解決するヒューマンインターフェースコーディング問題を抱えていないロボットや機械の世界では、XMLデータシステムに戻って喜んでXMLに変換したときにそのようなUI Webページを解析します。データ。

2
Stokely

HTMLのほとんどの場合、タグはペアになっています。しかし、改行のためにあなたはタグのペアを必要としません。したがって、これを示すために、HTMLは<br/>フォーマットを使用します。 <br/>は正しいものです。そのフォーマットを使用してください。

HTMLの<br>タグに終了タグはありませんXHTMLでは、<br>タグは次のように正しく閉じる必要があります。<br />

XMLでは、すべてのタグを閉じる必要があります。 XHTMLはXMLの拡張であるため、有効なXHTMLを得るにはXMLのすべての規則に従う必要があります。したがって、空のタグ(子ノードを持たないノード)でも
は閉じてください。 XMLには、空のノードに対する自己終了タグと呼ばれる短い形式があります。 <br></br> as <br />を書くことができます。そのためXHTMLでは<br />が使われています。

HTMLはこの点で非常に寛大であり、そのような規則はありません。そのため、HTMLでは<br> <hr> <meta>などの空のノードはスラッシュを付けずに書き込まれます。

_ html _

<br>
<hr>
<meta name="keywords" content="">
<link rel="canonical" href="http://www.google.com/">

_ xhtml _

<br />
<hr />
<meta name="keywords" content="" />
<link rel="canonical" href="http://www.google.com/" />

すべてのタグを自動クローズできるわけではありません。たとえば、<script src="jQuery.min.js" />のようなタグはXHTML DTDでは許可されていません。

2
Bhavin Solanki