[that was supposed to be a scarey dalek voice]
today, during my customary attempt to avoid doing any real work, i’ve been doing a bit of tweaking and tinkering to bilge – sook my stupid brain! and have managed to get the output HTML on the frontpage to conform to… not XHTML transitional… or even XHTML 1,0 strict… but… wait for it… XHTML 1,1 strict! truly i am a god amongst coders! now all i have to do is spend the rest of the week beating the rest of the site [and any old and potentially delinquent postings] into equally compliant line.
for a small collection of the main things i’ve learned to watch out for when aiming for the lofty goal of XHTML compliance, click the ‘more’ link. sort all these out and you should get the list of errors reported by the W3C validator down to manageable proportions!
1. first of make sure all your tags are closed properly. most WYSIWYG editors will at least have the common decency to close paragraph tags these days, but a few still don’t close <li>s. closing all tags means even the ones which don’t usually have a closing tag – so <br> becomes <br /> [or <br><br /> if you want to be longwinded about it], <hr> becomes <hr /> and <img src="whatever" > becomes <img src="whatever /> or <img src="whatever"></img>.
2. <img> tags must have an <alt> tag but mustn’t have a <border> tag. [define your image borders in your CSS instead].
3. use the <script type="text/javascript" >[JS stuff in here]</script> format to add javascript – or my preferred method; <script type="text/javascript" src="whatever.js"></script> if you want to load in your javascripts from an external file.
4. all your code and attributes should be in lower case and all your attributes should be quoted – even the things like width and height when defined in pixels, so width="300" is good – Width=300 is bad.
note also that in spite of macromedia‘s high-falutin’ claims for dreamweaver‘s supposed new standards compliantXHTML writing abilities – if you use dreamweaver‘s behaviours, they can break XHTML compliance. you’re most likely to find this when using image rollovers, where dreamweaver will write the rollover handlers as onMouseOver and onMouseOut. you will need to search these all out in your code and replace them with the lowercase onmouseover and onmouseout to ensure full XHTML compliance.
5. and finally, here’s a good one that took me ages to work round – if you have links which open in a new browser window, using target="_blank" these won’t validate as XHTML strict. to create XHTML strict compliant links which open in a new browser window, use the following technique:
use the rel="whatever" attribute within all your ‘new window’ links. in the example given here i’ve called my rel ‘openinnewwindow’: <a href="someotherpage.html" rel="openinnewwindow"></a>
then add the following function to your page’s javascript:
function newwindowlinks()
{
if(!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for(var i=0; i
var anchor = anchors[i];
if(anchor.getAttribute("href") && anchor.getAttribute("rel") =="openinnewwindow")
anchor.target = "_blank";
}
}
window.onload = newwindowlinks;
you can call the function whatever you like but make sure you use this name in the window.onload handler at the end. also ensure that the if(anchor.getAttribute("href") && anchor.getAttribute("rel") =="openinnewwindow") line corrresponds to whatever name you used in the rel links.
now you should have links which not only open in new browser windows, but are also XHTML 1,1 strict compliant.
the above accounted for most of the errors i was getting when trying to force my flabby code to get its arse together and conform to XHTML 1,1 strict, so hopefully these hints should set you on your way!
