0

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

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.

19th Dec 2016, 7:02 AM
Sm00thJa22
Sm00thJa22 - avatar
1 ответ
+ 2
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 ^^
22nd Dec 2016, 10:32 PM
visph
visph - avatar