<h1> as bold opening phrase in top paragraph

Do I lose SEO benefit of <h1> with this method?

[kiril]

I'm using the following technique to put the name of my organization in larger letters at the start of the opening paragraph of my main page. Do I lose the SEO benefit of using a keyword in <h1> by including the id inside it?

Can anybody suggest alternatives if this is not the way to go?

n.b. For my main page, it doesn't make sense to use <h1> in the usual heading sense, because the name of my organization already appears in a big graphics logo on top.

CSS:

h1#indexpage {
display: inline;
font: bold 16px verdana;
}

HTML:

<p> <h1 id="indexpage"> Widgets.com </h1 id="indexpage">
is the best place to buy widgets. Blah, blah blah...</p>

Thanks in advance.

[netcommr]

What is your intent?

A. rank for 'widget' => leave 's.com' not attached to the keyword in the code, but is visibly

or

B. rank for your org, 'widgets.com' => h1 not needed, use <span

things to consider,

improper use of code structure, <h1 then <p
why not use the name twice, you want people to remember as well as the spider

p.s. loose all attributes in the </h1>, not all software(spiders) will recognise </h1 something>

[pageoneresults]

<h1 id="indexpage"> Widgets.com </h1 id="indexpage">

Hello kiril, the tag above is not correct syntax. It is also incorrect nesting of elements. Here would be the correct use of the <h> and <p> tags...

<h1 id="indexpage">Widgets.com</h1>
<p>The best place to buy widgets. Blah, blah blah...</p>

I can see that you are trying to increase the relevance of that text but, there are more elegant ways to do this. For one, since you cannot nest that <h> element in there, you could use the <strong> element...

<h1>Industrial Widgets for Sale</h1>
<p><strong>Widgets.com</strong> is the best place to buy widgets. Blah, blah blah...</p>

[TheDoctor]

Or, following on from pageoneresults, you could also use span:

<p> <span id="indexpage"> Widgets.com </span>
is the best place to buy widgets. Blah, blah blah...</p>

and use the same CSS as you're currently using.

[gmoney]

I have been wondering the same think as kiril.

Assuming you wanted to get the most rankings boost for "Widgets" then does anybody have any opinions on which of the six ways would work best - or is there no difference. Note: I believe following examples all appear the same to the user.

<font size="+1"><b>Widgets</b></font>

<h3>Widgets</h3>

<h1><font size="+1">Widgets</font></h1>

h1#head { font-size: medium; font-weight: bold}
<h1 id="head">Widgets</h1>

.head { font-size: medium; font-weight: bold}
<span class="head">Widgets</span>

h1 { font-size: medium; font-weight: bold}
<h1>Widgets</h1>

[NickH]

Those options wouldn't appear the same to all users. Without the use of a heading tag, it would be harder for users of Lynx, or of screen readers, to recognise the heading as a heading.

I vote for either option 6 or option 4. Option 4 if you need to reference the id elsewhere; 6 otherwise. Those are the best options HTML-wise, at least. Hopefully Google picks up on the <h1>.

[DrDoc]

For standards compliant browsers (= not IE):

h1#indexpage {
display: inline;
font: bold 16px verdana;
}
h1#indexpage+p {
display: inline;
}

<h1 id="indexpage">Widgets.com</h1> <p>is the best place to buy widgets. Blah, blah blah...</p>

---

For most browsers, IE as well:

h1.indexpage {
font: bold 16px verdana;
}
.indexpage {
display: inline;
}

<h1 class="indexpage">Widgets.com</h1> <p class="indexpage">is the best place to buy widgets. Blah, blah blah...</p>

[NickH]

Please ignore my contribution, above. I misread the question.

[kiril]

Thank you all for the suggestions. I hope somebody has time to read my long, late follow up.

Dr. Doc' solution works very well:
-------
h1.indexpage {
font: bold 16px verdana;
}
.indexpage {
display: inline;
}

<h1 class="indexpage">Widgets.com</h1> <p class="indexpage">is the best place to buy widgets. Blah, blah blah...</p>
-------
I'd like to follow up to make sure I understand some more general lessons about CSS--I hope somebody has the time to indulge me, because these things just aren't covered in my CSS books.

1) Is my understanding correct?:
a) .indexpage defines a class that can apply to any element
b) h1.indexpage defines additional styles for the case when indexpage is assigned to an h1

2) I'm assuming that both <h1> and <p> must be defined as "indexpage" classes so that one is "inline" with respect to the other. For this association to exist, do they need to be next to each other in the html? What if there was another element defined as "indexpage" later in the html?

3) Not to waste people's time, but I also don't know what this means: h1#indexpage+p

*** One thing I really need is a book (or website) that explains all the ways of declaring styles. Can anybody suggest a place to look? ***

Thank you all.

Kiril

[netcommr]

1a yes
1b yes
2 no, they do not need to be next or associated with each other. when a class is defined, it will apply to every tag in the page with that class.
3 A plus (+) indicates that the preceding type, word, or group occurs one or more times. (this is waht your thinking of in question 2)

w3.org defined the standards
css2 specifications [w3.org]

[willybfriendly]

Nice Dr. Doc. I had been having problems with IE on this one and you just soved it for me. WW is a great place :)

Now if I only had a decent global search&replace :o

WBF

[TheDoctor]

If you want to read up about CSS, books by Eric Meyer are recommended: [i}Cascading Style Sheets Programmer;s Reference[/i] is essential, and Eric Meyer on CSS teaches CSS by going through a series of case studies.

Eric Meyer's web site at [meyerweb.com...] is also worth looking at.

You should also look around the archives here, and lurk. I learnt most of my CSS from Meyer's books and lurking in this vicinity. (Not that I'm an expert, but I have been known to produce the odd bit of CSS that works)

[DrDoc]

Actually, the plus indicates that the element immediately following the plus has to be a paragraph.

element+other = Applies to all other elements when immediately preceded by element

---

Example:

p {
color: blue;
}
h1+p {
color: red;
}

<h1>Foobar</h1>
<p>Lorem ipsum</p>
<p>Foo bar baz</p>
<p>Lorem ipsum dolor sit amet</p>
<h1>Widgets</h1>
<p>Foo bar baz</p>

---

Example 2:

a+span {
color: red;
font-weight: bold;
}

<a>Some link</a><br />
<a>Other link</a><br />
<a>Link again</a>
<span>Don't miss our special!</span><br />
<a>Foobar link</a><br />
<a>Widget link</a><br />