HTML for Modification Creators
 

Now, call me a real obsessive for valid code on my site, but just now, I just went and changed practically three people's entire modifications in terms of their coding to fix lazy design practices and to make the site pass validation (or in this case, the logged in view nearly pass validation). But never the less, the reason I'm here and writing this, other than because I like writing articles, is because I'm tired of the 1996 era coding practices of many of the coders and designers here. Now, we all know how greatly important good PHP code is, correct? Well this article will teach you how to not completely try to downplay the importance of the HTML coder the forum and modifications are based on, and how to make the actual code the browser itself sees generally pass validation and to stay clear of decades old crappy coding practices still being used in quite a few released products here.

So What Needs to Change

In my opinion, this is the effort given to the actual HTML and CSS coding in modifications. Way, way too many mods and hacks nowadays seem to go with an idea that 'if it works, it works' without caring less how it's actually coded HTML wise, and meaning those forums that install tons of addons end up with HTML validation errors like crazy and causing all manner of grief to those admins who actually care how their site is coded. Those old web design books teaching about frames and animated gifs are not exactly teaching modern web design or coding in any real sense. We are not in the 90s any more, valid code is important, and Internet Explorer isn't the only browser.

First Things First, ALWAYS Remember the Alt Attribute

Big mistake number one I've seen in a lot of modifications, the alt attribute for images is NOT optional. If the image has no meaning, then you're generally recommended to use alt="" instead of just leaving it out altogether. But in general, try to make sure every single image tag you use in your product or modification has an alt tag with something relevant in said space, both for the blind and screen readers, and various search engine bots and what like.

Way too many mods seem to forget this minor thing, so don't make the same mistake.

Secondly, Encode Special Characters in URLS

You know the drill. Don't just use ampersands in links, like &, use & when using these variables in links. Best of all, don't leave them out AND hard code the links in the PHP files, that's rather annoying to fix when it would take only a few seconds to add that extra section of the code to your links.

Use /> instead of > Where Relevant

This means at the end of all image, link, meta and various other tags. No excuses. Okay, so there is an excuse if you've set the Doctype to HTML 4, but vBulletin is set to XHTML 1.0 Transitional by default, so be nice to the majority of users who aren't going to change the doctype for your modification and use /> where relevant.

Important Note: Where relevant being the key word. Don't use it where it's not needed, such as replacing the </a> in an A tag, like I've seen before and like what probably cause the W3C validation process to nearly choke on the code.

Don't use Mixed Capitalisation for Javascript attributes

In HTML of yore, you'd use OnMouseOver and what not. In XHTML, you use onmouseover and onchange rather than capitalising certain words of these attributes. Doesn't make a difference as far as the javascript itself working, but will cause a few errors when the page is validated and what not.

1996 Deprecated Tags Are to be Avoided

In other words, cut out the embed tags, center tags, font tags and various others like them from your modifications, as they are deprecated and will not be valid in various versions of HTML and XHTML in the future.

Similarly, although they have been considered for future versions of XHTML and what not, please, for the love of everyone's sanity, avoid marquee and blink tags. This is very much because they are annoying as heck, pretty much drive off quite a few visitors and more importantly than not... well, they're just annoying and unusable, okay?

Note: I'm not joking about the marquee attributes in future W3C guidelines:

http://www.w3.org/TR/css3-marquee/#the-marquee-style

Titles and SEO

Now, not quite a HTML issue, I can accept that, but as I said a few months ago, a lot of modification authors need to realise that the title tag has to be used wisely. In fact, a few things to consider are:

1. You should NOT put your modification name as the title, it's completely useless to search engine bots and visitors, or to their bookmarks.
2. You should NOT just repeat the website title (*cough* ibPArcade *cough*)
3. Numerical IDs as title aren't a good idea either.

This section of the page should ideally state the content contained within's title (a picture in a gallery, a game in an arcade, a video in a video directory, an article in an article mod, etc) and maybe, just maybe, some kind of key words that the user entered, maybe from the tags or description.

So there you have it, cheat-master30's not so exclusive guide to proper HTML usage for modification authors, hopefully aimed to stem the tide of badly coded modifications misusing no manner of HTML tags and to get them to use proper CSS. Original article found here:

http://dsultimate.net/Board/upload/blog.php?b=528

Excellent.Thanks.:)

No problem. Hope it helps someone, and I hope more modifications use more up to date coding practices in the future.

Thank you for the great article. I've lately been wrestling with XHTML 1.0 Strict on a Drupal site of mine.(very fun)
Another big problem I see alot of people do is improperly use the HTML commenting.
<!-- This is a comment -->

But often, you will find ugly variations of commenting in many peoples code.
<!------------ This is NOT a comment ------------>

<!------------------------------------------------
--------------- Even worse, people ---------------
------------------------------------------------->

A single extra hyphen can cause problems especially dealing with other template engines.
<!--- Just one extra hyhen will throw off vaildation --->

Very true!!! From here - http://htmlhelp.com/reference/wilbur/misc/comment.html

I agree with the above two posts, those comment types are bad coding, and I'm pretty sure I even read a few articles online before saying what was wrong with them. As said by the posters above, make sure to use proper commenting if you use it.

I need to revive this, because too many modification authors are forgetting all about the ampersand encoding bit. Fix this please, it's annoying having to make your modifications validate, and I don't know enough about PHP to go any further.