Does CSS and HTML have to validate for SEO?

No, it doesn't have to validate.

Try setting the anchr to display: block;

Let us have a look at the code, we'll see if it's good for SEO.

css has nothing to do with seo, instead html markup does.
css is presentation, google looks at the structure (html).

don't just count on validation though, validation only tells you that your code syntax is correct, it does not tell you if your site is semantically well formed.

it is not easy to tell in few words how to accomplish that, but in order to learn how, you have to understand the implicit meaning of each html tag. once you know what each tag is for, there's little chance to use it wrong.

use headings (h1,h2,h3 etc.) to identify the sections of your site, use p for paragraphs, don't clutter your code with unnecessary code like too many divs or (vary vary bad) divs and span to visually accomplish what headings or emphasis and so on are instead for.

assign display: block; to the inline level element you wish to behave as a block.

bye
tripleshift

...

I'd like to show you an example (and plug my site).

A google search for MK Tang Soo Do or Milton Keynes Tang Soo Do brings up my website as the first result. That's pretty [email protected] good.

Did I pay for this? No.
Did I get an SEO company to do this for me? No.

Two simple tricks - link in signature (see below), and semantic HTML.

Here's what the raw html looks like, what Google will see:

* Home
* Club News
* About
* Training Times
* Instructors
* Calendar
* Photo Gallery
* Merchandise
* Contact

Welcome to MK Tang Soo Do

Tang Soo Do is a Korean martial art which teaches self-defence & discipline. MK Tang Soo Do is a club based in the Milton Keynes area, led by Master Fred Daniel (4th Dan).
Recent News

THAT's how to get good SEO results

I don't think you should really be promoting tricks to gain page rank using sig lines :? otherwise I may just have to move all your posts out
This snippet of code is from the anchors in sig lines of the forum.
div class="postbody"><a href="http://www.mktangsoodo.co.uk/" {NOFOLLOW} target="_blank">MK Tang Soo Do</a>

This can differ from search engine to search engine. Google, which is the most relevant, ignores HTML/CSS entirely. Google itself doesn't even validate.

Well, if it's nofollow, then surely my pagerank in Google is down to semantic HTML alone?

Woot, chalk one up for the reasons of semantic html

Not quite. Google does pay some attention to text hidden by using visibility: hidden or text-indent: -XXXX.

Tyssen, surely that implies Google is ignoring the CSS. If it paid attention to the CSS it would ignore text with visibility:hidden.

I've read that sites hiding text with CSS are penalised for doing so, so that implies that Google is not ignoring the CSS. It only appeared to be a problem with inline or internal styling though - sites that keep styles in an external stylesheet (and being doubly sure by protecting the CSS directory with robots.txt) didn't seem to have a problem.

I thought I read somewhere that although Google penalises for hidden text via CSS, it understands the image replacement techniques and doesn't penalise?

Or did I just make that up?

Hi, I added display block to my css code
a.mycode{display:block; etc

But I cant really see how this will help validate my HTML, my CSS knowledge is limited perhaps I am missing an important point?

Here's what I have:

HTML:

<a class="background-pic" href="target-page.html">
<p class="some-copy">blah,blah,blah</p>

CSS:

a.background-pic{
display: block;
position:relative;
float:left;
top:-95px;
width:600px;
height:300px;
background-image: url(target.jpg)
}

p.some-copy{
position:relative;
line-height:15px;
vertical-align: bottom;
left: 170px;
height:10px;
float: left;
width:160px;
top: 75px;
color: #FEFEFE;
font-size: 12px;
font-family: Arial, "Times New Roman", Verdana;
}

Thanks.

Any particular reason why?

Or am I just being dense

Erm, remember I'm fairly new to this, so it's probably me being dense!

Let me explain
I have a jpeg graphic image displaying on the page with a paragraph of text that has to be placed precisely within it.
I need the whole jpeg to be a clickable link to another page.

Hi, the problem I am having seems to stem from having precisely placed text inside my background image, it would seem I have to add an extra html element to do this which then in turn invalidates the html.
I'm sure someone with superior css knowledge would know the answer, but for me it’s a very real problem.

Thank you

I think you'd better post a more complete version of your code or a link to the page but from the snippet you've provided, you can't have a <p> inside an <a>, it has to be the other way around.

Do you have a link (also explain explicitly which bit of the page is causing you the problem).

/snap !

Links are inline elements, inline elements can't contain block level elements. Making a link through CSS "display: block" does NOT make it a block level element from the validation point of view.

If you want tags inside your links for some reason they must be inline elements. Span's often do well at this job as they carry no other meaning.

You can then make the link and the span appear to be block level if you like with CSS but the HTML will remain intact and valid.

Hi I have tried separating the image and the text entirely and placing them as separate entities, but that has just given me a new house of horrors to deal with.
I am reluctant to post a link to the site because it is adult in nature and I really don’t wish to offend anyone.

So just to clarify, I have text within a background image, I wish the image to be the link to another page, but not necessarily the text.

BTW thanks for the help guys.

Can you make a mock up of the page with placeholder images and typesetter latin text? I am struggling to understand what you are trying to do.

My best guess is ...

<div class="link_container">
  <a href="somepage.html"><img src="someimage.jpg" alt=""></a>
  <p>some text</p>
</div>

.link_container { position: relative; }
.link_container p { position: absolute; top: 10px; left: 10px; }

change the pixel offsets to whatever is appropriate for your design.

Hi
Chris your code looks like it puts the text after the image, when i'm really trying to get it placed inside the image.

I'm making a non-adult mock up at the moment to try and be a bit clearer.

Cheers:)

Hi,
here is a link to a section of the website in question.
The greyed out areas represent the images in which the 'blah' text is placed.
These grey boxes link to their seperate target pages.
No text whithin the grey boxes needs to link anywhere, as its only the grey boxes themselves that need to link.

http://www.inzanemedia.co.uk/test/cats/index2.html

Thanks a lot.

Did you try my code above?

The position:relative on the container means the offsets in the position absolute use as their origin the top-left corner of the container - which will also be the top left corner of the image. As long as the text will always fit neatly within the space of the image you won't have any problems.

Although, I think a better solution would be to place the image as a background on the link and to nest the text within the link. Just don't use a <p>, use a <span> or another inline element.

Hi, sorry was away, Chris I took your advice and replaced the replaced the relevant <p>s with spans, and did some other bits n bobs. And guess what It now validates!!!..Hurray.lol, thanks for all the help guys, I have learned a lot during the course of this particular struggle..so until the next time.......