What is the character entity for a new line in HTML?

There is no specific character entity in HTML that directly creates a new line in the rendered output in the same way an HTML element does. Instead, HTML uses a dedicated element for this purpose.

Understanding Line Breaks in HTML

While character entities are used to represent special characters (like © for © or < for <), they are not designed for structural layout changes like creating a new line. When you need to force a line break within a block of text, HTML provides a specific element.

The <br> Element: Your New Line Solution

The standard and only HTML element specifically designed to create a line break is the <br> element. It is an empty element, meaning it has no closing tag.

The <br> element has a single, well-defined purpose — to create a line break in a block of text. It effectively breaks the current line and renders the subsequent content on a new line without starting a new paragraph or adding significant vertical spacing.

Syntax:

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

Example:

<address>
  John Doe<br>
  123 Main Street<br>
  Anytown, USA 12345
</address>

In this example, each <br> tag forces a new line, ensuring the address components are displayed on separate lines.

For more detailed information, refer to the MDN Web Docs on the <br> element.

Character Entities vs. HTML Elements for Line Breaks

It's crucial to distinguish between character entities and HTML elements when discussing line breaks:

• Character Entities: These are codes (like & or & for '&') that represent individual characters. They are primarily used for:
  • Characters that have special meaning in HTML (e.g., <, >, &).
  • Characters not easily typed on a standard keyboard (e.g., ©, ™).
  • Non-breaking spaces ( ).
• HTML Elements: These are the building blocks of web pages (e.g., <p>, <h1>, <div>, <img>). They define the structure and meaning of content. The <br> element falls into this category.

While you might encounter character entities like 
 (Line Feed, \n) or 
 (Carriage Return, \r), these are typically control characters that browsers treat as whitespace in standard HTML rendering. They will generally not create a visual line break unless:

• The text is inside a preformatted text element, such as <pre>.
• CSS properties like white-space: pre-wrap; or white-space: pre; are applied to the parent element, which instructs the browser to respect whitespace and line breaks in the source code.

These character entities are not a direct or reliable substitute for the <br> element when the goal is to force a line break in the rendered output for general web content.

Practical Application and Best Practices

Using the <br> element effectively enhances readability and content structure:

• When to use <br>:
  • Addresses: To break lines within a single address block.
  • Poetry or Song Lyrics: To maintain the original line structure.
  • Short Lists or Labels: Where items need to appear on separate lines but aren't logically distinct paragraphs.
• When not to use <br>:
  • Paragraph Separation: Do not use <br> tags to separate paragraphs. Use multiple <p> (paragraph) elements instead. This provides better semantic meaning and allows for consistent styling with CSS.
  • Vertical Spacing: Avoid using multiple <br> tags to create vertical space between elements. Use CSS margin or padding properties for precise control over spacing.

The following table summarizes the key differences:

Feature	<br> Element	&#10; (Line Feed Character Entity)
Purpose	Forces a line break in rendered HTML output	Represents a newline character in source code
HTML Role	An HTML element	A character entity (numeric reference)
Visual Output	Always creates a new line	Treated as whitespace unless in <pre> or with white-space: pre-* CSS
Semantic Meaning	Indicates a break within a block of text	No direct semantic meaning for rendered layout
Recommended Use	For line breaks in addresses, poetry, etc.	Primarily for source code readability; rarely for visual line breaks

HTML Line Break