---
title: <br>（斷行元素）
slug: Web/HTML/Element/br
translation_of: Web/HTML/Element/br
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;br&gt;</code> 元素</strong>會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。</p>

<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<p>如上所示，<code>&lt;br&gt;</code> 元素會在需要斷行的時候出現。在 <code>&lt;br&gt;</code> 之後的文字會從文字區域的下一行出現。</p>

<div class="note">
<p><strong>注意</strong>：不要用 <code>&lt;br&gt;</code> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 <a href="/zh-TW/docs/CSS">CSS</a> {{cssxref('margin')}} 屬性控制間距大小。</p>
</div>

<h2 id="屬性">屬性</h2>

<p>這個元件屬性含有<a href="/zh-TW/docs/HTML/Global_attributes">全域屬性</a>。</p>

<h3 id="棄用屬性">棄用屬性</h3>

<dl>
 <dt>{{htmlattrdef("clear")}}</dt>
 <dd>指示中斷後下一行的開始位置。</dd>
</dl>

<h2 id="使用_CSS_樣式化">使用 CSS 樣式化</h2>

<p><code>&lt;br&gt;</code> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。</p>

<p>你可以給 <code>&lt;br&gt;</code> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。</p>

<h2 id="示例">示例</h2>

<pre class="brush: html notranslate">Mozilla Foundation&lt;br&gt;
1981 Landings Drive&lt;br&gt;
Building K&lt;br&gt;
Mountain View, CA 94043-0801&lt;br&gt;
USA
</pre>

<p>以上 HTML 將顯示</p>

<p>{{ EmbedLiveSample('示例', '100%', '90') }}</p>

<h2 id="無障礙議題">無障礙議題</h2>

<p>使用 <code>&lt;br&gt;</code> 元素<em>分段</em>不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <code>&lt;br&gt;</code> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。</p>

<p>請使用 <code>&lt;p&gt;</code> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。</p>

<h2 id="技術摘要">技術摘要</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/zh-TW/docs/HTML/Content_categories">內容類型</a></th>
   <td><a href="/zh-TW/docs/HTML/Content_categories#Flow_content">流型內容</a>、<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>。</td>
  </tr>
  <tr>
   <th scope="row">允許內容</th>
   <td>無，這是個{{Glossary("空元素")}}.</td>
  </tr>
  <tr>
   <th scope="row">標籤省略</th>
   <td>絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <code>&lt;br /&gt;</code>.</td>
  </tr>
  <tr>
   <th scope="row">允許父元素</th>
   <td>任何接受<a href="/zh-TW/docs/HTML/Content_categories#Phrasing_content">段落型內容</a>的元素</td>
  </tr>
  <tr>
   <th scope="row">允許的 ARIA roles</th>
   <td>所有</td>
  </tr>
  <tr>
   <th scope="row">DOM 介面</th>
   <td>{{domxref("HTMLBRElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="規範">規範</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">規範</th>
   <th scope="col">狀態</th>
   <th scope="col">註解</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-br-element', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '&lt;br&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>



<p>{{Compat("html.elements.br")}}</p>

<h2 id="參見">參見</h2>

<ul>
 <li>{{HTMLElement("address")}} 元素</li>
 <li>{{HTMLElement("p")}} 元素</li>
 <li>{{HTMLElement("wbr")}} 元素</li>
</ul>

<div>{{HTMLRef}}</div>