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