HTML for Modification Creators

Discussion in 'Member Articles & Tutorials' started by cheat-master30, Jan 17, 2010.

  1. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    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
     
    2 people like this.
  2. Nick

    Nick Regular Member

    Joined:
    Jul 27, 2008
    Messages:
    7,441
    Likes Received:
    218
    Another great article! :thumbup:
     
  3. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    Thanks Nick. I hope to repost pretty much everything from vBulletin.org here.
     
  4. Webmist

    Webmist Champion

    Joined:
    Jan 30, 2008
    Messages:
    305
    Likes Received:
    18
    Location:
    US
    First Name:
    Jen
    So true too. I find most just do basics and not style to validation, especially html/css.

    Looking forward to those articles.
     
  5. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    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.
     
  6. Michael

    Michael Regular Member

    Joined:
    Jan 18, 2004
    Messages:
    166
    Likes Received:
    35
    A very good read Cheatmaster! I would certainly have mentioned the unneccessary SHOUTING of code myself :D
     
  7. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    You mean typing code in all caps? Ah yes, that went out of fashion in the 90s.
     
  8. Michael

    Michael Regular Member

    Joined:
    Jan 18, 2004
    Messages:
    166
    Likes Received:
    35
    Yeah, well its still readily available as tutorials all over the net sadly.
     
  9. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    You mean the ones that haven't been updated since about 1996? Yeah, I know what you mean there.
     
  10. Michael

    Michael Regular Member

    Joined:
    Jan 18, 2004
    Messages:
    166
    Likes Received:
    35
    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.
     
  11. cheat-master30

    cheat-master30 Grand Master

    Joined:
    Jul 30, 2009
    Messages:
    789
    Likes Received:
    59
    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.
     

Share This Page