Question

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.

Answer 1

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.

Answer 2

The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!

Answer 3

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.

Answer 4

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>

Answer 5

"H" tags are for headings, titles, to show a breaking point in a topic. "p" tags are to control lengths of text together, each separate paragraph will get a "p". "span" tags should only go inside of "p" tags, they are used to show emphasis within the paragraph, but they are limited when it comes to css styling. Unfortunately you must follow the html structure of these tags, otherwise you will have something different on every browser.

Answer 6

Just place a h2 tag at the starting of paragraph. For eg. <p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p> is the para and we want automatically breaking enclosed with h1 tag..

<p><h2></h2>The p tags are <h1>automatically breaking</h1> as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>

but we cant achieve the style we gave to p tag as p tag automatically breaks.

Note: h1 tag should be styled as

h1{ display:inline; !important}