: The Line Break element #

::: section-content The   HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-standard .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

O’er all the hilltops
Is quiet now,
In all the treetops
Hearest thou
Hardly a breath;
The birds are asleep in the trees:
Wait, soon like these
Thou too shalt rest.

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} p { font-size: 1rem; font-family: sans-serif; margin: 20px; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

As you can see from the above example, a   element is included at each point where we want the text to break. The text after the   begins again at the start of the next line of the text block.

::: {#sect1 .notecard .note} Note: Do not use   to create margins between paragraphs; wrap them in  elements and use the CSS margin property to control their size. ::: :::

Attributes #

::: section-content This element's attributes include the global attributes. :::

Deprecated attributes #

::: section-content

clear [Deprecated]{.visually-hidden}: Indicates where to begin the next line after the break. :::

Styling with CSS #

::: section-content The   element has a single, well-defined purpose — to create a line break in a block of text. As such, it has no dimensions or visual output of its own, and there is very little you can do to style it.

You can set a margin on   elements themselves to increase the spacing between the lines of text in the block, but this is a bad practice — you should use the line-height property that was designed for that purpose. :::

Examples #

Simple br #

::: section-content In the following example we use   elements to create line breaks between the different lines of a postal address:

::: code-example [html]{.language-name}

Mozilla<br />
331 E. Evelyn Avenue<br />
Mountain View, CA<br />
94041<br />
USA<br />

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Accessibility concerns #

::: section-content Creating separate paragraphs of text using   is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology. Screen readers may announce the presence of the element, but not any content contained within  s. This can be a confusing and frustrating experience for the person using the screen reader.

Use  elements, and use CSS properties like margin to control their spacing. :::

Technical summary #

::: section-content

Content categories	Flow content, phrasing content.
Permitted content	None; it is a void element.
Tag omission	Must have a start tag, and must not have an end tag. In XHTML documents, write this element as `<br />`.
Permitted parents	Any element that accepts phrasing content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	`none`, `presentation`
DOM interface	`HTMLBRElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-br-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

        Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

br 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 clear 1 12 1 Yes 15 ≤4 4.4 18 4 14 ≤3.2 1.0 :::

<br>: The Line Break element #