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:

CSS Marquee Module Level 3

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:

HTML for Modification Creators - DS Ultimate Forums- Nintendo DS forums

Note: Another article reposted from vBulletin.org

This post has been promoted to an article

 

Another great article! :thumbup:

 

Thanks Nick. I hope to repost pretty much everything from vBulletin.org here.

 

So true too. I find most just do basics and not style to validation, especially html/css.

Looking forward to those articles.

 

It's a bit more broad than that, many modification creators (and even in many cases, internet software programmers) apparently know a decent amount about PHP or whatever other coding language, but roughly zero about post 1995 HTML coding and CSS. Many fail to get that website design and HTML has progressed since tables were the norm for layout, FrontPage was in fashion and HTML for Dummies was published.

 

A very good read Cheatmaster! I would certainly have mentioned the unneccessary SHOUTING of code myself

 

You mean typing code in all caps? Ah yes, that went out of fashion in the 90s.

 

Yeah, well its still readily available as tutorials all over the net sadly.

 

You mean the ones that haven't been updated since about 1996? Yeah, I know what you mean there.

 

Those ones yes, its what I first found when I wanted to learn HTML and theyre nothing but crap, you would think Google would stick those sort of sites to the back and not have them rank so high when the info is all outdated.

 

Blame the open directory or whatever, gives decent page rank, but they never seem to check any of their sites are up to date/still work.