I have a div element and within that div, we have text between p elements.
I want to add a heading. Should it go inside or outside the p?
Which is better:
<p>This is text <h3>This is my h3</h3> More text </p> <p>another text<p> or
<p>This is text<p> <h3>This is my h3</h3> <p>another text<p>
Having a H1 element inside a p element is invalid mark-up. When the browser encounters this mark-up, it tries to fix it automatically by moving the H1 outside of the p .
Because the header of a page is part of the body of the page, just as the footer. Think about this <body> as a human body: Head, middle of the body and the feet. A page has the same concept: Header (is the head), section (middle of the body), and footer (the feet).
HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.
main holds your "main content", and the header and footer is usually separate from that.
It is impossible to put a heading element inside a p element in HTML markup, not just formally but because browsers implicitly terminate an open p element when they encounter a heading. So the question is meaningless: an element that cannot exist in a certain context cannot have any meaning (semantics) within that context.
Instead of using p to group text and headings together, you can use the div element or, with the usual caveats, HTML5 novelties like section and article.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With