Preview
Video Player
00:00
00:00
Creating Breaks in Content
3:23Learn to create line breaks in your content using <br> and thematic breaks with <hr>.
As you learned at the beginning of the
course, HTML condenses white space like
0:00
consecutive spaces, tabs or
new lines into a single space.
0:04
Sometimes you'll need to
create a break in the content
0:09
without having to specify a new
paragraph or heading tag.
0:12
For example, if you're marking up a poem,
an address, or any text where the division
0:16
of lines are significant, you can force
breaks in content with the br tag.
0:21
So first,
down in the contact section of index.html,
0:26
I'm going to write an address
using HTML's address tag,
0:30
The address element represents contact
information for a person, people, or
0:39
organization.
0:44
So inside the address tags,
0:45
I'll write an address so let's
say Experience VR, and
0:47
below that we'll say 2017 Virtual Way,
0:52
City, State 33437.
0:57
Give this a save, refresh the browser.
1:09
And as expected, the browser displays each
part of the address on the same line.
1:13
So let's use the br element
1:18
to instruct the browser that we want a
line break after each line in the address.
1:20
Now, br is an empty element,
just like the image element, so
1:26
it does not require a closing tag.
1:29
So after the first line, we'll add br and
we'll do the same for the second line.
1:32
Refresh the page and as you can see the
brs produce line breaks in the text, so
1:39
now the address is on
three separate lines.
1:44
The hr or
1:49
horizontal rule element represents
a thematic break in your content.
1:50
Imagine a scene change in a story or
1:54
a transition to another topic within
a section of a reference book.
1:56
In HTML, hr can indicate to
the browser the end of one section and
2:00
a start of another.
2:05
It separates different topics
with in a section of content.
2:06
So here in index.html, the aside element
near the bottom of the file contains
2:09
additional content about VR resources and
the famous quote about virtual reality.
2:15
So let's add a horizontal rule
between the two sections of
2:21
content to indicate a break.
2:25
And by default, the browser displays
an hr as a horizontal line.
2:32
Now you may see empty elements like br,
2:38
hr, even img,
written with a trailing slash, like so.
2:41
And the trailing slash clearly
indicates that these are empty elements
2:47
with self-closing tags.
2:51
The slash is optional and
both are valid HTML.
2:52
Now it's important that you use br and
hr properly.
2:56
So for example,
you shouldn't use hr just for
3:00
the sake of aesthetics to
display a line in your site.
3:03
Likewise, you shouldn't use two,
three, four or
3:07
more br tags at once just to add
space between lines of text.
3:09
Aesthetics are best handled by CSS or
Cascading Style Sheets.
3:14
And you'll learn lots more about styling
content with CSS in a later course.
3:18