Create a Horizontal Line Using the hr Element (Help)

HTML-CSS
1

Tell us what’s happening:
The lesson directions told me to add a (hr) between the Title (h4) and Paragraph. I did this but the lesson will not let me pass, saying that “The hr tag should come between the title and the paragraph.”

Your code so far


<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4><s>Google</s>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element

2

It’s a bug in the lesson. Skip it, and move on to the next one

3

Move the tag outside of the

tag and run again.

4

move “em” tag outside of the “p” tag

2 Likes
5

Thank you, that solved the problem I was having. Could you explain to me why the “em” tag was interfering with the code?

6

@JeffreyBui that is a hack to make the test pass. The solution above should not be tried as a learning experience as it is invalid HTML

7
8

You cannot nest a p tag within an em tag. Try validating the code. It will fail. (You can nest an em tag within an em tag, but that isn’t the issue here.)

9

sorry to insist on that, but why not just put a p tag inside an “em” tag?

10

Because there are rules for what is valid HTML and what isn’t. If you write invalid HTML you have no idea how a browser will interpret the code. It may appear to be OK in whatever you test it in, but you can’t test all browsers on all devices. If you write valid HTML then the possibility of the code not displaying how you intend it to is minimal.

The rules for HTML state that you can’t nest a block-level element (the p tag in this case) within an in-line element (the em tag).

If you’d prefer to not just take my word for it, the image shows the result of validating a simple HTML page with a p tag inside an em tag. You can check yourself at https://validator.w3.org if you want to.

image
image1536×2048 339 KB

1 Like
11

Thank you so much. Your explanation was very enlightening.
:grinning:

1 Like