Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

Creating a Line Break

Browsers automatically wrap text according to the width of the block or window that contains content. It’s best to let content flow like this in most cases, but sometimes you’ll want to force a line break manually. You achieve this with the br element.

To be sure, using br is a last resort tactic because it mixes presentation with your HTML instead of leaving all display control to your CSS. For instance, never use br to simulate spacing between paragraphs. Instead, mark up the two paragraphs with p elements and define the spacing between the two with the CSS margin property.

So, when might br be OK? Well, the br element is suitable for creating line breaks in poems, in a street address (red_circle-a.jpg and red_circle-b.jpg), and occasionally in other short lines of text that should appear one after another.

red_circle-a.jpg The same address appears twice, but I coded them a little differently for demonstration purposes. Remember that the returns in your code are always ignored, so both paragraphs display the same way gray_circle-b.jpg. Also, you can code br as either <br /> or <br>in HTML5.

...

<body>



<p>53 North Railway Street<br />

Okotoks, Alberta<br />

Canada T1Q 4H5</p>



<p>53 North Railway Street <br />Okotoks, Alberta <br />Canada T1Q 4H5</p>



</body>
</html>
04_22.jpg

red_circle-b.jpg Each br element forces the subsequent content to a new line.

To insert a line break

Type <br /> (or <br>) where the line break should occur. There is no separate end br tag because it’s what’s known as an empty (or void) element; it lacks content.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus