Alignment behaviour with header, paragraph, line break and horizontal rule

Question

I just noticed some odd behaviour with the header and paragraph when using the <br /> and <hr /> tags if the align attribute is used.

The following code ...

<h1 align="center">
Header line 1 <br /> Header line 2
</h1>
<p align="center">
Paragraph line 1 <br /> Paragraph line 2
</p>

... will produce both lines of header text and paragraph text as being centered, which makes sense and is expected. However, if I change the code so that I use horizontal lines instead of line breaks like so ...

<h1 align="center">
Header line 1 <hr /> Header line 2
</h1>
<p align="center">
Paragraph line 1 <hr /> Paragraph line 2
</p>

... then both lines of header text are centered, but only paragraph line 1 is centered whilst paragraph line 2 is suddenly left aligned.

Why does the second line of paragraph text not default back to center aligned after a horizontal line, yet it does after a line break? And why does the header text not have the same behaviour? This confuses me greatly and any explanations would be welcome. Thank you.

Answer 1

The <p> tag is only design to be a text container, and permits only "phrasing content" as permitted content:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p

However, notice that in html5 it's widely preferable to set style with css and not with tag's attributes.
So less worth is to use inline css, with the style tag's attribute ( but it's not really clean yet -- better to set style in <style> tag or in external css referenced by a <link> tag ^^