5 of 9

Breaking up Content

Sometimes you need to disrupt the natural flow of things.

The default behavior of text in paragraph tags takes care of most paragraph formatting needs. But sometimes you may need to force text onto a new line before a paragraph ends. Or you may need a greater separation between content to show a change in topic. That’s why we have the <br> and <hr> tags.

Used within paragraphs, <br> is how to command the browser to move text to the next line without starting a new paragraph. Certain situations have content that should stay together, but the text needs to span multiple lines. This tag is most often used for formatting postal addresses and poetry, but you may come across other special cases when it’s necessary. The main caution with <br> tags is not to use two or more of them in a row to add more spacing between lines of text. This should be handled by starting a new paragraph or with CSS styling.

Postal Address
mailing envelopes

<p>Andy Anderson<br>
99 Imaginary Road<br>
Cityville, MD 99999</p>


Poetry
book with quill

<p>Excerpt from "The Road Not Taken"
by Robert Frost</p>

<p>Two roads diverged in a yellow wood,<br>
And sorry I could not travel both<br>
And be one traveler, long I stood<br>
And looked down one as far as I could<br>
To where it bent in the undergrowth;</p>

Our other content-separating tag, <hr>, goes between paragraphs. This places a line, or horizontal rule, across the width of the page. It should be used when there is a shift in topic that requires an obvious separation. This is appropriate with situations like a new chapter in a story or splitting up multiple article introductions.

Divided Content

Downtown Fire

At 11:00pm last night, firefighters arrived at a blaze that tore through McMillan's Drug Store. Nobody was injured, but the fire racked up thousands of dollars in damage.


Rescue Day

Local shelters are holding a pet rescue day with food and pet care tips at Emerald Park, giving families an opportunity to interact with and learn about animals up for adoption. Information will be available on any special care needs for various animal breeds.


Ushers Needed

The Mystic Theater is holding three performances this weekend, and is requesting volunteers to serve as ushers. If interested, please contact the theater with times you are available.

As with anything HTML, this tag is intended to be used semantically. It is considered incorrect to use a horizontal rule just for the visual effect.

Neither <br> nor <hr> can contain content, so both are void elements, and therefore, do not require a closing tag.