- Starting a New Paragraph
- Adding Author Contact Information
- Creating a Figure
- Specifying Time
- Marking Important and Emphasized Text
- Indicating a Citation or Reference
- Quoting Text
- Highlighting Text
- Explaining Abbreviations
- Defining a Term
- Creating Superscripts and Subscripts
- Noting Edits and Inaccurate Text
- Marking Up Code
- Using Preformatted Text
- Specifying Fine Print
- 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.
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 (
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 display the same way 
. 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>
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.
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 the provided example 
.