23 replies [Last post]
inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Can anyone let me know if css and html has to validate to the w3c standard to become worthy of being listed by the search engines? Do they penalise your website if its not?

My website wont validate html but does validate css.
I think I know why it wont validate html tho,
I have inline elements wrapped around block elements. Namely <p> inside <a>, but I cant seem to find another method for using a block as a hyperlink?
Hope I make sense I have only realy become serious with css recently.

Thanks

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 21 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

tripleshift
Offline
Enthusiast
Last seen: 14 years 17 weeks ago
Timezone: GMT+2
Joined: 2005-03-22
Posts: 70
Points: 0

Does CSS and HTML have to validate 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.

inzane wrote:
... but I cant seem to find another method for using a block as a hyperlink?

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

bye
tripleshift

...

I left my good sign in the other pants

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 21 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Does CSS and HTML have to validate for SEO?

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.

Quote:

Milton Keynes 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 ...

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:

Quote:

Milton Keynes Tang Soo Do

* 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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 47 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Does CSS and HTML have to validate for SEO?

TPH wrote:
Two simple tricks - link in signature


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 Wink Smile
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>

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Sairon
Offline
newbie
Last seen: 14 years 31 weeks ago
Joined: 2006-05-04
Posts: 5
Points: 0

Does CSS and HTML have to validate for SEO?

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 21 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Does CSS and HTML have to validate for SEO?

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 Wink

Verschwindende wrote:
  • CSS doesn't make pies

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Does CSS and HTML have to validate for SEO?

Sairon wrote:
This can differ from search engine to search engine. Google, which is the most relevant, ignores HTML/CSS entirely.

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Does CSS and HTML have to validate for SEO?

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Does CSS and HTML have to validate for SEO?

Chris..S wrote:
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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 21 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Does CSS and HTML have to validate for SEO?

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?

Verschwindende wrote:
  • CSS doesn't make pies

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 37 weeks 21 hours ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Does CSS and HTML have to validate for SEO?

Any particular reason why?

Or am I just being dense Tongue

Verschwindende wrote:
  • CSS doesn't make pies

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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.

Smile

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 7 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Does CSS and HTML have to validate for SEO?

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Does CSS and HTML have to validate for SEO?

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

/snap ! Smile

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Does CSS and HTML have to validate for SEO?

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.

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Does CSS and HTML have to validate for SEO?

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.

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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:)

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Does CSS and HTML have to validate for SEO?

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.

inzane
Offline
Regular
Last seen: 16 years 27 weeks ago
Joined: 2004-05-30
Posts: 18
Points: 0

Does CSS and HTML have to validate for SEO?

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

Smile