22

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.

6 Answers 6

29

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.

4
  • 4
    Some search engines know about "off-the-beaten-path" techniques for SEO and flag sites to delist them. I would stick with using the correct semantics and use other methods to maximize your rankings.
    – tahdhaze09
    Feb 4, 2010 at 16:52
  • 5
    "...the SEO agency has given us this direction." Then your SEO agency is staffed with idiots (or fools).
    – Traingamer
    Feb 4, 2010 at 20:31
  • 2
    "CSS classes" -- Classes are HTML attributes. CSS can select elements using them as a piece of criteria, but they exist in HTML.
    – Anonymous
    Feb 5, 2010 at 6:31
  • 2
    @Alextronic Cancel your contract with this SEO firm immediately! They are selling you information and advice that is absolutely untrue and if anything you will lose more than money from this advice. I highly recommend posting on the SitePoint forums as some of the regular users there are extremely knowledgeable with SEO and will steer you in the right direction, or can point you in the direction of someone to hire that really knows what they are doing.
    – Mike B
    Feb 5, 2010 at 12:37
11

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}
8

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>
2
  • Using em, strong and span will allow you to give specific styles to those elements without having incorrect semantic markup.
    – Chris
    Feb 4, 2010 at 14:45
  • Please see my comment to SLaks answer. Thanks.
    – Alextronic
    Feb 4, 2010 at 15:52
3

"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.

1
  • You should always use the most semantic tag for the job. So, if you want to emphasize text you should use em. Sep 25, 2012 at 21:09
1

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.

5
  • 1
    I am sure it works. Please see here dl.dropbox.com/u/1961549/StackOverflow/HeadingInline/Test.html.
    – NawaMan
    Feb 4, 2010 at 14:55
  • 1
    This sounded promising, but if I set 'p' to be inline, when a paragraph ends, the next paragraph will follow in the same line instead of creating a new one (with paragraph break I mean), hence resulting in a long text without separations. How did you accomplish to get rid of that effect in your demo?
    – Alextronic
    Feb 4, 2010 at 15:57
  • As you can see from the code (Ctrl+U in Firefox) that is all I did. It is strange that it didn't work for you. I test this on FF, Chrome and Konqueror and they all works. I also use your example paragraph.
    – NawaMan
    Feb 4, 2010 at 16:33
  • You're right, NawaMan. Don't know why it didn't work for me. There must be something in my css still influencing over 'p' and 'hx' tags even when I¡m setting them to 'inline !important'. Weird! I have checked blueprint theme's declaration of the 'p' element and it goes like this: 'p {margin:0 0 1.5em;}', and somewhere else: '{vertical-align:baseline;}', so I don't know what else can be.
    – Alextronic
    Feb 4, 2010 at 17:32
  • The example above from NawaMan only works (maintains p margin bottom for multiple paragraphs) if your p and h1 have the CSS INLINE in the markup, not if it is using CSS selectors like in a style sheet. The other problem is it breaks other styles such as color where the inline h1 occurs. I would still call this technique hacky at best - because the browser still "auto-closes" the p tag even if both p and h1 are display:inline, which is why color styles break. And if you close the p tag yourself, to try and fix p color after h1, then a line break still occurs.
    – codercake
    Oct 28, 2011 at 20:52
1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.