Loading...

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. Click through the tabs below to learn more about each tag.

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 
<p>Donell Jones<br/>
99 Imaginary Road<br/>
Cityville, MD 99999</p>
Poetry 
<p>Excerpt from "The Road Not Taken"<br/>
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 tag 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 
<h3>Downtown Fire</h3>
<p>At 11:00 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.</p>
<hr/>
<h3>Rescue Day</h3>
<p>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.</p>
<hr/>
<h3>Ushers Needed</h3>
<p>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.</p>

Downtown Fire

At 11:00 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 (with meaning and logic). It is considered incorrect to use a horizontal rule just for the visual effect.

Remember: Neither <br/> nor <hr/> can contain content, so both are void elements. Therefore, they do not require a closing tag.

Lesson Content Banner

You Try!

Use the practice coding space below or your own text editor to try out some of the heading tags we've just learned. Combine heading tags, paragraph tags, line breaks, and horizontal rules to create your own layout.