START A COURSE

The HTML and CSS Blog:

What You Learn in This HTML Lesson

In HTML there are several kinds of ways to break up your text. There’s the paragraph tag and the line break tag. In this post you’ll learn about the line break. I’ll explain why HTML needs both line breaks and paragraph breaks, and when to use each.

Creating Line Breaks in HTML

the html line break tagThere may be occasions when you want to indicate a line break, without creating a separate paragraph. Maybe you don’t want all the space that goes between paragraphs. Maybe you don’t want the paragraph formatting (CSS) that you’ve created to apply to this text. That’s when you’ll use the line break tag. The break tag creates a line break, without indicating a separate paragraph.

This is a non-container tag, so there is no closing tag. You simply place the break tag wherever you want a line break.

An Example of When To Use A Line Break in HTML

So when would you toss aside your paragraph tags for the simple break tag? A common example would be an address with line breaks:

Notice there is a single  <p>  paragraph tag around the entire address (which is one paragraph), with the  <br>  break tag indicating where to break the lines within that paragraph. The paragraph tag is a container tag, meaning it has an open tag that begins the paragraph and a closing tag that indicates the end of the paragraph.

example:

 Self-Closing the HTML Break Tag

If you are writing to stricter XHTML standards, than you will self-close the line break tag by inserting a space and a slash at the end of the tag, like this: <br />

The Break tag

The web browser doesn’t really care if you choose to self-close the break tag or not.

If you’re not sure which type of HTML you’re writing, HTML or strict XHTML, or even what the heck we’re on about, then you’ll want to read the post coming out next week, “DOCTYPES: What version of HTML are you Using?” Coders trying to write cutting-edge code using the latest tags use HTML5, the newest standard. Folks supporting older sites will be using the stricter XHTML syntax, and folks supporting really really old sites will be using older HTML4.

In my day to complete a line break...

This joke was stolen from an old Weird Al song.

When it comes to the line break tag, XHTML requires self-closing the break tag (include the slash at the end). HTML5 allows you the freedom to self-close the break tag, or not. HTML5 is a loose standard, allowing for humans to do things in different ways without breaking the page. It’s a clever idea to develop HTML5 in such a way that old pages still display in the browser—we can move forward without breaking the trillions of existing web pages. No need to go back and re-code old pages. Some coders will embrace saving time by skipping unnecessary code. Other coders still self-close their line break tags when writing HTML5, preferring the strict style, perhaps out of familiarity, perhaps just for the aesthetic beauty of making things consistent in code.

Here’s an address with breaks, written in strict XHTML standards:

The break tag could be used to indicate line breaks in addresses, lyrics and poetry. Use your HTML tags to mark up your content and control how your web page actually looks. You can’t just hit “enter” in your HTML and expect it to show up. This may seem like a pain at first, but it’s much better that way. Hitting “enter” in your code has no impact on the web page, but might be useful to the coder. Because you can hit “enter” all over your code without it showing up on the web page, you can use spacing (spaces, tabs or hit “Enter”) to organize your code. This makes it easier to read and easier to spot mistakes.

Using HTML Line Breaks in Song Lyrics

Here’s how a song might look if we made it two paragraphs with no line break tags:

And in the end the love you take is equal to the love you make.

Ah Ahhhhhhh. Ah ahhhhhh. Ah ahhhhhhh-ahhhhh-ahhhhhh

Notice that the paragraph is displaying all in one line, even though it’s been placed on separate lines in the code. We have to use HTML tags to add structure to our content….even creating a line break requires using an HTML tag. Just hitting “return” or “enter” when typing is not enough to make it display in separate lines on your web page.

One cannot simply expect... spaces in your text editor to show up in your web page

Because they won’t show up. At all.

 

And here’s that same song, broken into its incredibly short line breaks:

And in the end
the love you take
is equal to the love
you make.

The code for that would look like this:

<p>And in the end  <br />
the love you take <br />
is equal to the love <br />
you make.

</p>

<p>

Ah Ahhhhhhh. <br /> Ah ahhhhhh. <br />
Ah ahhhhhhh-ahhhhh-ahhhhhh

</p>

Note that you don’t need a line break tag after the last line because the paragraph tag will create its own break. Of course if you want even more space you could try adding the extra line break and see how it looks, but this is not a habit you should get into. Spacing should be handled uniformly with CSS. Even if you decide you like how it looks, it would be better to add one line of code to your CSS rather than littering extra line breaks throughout your HTML.

HTML tag summary:

<p>       </p>

Paragraph Tag

<br />

Break Tag (a line break)

Brain Snack: You try it!

Learn HTML with this Activity: HTML Line Breaks Exercise

Click here to launch this activity in the sandbox, where you can play with your code and see right away whether you’re doing it right. All the instructions below will be repeated in the sandbox, as an HTML comment.

Now you try it. Here’s another short song from Abbey Road. We’ve put slashes where I think they go, but you may listen to the song and decide for yourself. Open your text editor or try out our handy online editor and try adding break tags and paragraph tags to control your line breaks. You should also add paragraph tags to indicate the beginning and ending of each paragraph. Don’t forget to add the Song Title and Artist as separate paragraphs.

Extra credit: You can add <strong> tags for bold and <em> tags for italics to the Song Title and Artist. See the last blog post, Time to Get Bold with HTML, if you wish to review how to emphasize text with bold and italics in HTML.

Abbey Road

The Beatles

Her majesty’s a pretty nice girl but she doesn’t have a lot to say. / Her majesty’s a pretty nice girl but she changes from day to day. / I wanna tell her that I love her a lot. / But I got, I got a belly full of wine. / Her majesty’s a pretty nice girl / and someday I’m gonna make her mine. / Someday I’m gonna make her mine. –The Beatles

Chemicals Collide

Cloud Cult

The Meaning of 8 album

I was out paying close attention / Or was I lost inside my thoughts? / These days it’s hard to tell what’s outside from what’s in my mind/And oh, God, it’s beautiful, insatiable / The way our chemicals collide/I was out catching up to tomorrow / Or was I caught up in the past? / These days it’s hard to tell what’s out in front from what’s behind/And oh, God, it’s unforgettable, unpredictable / The way our chemicals collide/ I was sleeping in the lillies / Or was I up all night? / These days it’s hard to tell what’s half asleep from fully alive/We were loving like a landslide / Or were we in a fight? / These days it’s hard to tell what’s right from wrong and wrong from right/And oh, God, it’s beautiful, insatiable / The way our chemicals collide / And oh, God, it’s unforgettable, unpredictable / The way our chemicals collide

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.