Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
HTML for Modification Creators
cheat-master30
Join Date: Mar 2007
Posts: 1,715

Favourite Quotes: In the last moments of the finale of the finale when relief leads to neglience that begets rashness... That is when the comeback that faltered comes back and beats you - Fawful

Information Classified
by cheat-master30 cheat-master30 is offline 10 Jan 2009

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
Views: 4040
Reply With Quote
Comments
  #2  
Old 12 Jan 2009, 19:12
Golzarion's Avatar
Golzarion Golzarion is offline
 
Join Date: Jan 2008
Real name: Mohsen
Excellent.Thanks.
Reply With Quote
  #3  
Old 12 Jan 2009, 22:20
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
No problem. Hope it helps someone, and I hope more modifications use more up to date coding practices in the future.
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
  #4  
Old 01 Mar 2009, 16:22
Bilderback's Avatar
Bilderback Bilderback is offline
 
Join Date: Sep 2007
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 --->
Reply With Quote
  #5  
Old 01 Mar 2009, 17:09
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Very true!!! From here - http://htmlhelp.com/reference/wilbur/misc/comment.html

An HTML comment begins with "<!--", ends with "-->" and does not contain "--" or ">" anywhere in the comment.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #6  
Old 01 Mar 2009, 21:29
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
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.
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
  #7  
Old 30 Aug 2009, 23:26
cheat-master30's Avatar
cheat-master30 cheat-master30 is offline
 
Join Date: Mar 2007
Location: Information Classified
Real name: cheat-master30
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.
__________________
Proud vBulletin supporter (cheat-master30 at official forum)
DS Ultimate- A Great Nintendo DS forum-
My Nintendo DS forum covering Mario Kart DS, Super Mario 64 DS and the like. Powered by the amazing vBulletin 3.7 software.
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 09:05.

Layout Options | Width: Wide Color: