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.

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 (see the second tip).

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

red-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 shown display the same way gray-b.jpg.

118figb.jpg

red-b.jpg Each br element forces the subsequent content to a new line. Without them, the entire address would display on one line, unless the browser were narrow enough to force wrapping.

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