HTML 5: Is it <br>, <br/>, or <br />?

HTML 5 Line Breaks: <br>, <br/>, or <br />?

Demystifying the correct syntax for line breaks in HTML5 and understanding the historical context of XHTML self-closing tags.

The humble line break tag, <br>, is one of the most frequently used elements in HTML. However, its syntax has been a point of confusion for many developers, especially with the evolution from HTML4 to XHTML and now HTML5. This article will clarify the correct and recommended way to write a line break in modern HTML5, explain the historical reasons behind the different syntaxes, and provide best practices for maintaining clean and valid code.

The HTML5 Standard: Simply <br>

In HTML5, the <br> element is defined as a void element, meaning it cannot have any child nodes (elements or text content). Void elements do not require a closing tag. Therefore, the simplest and most correct way to write a line break in HTML5 is simply <br>.

This syntax is fully compliant with the HTML5 specification and is the recommended approach. It's concise, easy to read, and avoids unnecessary characters.

<p>This is the first line.<br>This is the second line.</p>

Correct HTML5 syntax for a line break.

The XHTML Influence: <br/> and <br />

The confusion surrounding <br/> and <br /> stems from XHTML (Extensible HyperText Markup Language). XHTML was a stricter, XML-based reformulation of HTML. In XML, all elements must either have a closing tag (e.g., <p>...</p>) or be self-closing (e.g., <img />).

Since <br> is a void element and doesn't have content, XHTML required it to be self-closed. Both <br/> and <br /> were valid ways to self-close an element in XHTML. The space before the slash in <br /> was often preferred for backward compatibility with older, non-XHTML-aware browsers that might misinterpret <br/> as an opening tag.

While these syntaxes were mandatory in XHTML, they are optional in HTML5. HTML5 is designed to be more forgiving and compatible with existing web content, so it allows these XHTML-style self-closing tags for void elements, but they are not required.

flowchart TD
    A[Start HTML Document] --> B{HTML5 Document?}
    B -- Yes --> C[Use <br>]
    B -- No (XHTML) --> D[Use <br/> or <br />]
    C --> E[Valid HTML5]
    D --> F[Valid XHTML]
    C -- Also valid in HTML5 --> D
    D -- Not recommended in HTML5 --> C

Decision flow for choosing line break syntax based on document type.

<p>This is the first line.<br/>This is the second line (XHTML style).</p>
<p>This is the first line.<br />This is the second line (XHTML style with space).</p>

Valid but not recommended HTML5 syntax for line breaks (XHTML style).

Why Consistency Matters

Regardless of which valid syntax you choose (though <br> is preferred), consistency is key. Using a mix of <br>, <br/>, and <br /> within the same project can lead to confusion and make code harder to maintain. Modern development tools and linters can help enforce a consistent style across your codebase.

Ultimately, the browser's rendering engine will interpret all three forms correctly in an HTML5 document. The choice primarily comes down to adhering to standards, readability, and maintaining a consistent coding style.