Web Standards, Semantic Markup and Cross-Browser Compatibility

I have been in the web design field for over eight years of my life now, and only recently has the importance of web semantics presented itself to me.
If you have ever cruised around the blogosphere, or the teen blogging realm of the internet, you may have seen things like “Valid XHTML” and/or “Valid CSS”. These terms are applied when a web developer takes accessability and following web standards into consideration.

At the forefront of validation and web semantics is w3.org, or the World Wide Web Consortium. This website recommends using valid, semantic markup to ensure cross-browser compatibility, as well as the accessibility factor of websites. W3C does not, however, create these rules and standards. That is the job of ISO, the International Organization for Standardization.

Let’s say that you are an up-and-coming web designer. You have several years of experience in dealing with HTML, CSS, and designing layouts. You are confused by all of the validation terms thrown about on your friend’s personal websites and blogs, and you want to know what this means, as well as how to utilize web standards in your own designs. In essence, validating your markup ensures that your website will look almost identical no matter what browser or resolution your visitors are using. It also ensures that disabled persons have easy access to your website, resulting in an overall better, more effective website. To know more about this, I do suggest you check out workshops from web development companies.

I used to not even bother with validating my CSS or my markup, and I used to only use one browser to test my designs in. My opinions on the subject have obviously changed, and most of that comes from acquiring more knowledge on the subject, and actually taking the time to understand it and utilize it. I used to think that people who validated put too much focus on everything being “perfect.” After I actually started to read about it, understand it further, and realize it’s importance, I quickly changed my views.

A lot of people don’t validate because they find the idea intimidating, which it can be if you don’t know anything about it. But in reality, it simply doesn’t make sense not to validate. Some people don’t even check to see what their websites look like in other browsers, which is just senseless and lazy.

Let’s pretend for a moment that you coded your entire website strictly for use in Internet Explorer. You’ve used iframes, and deprecated inline style classes to style your page. I, your visitor, use Mozilla Firefox, and I see your layout totally different. Your alignment is off due to using absolute positioning as opposed to incorporating Floats for a fluid layout, and you have used a chroma filter for transparency in your iframes. In Firefox, that same chroma filter shows up a hideous neon green. I most likely make ugly faces, and leave your site shortly thereafter never to return. These are things you should take into consideration when creating a visually cohesive, aesthetically pleasing design.

Despite the fact that Internet Explorer still dominates the browser market, (which to be honest, is beyond me) if your website is completely off in Opera, Safari, Mozilla Firefox, or any of the other dozens of less popular browsers out there, chances are pretty high that you won’t have as many return visitors as you would had you taken web standards into consideration. It’s not difficult to validate, which seems to be the biggest misapprehension regarding the subject. A lot of people don’t realize that sometimes all it takes is the correct doctype declaration, and adding a few forward slashes to close your tags. It’s obviously not always going to be that simple, but if you follow the right tutorials and use common sense while coding, you shouldn’t have to make that many changes to begin with.

Here are a few tips that would have helped me out greatly when I didn’t know a whole lot about validation; Follow valid tutorials from websites like W3C.org. Don’t use tutorial sites like Pixelfx.com that dish out badly written, deprecated markup. Always check your website in as many browsers as possible to ensure cross browser compatibility. Use external stylesheets linked to your pages, instead of repeating style tags on every page of your website. Run your HTML through HTML Tidy, and your CSS through CSS Tidy for the best optimization and compression. Finally, validate your markup and CSS with the validation services offered at W3C.

In closing, semantics, validation and compatibility are extremely important for maintaining a successful, professional and effective website.

Leave a Reply

Your email address will not be published. Required fields are marked *