Create a Horizontal Line Using the hr Element (still not addressed)

Tell us what’s happening:

I keep getting an error that says: “The hr tag should come between the title and the paragraph.”
I don’t know if it’s me misunderstanding the exercise, but I tried moving the


tag all over and the error is still there. The result in the screen also seems to be what the exercise asks…
I copied my code below (the only thing I changed from the sample code was adding the
tag)

Hope to hear from you,
Thank you!!

Sebastian
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/

1 Like

Please remember the Read-Search-Ask method described by Free Code Camp. If you had done a search in the forum, you would have seen dozens of posts explaining that there is a bug with this challenge and that you can skip it as well as telling you how you can force the test to pass if you can’t stand the idea of skipping it.

1 Like

The hr tag is self closing you should use <hr /> instead

Isn’t <hr /> only for XHTML and not for HTML? HTML up to version 4 never used it, the ending / was only introduced with XHTML, and I don’t think HTML5 (which this course teaches) uses it either.

In the Applied Visual Design section on FCC, in this exercice, there is a note here Note In HTML, hr is a self-closing tag, and therefore doesn't need a separate closing tag.

That doesn’t mean you need to add in the / at the end of the hr element though. The spec allows one to be added, but aside from limited circumstances (and the hr element is not one of them) it has no effect in HTML5.

https://www.w3.org/TR/html5/syntax.html#start-tags

you are right both are working but it seems that like they say: This element is self-closing, but to be friendly to parsers and style checkers you should add an explicit closing marker.

I prefer to keep my code as clean and lean as possible. If it has no effect on the actual code functionality, especially with things like this, then I leave it out. If a style checker can’t cope with valid HTML5 (and in fact <hr> has been valid since about 1995) then it’s time to find a better checker — I’d only ever use the ones provided by W3 anyway. They provide the HTML specification so their checker should be the best one, in my opinion.