<br> or </br> which one we should use for line break?

Understanding Line Breaks in HTML: <br> vs. </br>

Explore the correct and semantic way to insert line breaks in HTML, distinguishing between the self-closing <br> tag and the invalid </br>.

When working with HTML, one common task is to insert a line break within text content. Developers often encounter confusion regarding the correct syntax for this: should it be <br> or </br>? This article will clarify the proper usage, explain why one is correct and the other is not, and provide best practices for creating line breaks in your web content.

The Correct HTML Line Break: <br>

The HTML element for a line break is <br>. It is an empty tag, meaning it has no content and therefore does not require a closing tag. Its purpose is simply to insert a carriage return or line feed, moving subsequent content to the next line. This behavior is consistent across all modern HTML versions, including HTML5.

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

<p>
  Another paragraph with<br>a line break in the middle.
</p>

Basic usage of the <br> tag for line breaks.

Why </br> is Incorrect

The syntax </br> is not a valid HTML tag. HTML tags are either paired (e.g., <p>...</p>, <div>...</div>) or self-closing (e.g., <br>, <img>, <input>). A closing tag like </br> implies an opening tag <br> that encloses content, which is not how the line break element functions. Using </br> will likely be ignored by browsers or lead to unexpected rendering behavior, as it doesn't conform to the HTML specification.

flowchart TD
    A[HTML Parsing Process]
    B{Encountered Tag}
    C[Is it `<br>`?]
    D[Insert Line Break]
    E[Is it `</br>`?]
    F[Invalid Tag: Ignore or Error]

    A --> B
    B --> C
    C -- Yes --> D
    C -- No --> E
    E -- Yes --> F
    E -- No --> G[Process Other Tags]

Browser's interpretation of <br> vs. </br>.

When to Use <br> (and When Not To)

The <br> tag is appropriate for minor line breaks within a block of text where the break is part of the content itself, such as in addresses, poems, or short blocks of text where line structure is semantically important. However, it should not be used for creating spacing between paragraphs or other block-level elements. For structural spacing, CSS properties like margin or padding are the correct tools.

<!-- Correct use of <br> -->
<address>
  John Doe<br>
  123 Main St<br>
  Anytown, USA 12345
</address>

<!-- Incorrect use of <br> for spacing -->
<p>This is the first paragraph.</p>
<br><br><br>
<p>This is the second paragraph. Use CSS margins instead!</p>

Examples of appropriate and inappropriate use of <br>.

/* Correct way to add space between paragraphs */
p {
  margin-bottom: 1em; /* Adds space below each paragraph */
}

Using CSS for structural spacing between paragraphs.