Coding vBulletin To Web Standards

Brandon

vBSetup Team
vBulletin Owner
vBSetup Owner

#1 10-03-2006, 08:09 PM

Join Date: Jul 2006

Posts: 11,229

Location: Topeka, KS

iTrader: (0)

Sponsor our Next Contest!

Coding vBulletin To Web Standards

Who Defines Web Standards?
--------------------------------------------------
The World Wide Web Consortium (W3C) is an international consortium where member organizations, a full-time staff and the public work together to develop standards for the World Wide Web. W3C's stated mission is "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web."

What is XHTML?
--------------------------------------------------
For further reading on what XHTML is please see XHTML 1.0: The Extensible HyperText Markup Language (Second Edition)

How Does This Involve Your vBulletin Forum?
--------------------------------------------------
vBulletin comes by default as XHTML 1.0 Transitional. Whenever you do modifications to your forum you want to keep in mind that you should adhear to atleast XHTML 1.0 Transitional standards.

What Are Common Mistakes Between HTML 4.0 and XHTML 1.0?
--------------------------------------------------
Some of the biggest mistakes I see people making are not properly closing tags.

Here are a few examples:
Non XHTML 1.0 Compliant

Code:

<br>

XHTML 1.0 Compliant

Code:

<br />

Non XHTML 1.0 Compliant

Code:

<img src="imagelocation.jpg">

XHTML 1.0 Compliant

Code:

<img src="imagelocation.jpg" alt="Description of image" />

Non XHTML 1.0 Compliant

Code:

<p>First New Paragraph
<p>Second New Paragraph

XHTML 1.0 Compliant

Code:

<p>First New Paragraph</p>
<p>Second New Paragraph</p>

Non XHTML 1.0 Compliant

Code:

<b><i>A sentence that is both italized and bolded but not closed properly</b></i>

XHTML 1.0 Compliant

Code:

<strong><em>A sentence that is both italized and bolded but not closed properly</em></strong>

Deprecated Code
--------------------------------------------------
Deprecated code is code that is no longer supported or recommended for use on XHTML 1.0 webpages.

<center>
The <center> tag is no longer supported as the correct way to center text or elements on your forum. To center in compliance with XHTML 1.0 use the following CSS code:

Code:

text-align: center;


This is another one that many people still use. Instead of using use css to define font colors. If you want a certain text to be red use css or use the style attribute directly in the code (using a seperate CSS file and then using a class to call it is preferred as a way to keep your page smaller (less code) )
An example on how to make text red using style:

Code:

<span style="color: #910000;">This is red text</span>


There is really no need to use the underline attribute.

For a list of all other xhtml attributes see this: HTML 4.01 / XHTML 1.0 Reference

Last edited by Brandon; 02-07-2008 at 08:10 PM..

Quote |

php4ever

Guest

#2 04-11-2007, 02:34 PM

Posts: n/a

Nice article, just thought I'd ask though about one of your compliance variant.

You have
A sentence that is both italized and bolded but not closed properly

Shouldn't that be
A sentence that is both italized and bolded but not closed properly

~ Jared

Quote |

Brent

Guest

#3 04-11-2007, 03:27 PM

Posts: n/a

You are right

Thanks for catching that

Quote |

Rocket 442

Guest

#4 04-13-2007, 11:36 PM

Posts: n/a

definitely a good resource, especially for me.

Quote |

eJM

vBulletin Owner

#5 04-15-2007, 02:34 AM

Join Date: Nov 2006

Posts: 41

Location: teh Ether

iTrader: (0)

Brand Recognition and Your Email Address

Quote:

Originally Posted by Brent


There is really no need to use the underline attribute.

That would, of course, be up to the web designer and in some instances is a desired markup. It is very easily accomplished with CSS:

Code:

style="text-decoration:underline;"

You can also use other values. The default is none, but you may want to indicate it to prevent hyperlinks from automatically being underlined. Others are overline, line-through and blink (which doesn't work in IE or Opera).

I'd also like to mention that centering may not always work with just text-align:center. You may find it necessary to use:

Code:

style="margin:0 auto;"

or the combined:

Code:

style="text-align:center;margin:0 auto;"

R'gards,

Jim

Quote |

RedMatrix

vBulletin Owner

#6 04-16-2007, 04:10 AM

Join Date: Sep 2006

Posts: 201

Location: Texas

iTrader: (0)

That is so true, Jim.

Also, Brent, maybe you could add a second line to that code example, as the nuance was missed. Improper closing of nested tags gets to me.

Code:

<strong><em>A sentence that is both italized and bolded but not closed properly</strong></em>

:eek:

Quote |