H1 in a P?

HTML & CSS
1

I keep getting a validator error;

Where an H1 cannot be placed in a P, I know that
P is a block element but Im unsure about H1.

Do I have to keep the H1 outside of the P?
Or can I make H1 display as a non-block element to
embed it inside the P?

Thanks.

2

Hello

You will want to keep the

<h1>

tag out of the

<p>

tags :slight_smile:

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.5

3

H1 is a block element like P, but H1 and P can only have inline content inside of them, unlike other block elements like forms and divs. Therefore, you can’t nest headings inside paragraphs (and if you think about it a heading really should never be in a paragraph).

4

Thanks :slight_smile:

5

Yeah now that I think of it like that, very true!
I was just a little flustered how Ill place it where I want
it, but I then realized… Oh yeah, I can style an H1 margin :smiley:

6

You can make an H1 generate an inline box instead of a block box:

h1 {display:inline}

That does not allow you to embed an H1 inside a P, though. The ‘display’ property only controls what sort of box is generated, it doesn’t change the semantics. The rules governing which elements may contain which are laid down in the HTML DTD (Document Type Definition) and cannot be changed.

You can paint a car to look like a cow, but don’t expect to get much milk out of it. :wink: