Get In A New Line With

I am new to css and my question is this: I want a horizontal line in a new line. So I thought this would be a good idea:

---

But it instead gives:

Solution 1:

The HTML <p> element is a block-level element that can only contain Phrasing Content; that is, text and the markup text contains.

The <hr> element represents a thematic break between paragraph elements, and it makes no sense to have one inside a paragraph. The standard stipulates that before the <hr> block-level element, an implicit </p> is generated that closes any open <p> elements.

In short, what you're trying to do violates the semantics of paragraphs and horizontal rules.

Solution 2:

A paragraph element only allows phrasing content nested inside it. Since the </p> can be omitted, the browser inserts one when it sees "illegal" content such as <hr>.

See "permitted content" and "tag omission" at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

Solution 3:

The web site return your HTML without change. You can check this in browser network debugger.

As explain by @Wooble, <p><hr></p> is incorrect html, but modern browser will try to auto-correct the error :

1. <p>, Open a paragraph, ok
2. <hr>, Guy you forget to close the paragraph, I add </p> before <hr>
3. </p>, Guy you forget to open the paragraph, I add <p> before </p>

The result is :

<p></p> - added by the broswer
<hr><p>  - added by the broswer
</p>

Solution 4:

To create a new line you use <br />, <p></p> are for paragraphs.

Solution 5:

The one and only solution is this:

<hrstyle="clear:both;">

This code causes an hr across the entire width. It automagically starts at the absolute beginning left of the text area, even when the preceding paragraph has for example a small picture, so it never starts next to that picture.

Share