H tag on same line as paragraph

css question

[JonnyWales]

Is it possible to include a header tag on the same row as standard text?

I can remove the gap above and below the header using margin-top and margin-bottom but I'm not sure how to get it to appear on the same row as other text.

Assuming that the capitals represent my header I can achieve this :-

.... and it is still
RAINING IN WALES
but the forecast is good ....

but I want to achieve this :-

.... and it is still RAINING IN WALES but the forecast is good ....

Another subject but I suppose Google hates this :)

[DrOliver]

<style type="text/css">
.inline{display:inline;}
</style>

<p class="inline">.... and it is still </p>
<h6 class="inline">RAINING IN WALES </h6>
<p class="inline">but the forecast is good .... </p>

There's even an official way to do that, but it doesn't work in most browsers: See [w3.org ] and check "display:run-in"

[RussellC]

Thanks DrOliver, I was about to as the same question! :)

[JonnyWales]

Thanks doc .... just need to work out now how to leave a one-space gap before and after my heading text :)

[DrOliver]

<p class="inline">.... and it is still </p>
<h6 class="inline">RAINING IN WALES </h6>
<p class="inline">but the forecast is good .... </p>

Just leave a gap between "still" and the closing </p> and a gap between "WALES" and the closing </h6>.

BTW: you also might want to consider styling the header like this:
h6{text-transform:uppercase;}

and the write the code like this:
<h6 class="inline">raining in Wales </h6>

That would add some extra accessibility, I guess, because the "uppercasing" is only a visual thing.

[JonnyWales]

"Just leave a gap between "still" and the closing </p> and a gap between "WALES" and the closing </h6>. "

Doc,
This makes to difference when I try adding spaces the text still just all rolls into one such as :-

and it isstill raining in walesbut the forecast is good

Any ideas where I'm going wrong?

[Longhaired Genius]

DrOliver's code works for me in IE5, Mozilla and Opera (but not Netscape4). Which browser are you using? Maybe you could use a non-breaking space, "&nbsp;", but it looks like it shouldn't be necessary...

[zooloo]

Use a tag that doesn't automatically want to break the line.

EG <b> or <i>

<p class="inline">.... and it is still </p>
<b class="inline">RAINING IN WALES </b>
<p class="inline">but the forecast is good .... </p>

zooloo

[SuzyUK]

I can't get it to put in a space either (IE6)

JohnnyWales, can I ask if there's a reason it needs to be a <H#> tag...as from what I know (not much really! :)) I'm under the impression that this is not the "correct" use of an <H> tag...

what you're trying to do can be achieved quite easily with a span class within a normal paragraph...

css:
.hilite {
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}

HTML:
<p>.... and it is still <span class="hilite">raining in wales</span> but the forecast is good .... </p>

apologies if this is not what you're after..but interested to know

Suzy
:)

[tedster]

In terms of getting the space to appear cross-browser, how about adding some padding-right for the H element?

Logically an H tag marks the header for content that follows it - but not for the preceding content. That holds true no matter how you set the visual rendering rules.

So, depending on the content involved, I'd say this might be a "correct" use of the H tag. But I'd be very careful about how you execute. A run-in head can be very useful, but using the H tag for phrases that have both preceding text and following text seems odd to me.

Certainly, don't pepper the page with these run-in H tags around every one of your keywords. If everything's in an H tag, it can be like NOTHING's in an H tag. The best bet is to use H tags to highlight the page's logical structure.

[g1smd]

I guess you want to use the H tag for the extra benefit that words within Headings get in SE rankings?

However, H tags are for Headings. They are used to map out the structure of your web page.

Check this link replacing your web address into the foo.com part:
[validator.w3.org...]

Note that %3A is the colon : and that %2F is the slash / and these are required.

[JonnyWales]

Thanks for the feedback. My original intention was to try and benefit from the perceived advantage for <H1> on my key phrases without seeing any difference when viewing the page. It appears however that doing this is likely to be penalised by certain search engines so my strategy may be not to proceed. Just trying to find a way to get back up the Google rankings as I have dropped sooooo far in the last couple of months without employing any dodgy methods. If you can't beat em ......

[g1smd]

The risk is, that by 'joining them', you might drop even further.

[Mardi_Gras]

My original intention was to try and benefit from the perceived advantage for <H1> on my key phrases without seeing any difference when viewing the page.

I think this all gets back to the three most important aspects of SEO - content, content, and content.

If you plan your content carefully - with thought to SEO - you will be able to use those H1 tags appropriately, and not as the tag equivalent of hidden text.

We do use CSS to maintain control of the size of the tag - standard H1 is way larger than anything we normally use - but it can be worked in as the header to the main body of text. So if your keywords are appropriate as the headline on the page, you can easily use H1. If your keywords are NOT appropriate as part of the page headline, maybe a little re-write is in order.

It does making planning a page a little more difficult - but I think you will find the effort worthwhile.