Creating Breaks in Content3:23 with Guil Hernandez
Learn 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 0:49 let's say Experience VR, and 0:53 below that we'll say 2017 Virtual Way, 0:58 City comma State, 33437. 1:04 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
You need to sign up for Treehouse in order to download course files.Sign up