How to use an tag inside a in the middle of a text?

Question

I want to do something like this:

<p>This is a <h2>text</h2> paragraph.</p>

I disabled margin and padding for the h2 but it still breaks the line before and after the h2 tag. How can I use the h2 tag in the middle of a text and make it look like if it was a normal word, just like < b > does?

The doctype of my html document is "XHTML 1.0 Transitional"

Answer 1

It is not valid to have a h2 inside of a p.

Aside from that, and to answer your question, a h2 is a block level element. Making it an inline level element will cause it to behave similarly to how you describe the b tag acting.

p h2{display:inline}

As I said above though, the HTML you've given is invalid.

Answer 2

It's not appropriate to use a tag that means "heading" within body text. The <h..> tags are logical tags; their use imparts meaning to the enclosed text -- namely, that the text is a section heading.

Although you could use the display: inline attribute, consider using a more appropriate tag, or even a <span> tag.

Answer 3

Don't, the whole point of is that it's a header. Headers are on their own line. Instead, use CSS. Say text and then in a CSS file, choose a font size.

Answer 4

Despite of the wrong use of the <h2> tag inside a paragraph, we can style <h2> to keep him into a paragraph. I tested one of the above css trick in Firefox and Chrome as follow:

HTML code <p>One paragraph with <h2>title text</h2> in the middle</p>

CSS trick p h2{display:inline}

BUT it doesn't get the result I expect. The browser truncate the paragraph right before the initial h2 tag. Look at DOM from Firebug:

Therefore the CSS trick p h2{display:inline} doesn't work properly because CSS rule is not true, i.e. the <h2> tag is not inside the <p> tag. It looks like this:

Adding CSS trick only for <h2> tag h2{display:inline} is not the definitive solution. It will look like this:

The final work-around is:

HTML code <p class="inline-object">One paragraph with <h2 class="inline-object">title text</h2> in the middle</p>

CSS trick .inline-object" {display:inline}

This will look as we expect:

If you are trying to mask <h2> title text as ordinary text, just add two more rules to the class .inline-object" {display:inline;font-size: inherit;font-weight: normal;}

Answer 5

You’ll have to make it

display:inline;

h2 is a block element.

The h2 tag marks a headline, which is per definition not part of a text. So what you’re doing is probably not the best way. Consider doing it differently.

Answer 6

Firefox cutting out my P, because of H2 inside it. And then creating P for

(empty paragraph). And its good. Because its auto-generated, and for cleaning out P tags i need to write tens of PHP code.

Answer 7

Create a class like .myH2 (not the best name) with same code of h2 and use a span in p like

<p>this is <span class="myH2">myH2</span>.</p>