Build Your First Web Pages With HTML and CSS

With classes and ids, we saw that it's possible to customize the appearance of certain elements.

There are easy ways to break up the structure of your page in order to separate themes or ideas without creating classes or ids.

You can use line breaks or horizontal rules (i.e., lines) to do so!

Let's say you want to code an article about New York's best coffeeshops by borough, and you want it to be structured as follows:

Pay attention to two things:

• The addresses under each coffeeshop name

• The line separating Manhattan listings from Brooklyn listings

This is what we'll cover in this chapter.

Line breaks

Paragraphs are block-level elements, meaning they take up the width of their containing element by default. They also have spacing above and below them. It's more than a simple line break.

See the space between "Line 1" and "Line 2" in the following image? That space is added automatically to the HTML element (by CSS):

Sometimes, you don't want that extra space, though. You'll want less space between each line:

This is true especially for addresses and poems. You don't need an entirely new paragraph for each line in an address! A simple, and narrower, line break will do.

To create line breaks in HTML, use the <br> tag. There is no closing tag necessary.

<h3>Toby's Estate</h3>
<p class="address">
    125 N 6th St
    <br>
    Brooklyn, NY 11249
</p>

In the code above, there will be a line break between "125 N 6th St" and "Brooklyn, NY 11249" that won't have the outrageous amount of space that appears between two paragraph elements. It'll just be a nice line break!

This is what the address would look like as two separate <p> elements instead of one paragraph containing a line break:

It's a weird amount of space, right?  It also doesn't make sense semantically because an address is one unit, so to separate it as multiple paragraphs isn't appropriate.

Horizontal rules

You may have different content themes in one page that are related but are worth separating for clarity. In the above example, coffeeshops in Manhattan are separated from coffeeshops in Brooklyn because it helps group different content within the article.

To create a line, or a "horizontal rule" in HTML, simply use an <hr> tag.

<h3>Manhattan</h3>
...
<hr>
...
<h3>Brooklyn</h3>

Here's the full HTML code for the coffeeshop article (find those <br> and <hr> tags!):

<article>
    <h1>New York's best coffeeshops</h1>
    <p>New York has some great coffeeshops. Make sure not to miss the hot new addresses opening up left and right!</p>
    <h2>Manhattan</h2>

    <h3>The Bean</h3>
    <p class="address">
        824 Broadway<br>
        New York, NY 10003
    </p>
    <p>There are multiple Bean locations in the city. It's a good place to get work done because they're open late.</p>

    <h3>Third Rail</h3>
    <p class="address">
        240 Sullivan St<br>
        New York, NY 10012
    </p>
    <p>Coffee and donuts! What more could you want?</p>
    
    <h3>Black Fox Coffee Co.</h3>
    <p class="address">
        70 Pine St<br>
        New York, NY 10270
    </p>
    <p>Black Fox has an incredible bean selection and nice snacks.</p>

    <h3>Stumptown</h3>
    <p class="address">
        18 W 29th St<br>
        New York, NY 10001
    </p>
    <p>Does this even need explaining?</p>
    
    <hr>

    <h2>Brooklyn</h2>
    <h3>Toby's Estate</h3>
    <p class="address">
        125 N 6th St<br>
        Brooklyn, NY 11249
    </p>
    <p>Toby's has grown a lot from its initial location in Brooklyn. They now have three locations in NYC.</p>
</article>

Practice!

Head to this CodePen exercise. You'll add a new section for the Queens neighborhood using a horizontal rule. You'll add one coffeeshop in Queens (real or imaginary), making sure to create its address using a line break.

1. Add a horizontal rule (<hr) under the Brooklyn section.

2. Create a heading (<h3) for Queens underneath the horizontal rule.

3. Create a fake coffeeshop (name and address) and add it in the new Queens neighborhood section. Feel free to exactly mimic the code for previous coffeeshops so the same CSS styles will apply.