H1 Tag and CSS (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

ou812 -> H1 Tag and CSS (1/23/2005 0:45:00)

Okay, still much to learn with CSS. So here goes....

I would like to use an H1 tag (for SEO purposes) but with CSS so that it looks how I want it to look. When I define an H1 CSS tag and then use it, it acts like a headline. Meaning it places line breaks around it (which is I'm sure how it should act). But I want to have the H1 text be some words in a sentence in a paragraph but to stand out more but still be part of a sentence. Something that would look like this:

quote:

This is my sentence and MY H1 TAG is part of this sentence.


But, when I do this it ends up looking like this:

quote:

This is my sentence and

MY H1 TAG

is part of this sentence.


This is done if I do my HTML something like this: <span class="text">This is my sentence and</span><H1>My H1 Tag</H1><span class="text"> is part of this sentence.</span>

If I play with the tags a bit I can get it to look right but I'm thinking it is not a good idea to do it this way because my H1 is much larger (SEO unfriendly) than it should be.

<H1><span class="text">This is my sentence</span>MY H1 TAG<span class="text">is part of this sentence.</span>/<H1>

I hope I'm making some sense....

So, is there a right way, or better way to do what I'm looking for, that is also SEO friendly?

thanks!



Kitka -> RE: H1 Tag and CSS (1/23/2005 1:50:01)

Does this maybe do what you want? 

<p class="text" style="display:inline;">This is my sentence and </p> <h1 style="font-size:14px;display:inline;"> My H1 Tag </h1> 
<p class="text" style="display:inline;"> is part of this sentence.</p>



d a v e -> RE: H1 Tag and CSS (1/23/2005 3:45:39)

people with screen readers are going to be confused when they reach a top level heading in the middle of a sentence.

can't it be as a heading at the beginning of that paragraph then simply use <strong> within the sentence? well it's up to you but i wonder whether it really works to place an H1 in a sentence or maybe the seo algorithms aren't celever enough to realise??



ou812 -> RE: H1 Tag and CSS (1/23/2005 12:39:43)

Kitka, your example acts the same as how I don't want it to look. But thanks for the suggestion!

Dave, Good point. I've not thought about screen readers at all. I was hoping to not have it look like a heading but just be bolded in the paragraph. Currenly I do have the phrase as bigger text and bolded, but I was hoping to use H1 for SEO purposes. It is begining to sound like this may not be something good to do.

I'll ponder a bit more (and even wait for other thoughts[8|]), and maybe just end up rewording etc. so that a H1 fits nicer on the page.



jaybee -> RE: H1 Tag and CSS (1/23/2005 12:50:35)

Dave is correct. Only use heading for headings.




skip -> RE: H1 Tag and CSS (1/23/2005 17:08:31)

from what i have read the h1 is only for headers
i used <span> to highlight inline text

i put this in my style sheet

.note
{
color: rgb(200,85,15);
font-weight: bold;
}

<p>my sentence starts here<span class="note">then my highlighted text</span>then the rest of my sentence</p>

looks like

my sentence starts here then my highlighted text then the rest of my sentence

i could use strong but this lets me control the color etc. from my style sheet
and i think the search engines are looking for the <h1> at the top of the page as a header and not buried in the the paragraph text



Kitka -> RE: H1 Tag and CSS (1/23/2005 17:24:09)

quote:

Kitka, your example acts the same as how I don't want it to look. But thanks for the suggestion!


That's odd! Works on my computer, in FP preview, IE and FF. Doesn't show in FP Normal view though.

But, I agree with everyone else, best to keep h1 etc for genuine headings.



jaybee -> RE: H1 Tag and CSS (1/23/2005 17:27:46)

quote:

That's odd! Works on my computer


Depends what other styles he has defined. They could be overriding.

Accessibility doesn't like Headers being used for anything other than Headers. People using Jaws navigate via headers.



Kitka -> RE: H1 Tag and CSS (1/23/2005 18:21:04)

While we are discussing ways of using h1 tags for SEO, could I get a few opinions about enclosing a banner graphic in h1 tags, where there is no actual text included. e.g. 

<div id="header">
<h1><img src="images/banner.jpg" alt="The text from the banner" width="750" height="120"></h1>
</div>


Is this an OK tactic, or is it frowned on by SEs?



jaybee -> RE: H1 Tag and CSS (1/23/2005 18:41:58)

Well you could but why?

It's unlikely the SEs can read the text in the banner, so they're only going to see the alt and title text at most.

Put the banner in and use a heading, that way your keyword gets used twice and if you put in title text on the banner it gets used 3 times and you're not seen as spamming. 

<div id="header">
<img src="images/banner.jpg" alt="KEYWORD Banner" title="further information on KEYWORD" width="750" height="120">
<h1>KEYWORD</h1>
</div>


That also meets the accessibility guidelines



Kitka -> RE: H1 Tag and CSS (1/23/2005 18:51:35)

quote:

Well you could but why?


Weird logic maybe, but I thought that by enclosing the banner in h1 tags, that the SE might read the alt and title text as being h1s.

Thanks for the suggestion also. [:)]



ou812 -> RE: H1 Tag and CSS (1/23/2005 23:27:16)

Thanks everyone for all your input. Much appreciated. I will design the page/wording so the H1 tag is header only. No need to upset any possible rankings.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.09375