<h1>, <h2>, <h3>... tags, inline within paragraphs (<p>)

user_262172 0
Viewed 71541

I'm trying to have <hx> tags inside paragraphs, like:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>

But I always get a line break before each one of them, even applying all these, and combinations of the following declarations:

h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}

So what can I do so that the tags go unnoticed inline with the text? Right now I get something like

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras

placerat justo vel risus porta cursus. Nullam eget sem nibh. Sed

mattis facilisis rhoncus. Morbi sit amet nisl lectus.

Thank you

PS: btw I'm using blueprint framework theme for drupal.

seo css html
6 Answers

You're misusing the header tags.

You should use <span> tags with CSS classes.

I tried it out, and what's happening is that when Firefox sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Firebug.

user_343970

The <p> tag can only contain inline elements. The header tags are block-level elements, and cannot go inside <p> tags even when you style them to display inline.

They're semantically incorrect given this usage anyways - paragraphs shouldn't have headers randomly floating around inside them. Consider proper use of <em> and <strong> tags, or if they're really not what you're trying to describe, use <span> tags with specific classes.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
pulvinartincidunt neque, at blandit leo mattis vitae.
Cras <em>placerat</em> justo vel risus porta cursus. Nullam eget
sem nibh. Sed <strong>mattis</strong> facilisis rhoncus. Morbi sit
amet nisl lectus.</p>
user_2290440

SLaks is right. You should not use heading in paragraph. However, if you really needed it (in case it is written by someone else). You can solve the problem by setting p to be inline too. That will work.

user_1761800
Related