W3C Validation - how important is it?

[leefish]

I'm a noob at HTML (and css and php) and I am having real problems getting my HTML to validate. I make the page, it looks good, I check the pages in Opera, Firefox, IE6, Safari on my own PC and use web tools to check my work.

It all looks fine, then I take my page to Validator - and it does not validate. I don't mean things like missing alt and things - on one page the validator is reporting over 300 errors - things like closing tags - but they are there. It looks fine until I try and fix what the validator says is wrong then my page is broken to hell. Should I take the validator results seriously?

link to my page:

http://www.leefish.nl/mybb/forumdisplay.php?fid=16

I know the header is a bit shaky but the rest of the HTML looks ok (as far as I can see). The reason I am asking is because I have made an Xthreads example, and I would like to post it here - but not with crap HTML

[RateU]

Well, personally, sometimes dealing with validator make me a bit confuse. But, as long as we didn't miss important tags, I think we will not get a huge error. You can see it in you page source.

Try to fix the error step by step. At least for the first three error:

1. You missed the <tr> tag after the <table> tag.
Find this in your forumdisplay or something like that template:

HTML Code

<td valign="top" width="18%">

---

You should have <tr> tag before the tag above.

2 and 3. Your image tag in the part above:

HTML Code

<img src="......./bookmarksite.jpg">

---

You should add alt attribute in the tag. And self close the tag:

HTML Code

<img src="......./bookmarksite.jpg" alt="" />

---

[leefish]

Hi RateU, yes, I am trying that. But its breaking my entire layout - I see the page falling apart in front of my eyes as the number of "incorrect" issues are fixed according to validator.... it makes me sad.

[RateU]

Yeah. Like I said before, sometimes dealing with validator make us a bit confuse. If you care about the validator, you need to deal with it . That is how MyBB template system works. Part by part. But, personally, sometimes it makes me fun to play with it . At least there are some "big" missing tag in your templates, like this:

HTML Code

<table .......... > <table .......... >

---

You missed the <tr> and the <td> part . Again, just see your page source.

[ZiNgA BuRgA]

Quote:W3C Validation - how important is it?

Personally, your end users probably won't care, so if it looks fine everywhere, it's probably not that big of an issue.  Although it may work fine on current browsers, it may not for future browsers, though in most cases, it shouldn't break on future browsers.
I'd aim for it, but this is kinda more like a nicety.


Try fixing your page up bit by bit.  Adding alt tags to images and self closing tags _shouldn't_ change the page layout on browsers, so do that one first.  Then go about fixing your other issues, and this will also help you track down what part is exactly causing things to break (and you can seek advice on that).

[MattF]

Your first problem is here:

Code:

<tr><td class="trow1"><img src="http://www.leefish.nl/SiteImages/bookmarksite.jpg" alt="books" /></td></tr> </tr>

---

You have two closing row tags, </tr>.

When validating, start with the uppermost errors on the page, as you'll usually find that several problems listed further down may be phantom errors induced by the earliest error on the page. As to why validation is important:

1) Correct rendering in all browsers. Get the code valid and you know that all browsers will render it as they should and also more quickly, as they aren't trying to guess how the page should look, i.e: quirks mode rendering.

2) Accessibility. A valid page, with alt tags, title tags etc is more accessible.

3) It's good form, and there is no valid reason not to generate valid output.

[leefish]

I have spent all morning (and most of last night) working on this. I now have 21 errors, but I think they may be rooted in an error in my forum display. Based on the help from Mattf I think I should maybe solve this first before I dig around in the rest of the TD/TR tags.

http://easycaptures.com/fs/uploaded/363/2722247092.jpg (screenshot of error message)

This is the code I put in my forumdisplay - I called it book_forumdisplay in the global templates so it is applicable only to the book forum using my "book" templates.

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<html> <head> <title>{$mybb->settings['bbname']} - {$foruminfo['name']} </title> {$headerinclude} <script type="text/javascript"> <!-- lang.no_new_posts = "{$lang->no_new_posts}"; lang.click_mark_read = "{$lang->click_mark_read}"; // --> </script> </head> <body> {$header} {$moderatedby} {$rules} {$subforums} <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center"> <tr> <td valign="top" width="18%"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;"> <tr><td class="thead"><strong>Books</strong></td></tr> <tr><td class="trow1"><img src="http://www.leefish.nl/SiteImages/bookmarksite.jpg" alt="books" /></td></tr> </table> <td valign="top"> {$threadslist} <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0"> <tr> <td align="left">{$usersbrowsing}</td> <td align="right">{$newthread}</td> </tr> </table> {$permission_box} {$footer} </body> </html>

---

The error is on line 24 - but if I take that line out then the layout breaks and I get the result as in the picture below:

http://easycaptures.com/fs/uploaded/363/3008843188.jpg

I am not sure how to fix this. Can anyone help?

[ZiNgA BuRgA]

You have a number of unclosed tags in that code sample.  I think you may need to take a bit of a step back and try to visualise the output you want.
Indentation may be a bit of a help - I've indented parts of your code - basically, as a guide, indent when you open a tag, and unindent when you close - so <table ...> will vertically align with </table>.  Can you see the issue now?

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<html> <head> <title>{$mybb->settings['bbname']} - {$foruminfo['name']} </title> {$headerinclude} <script type="text/javascript"> <!-- lang.no_new_posts = "{$lang->no_new_posts}"; lang.click_mark_read = "{$lang->click_mark_read}"; // --> </script> </head> <body> {$header} {$moderatedby} {$rules} {$subforums} <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0" align="center"> <tr> <td valign="top" width="18%"> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both;"> <tr><td class="thead"><strong>Books</strong></td></tr> <tr><td class="trow1"><img src="http://www.leefish.nl/SiteImages/bookmarksite.jpg" alt="books" /></td></tr> </table> <td valign="top"> {$threadslist} <table width="100%" cellspacing="0" cellpadding="{$theme['tablespace']}" border="0"> <tr> <td align="left">{$usersbrowsing}</td> <td align="right">{$newthread}</td> </tr> </table> {$permission_box} {$footer} </body> </html>

---

[leefish]

Aha. I see. I think I will do more of the HTML in notepad+. I have been working directly in the templates but they do not line the code up neatly. In Notepad I can use the indent option. Thank you.

Errors are now at 24, so I will work on those.

EDIt: got it down to 9, and now my host is down. I hope it wasnt me pressing validate a million times....

[leefish]

Sorry for the double post, but ...its validated - kinda. Yay.

I wanted a certain layout on the forum display, and in order to get that layout I think I am going to have to live with four errors. The showthread validates, but the forum display does not. This is because the forumdisplay_thread starts with a table and ends with a table. If I take the table references out then I get a pass and valid code. Sadly, it screws up the layout. You can see it on the attached screenshot.

http://easycaptures.com/fs/uploaded/363/5315330858.jpg

Would it still be ok for me to post my XThreads example here with these 4 validation errors?