- Adding a Paragraph
- Specifying Fine Print
- Marking Important and Emphasized Text
- Creating a Figure
- Indicating a Citation or Reference
- Quoting Text
- Specifying Time
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Adding Author Contact Information
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Highlighting Text
- Creating a Line Break
- Creating Spans
- Other Elements
This chapter is from the book
This chapter is from the book
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 (
and 
), and occasionally in other short lines of text that should appear one after another.
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 
.
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.
TIP
The hCard microformat (http://microformats.org/wiki/hcard) is for representing people, companies, organizations, and places in a semantic manner that’s human- and machine-readable. You could use it to represent a street address instead of using the provided example 
.