Heading tags without return in CSS

trailing content goes to next level.

[aias1975]

How do I use <h3>headlines</h3> type tags without it returning the trailing content to the next line.

I am trying to separate the styling from the content, but it doesn't seem to work the same as <font style...> tags would.

Thanks, BL

[andreasfriedrich]

Do you want to avoid [the] extra line after h2 h3 etc? [webmasterworld.com]

Andreas

[aias1975]

I read that and figured out half my problem, but I still can't seem to not waste the whole line to the right of my headline.

I can get rid of the space above and below my h3, but even with all margins and padding at 0, it wastes the whole line to the right of the headline, which I can see by adding a border.

[aias1975]

I want:

<h3>headline</h3> text text text text ...
text text text text text

NOT

<h3>headline</h3>
text text text text text

[Nick_W]

Hi alas1975

h3 {
display: inline;
}

Will do the trick ;) - H tags, as with p, div, table, and more are block level elements meaning (amongst other things) that you can't sit one beside the other without serious tampering. For example, you could float or absolutely position block elements so they sit side by side.

For this purpuse though, the most efficient method is to change it to an inline element like an img or strong or em tag.

Nick

[WibbleWobble]

I had a fiddle with this very thing today, then scrapped it because it wasn't valid xhtml.

for example, to get this:

<p>text text text <h*>text</h*> text text text</p>

to display on a single line, like this:

text text text TEXT text text text

you must apply display: inline; to their element or class.

postscript: h* is substitute for any header tag that breaks up text, h1, h2, etc.

[felix]

I had a little trouble with the display:inline method. After the </h1> tag, the <p> had lost its style.

Here is another method using a <span> tag. Put this in your stylesheet or style tag:

.head1 {font-size:150%}
p {font-family:verdana}

Then your paragraph could be

<p>this is a very
<span class="head1">long line</span>
that is bound to break unless you have
a window that is at least a zillion
characters wide. You can change the style
of this paragraph with the class attribute.
</p>

When I used the same code except with the display:inline and anb h1 tag, the text following the </h1> was no longer verdana.

[hakre]

felix, it seems to me that it's not an incompability of your browser not of css. it's simply wrong html.

you can't <span> around <h1> that's the fault. the browser did right, because he corrected your malicious code on the fly.

not using <h1> etc. is a mess because these tags also structure the document.

[felix]

Hi hakre,

I agree that using styles instead of formatting tags can be cumbersome, but it is part of what gives css an advantage in flexibility over straight html.

In the original post, aias1975 said, "I am trying to separate the styling from the content". That is what the <span> tag is for.

<p>Changing <span style="{color:red">color</span> is an example</p>

[Nick_W]

I think that should be
<p>Changing <span style="color: red">color</span> is an example</p>

I presume that was a typo no? ;)

Nick

[dingman]

There was another discussion of more or less the same issues a few weeks ago at [webmasterworld.com ], in which I included the results of some experimentation I did with h# tags and inline styling. That might be useful here.

[WibbleWobble]

So, which is the favoured method here, valid (x)HTML, or SEO'd pages?
We all know that google (at least) lends weight to h1 tags, and displaying them inline makes for better density while remaining pretty, by way of no disjointed text.
But we [should] also know that technically a header tag inside a block element is bad practice, which is the way most people use the combination for optimising.

I have my suspicions about which way a few of you will swing, but I'm intrigued none the less.

(My apologies for going slightly off topic, but I didn't feel it warranted a new thread)

[Nick_W]

Persoanlly I find putting an <h1> inside a <p> tag to be rather absurd. No offence intended, just my opinion ;) - You can go too far with on page SEO.

On page SEO matters less and less each update, a better structure is preferable to gimmickiness...

Nick

[WibbleWobble]

My suspicions about you were so spot on it almost hurts, baby.

(I'm also of that opinion, though I have little reason to do so. I just like seeing validators applaud me, I think.)

Anyone else? who're the devious non-conformists among us?

[dingman]

Unsuprisingly I'm sure, you can count me with Nick on the side of validation. So far, all my decently ranking pages are "accidentally" SEOed as a by-product of my other design obsessions. My use of inline <h#> tags is all about presentation when I feel that structurally that text is a header item. I first used that trick in a site header, where there was some non-header text that I wanted to follow on the same line.

I tend to figure that if my structural markup is good, then CSS will get me where I want presentationally and where I "belong" in SERPs. This attitude is made more sustainable in my life than it might otherwise be by the fact that most of the sites I work on are non-commercial. I've got one forthcoming that will probably get to be my first true attempt at SEM.