homepage Welcome to WebmasterWorld Guest from 54.237.38.30
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
<h1> as bold opening phrase in top paragraph
Do I lose SEO benefit of <h1> with this method?
kiril

10+ Year Member



 
Msg#: 1704 posted 3:50 am on Aug 22, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1704 posted 4:18 am on Aug 22, 2003 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1704 posted 4:34 am on Aug 22, 2003 (gmt 0)

<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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1704 posted 8:42 am on Aug 22, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1704 posted 11:32 am on Aug 22, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1704 posted 2:14 pm on Aug 22, 2003 (gmt 0)

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

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1704 posted 2:36 pm on Aug 22, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1704 posted 6:27 pm on Aug 22, 2003 (gmt 0)

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

kiril

10+ Year Member



 
Msg#: 1704 posted 2:09 am on Aug 23, 2003 (gmt 0)

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

10+ Year Member



 
Msg#: 1704 posted 3:06 am on Aug 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1704 posted 4:38 am on Aug 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 1704 posted 12:49 pm on Aug 23, 2003 (gmt 0)

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

WebmasterWorld Senior Member drdoc us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 1704 posted 5:41 pm on Aug 23, 2003 (gmt 0)

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 />

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved