• 10 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/11/2022

Add breaks and lines to your content

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:

A web article with a light pink background about the coffeeshops of New York
Web article about New York's coffeeshops

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):

Default line space that appears between paragraphs
Default line space that appears between paragraphs

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

Less space between two different lines
Less space between two different lines

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!

Addresses with breaks to separate lines
Addresses with breaks to separate lines

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

Address with lines as separate paragraphs, which results in a weird appearance
Address with lines as separate paragraphs: weird appearance

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>

Horizontal rule
Horizontal rule

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.

Exemple de certificat de réussite
Exemple de certificat de réussite