Web Browser Compatibility

CW browserA Web browser is an application that allows a user to access the World Wide Web. Popular web browsers include Internet Explorer, Firefox, Safari, Opera, and Netscape.

Not all browsers were created equal. IE displays things differently than Firefox does. Both of these may display things differently from Safari, Opera, and Netscape, as well. Basically, all Web browsers have a tendency to display pages slightly differently. This is a problem for Web developers, and the problem is deepened by the fact that different versions of different browsers exist, and visitors could be viewing your page on any one of them.

Different operating systems will also affect how a page looks. Coffeecup Software has a brief article about this topic that you might want to check out, as it goes into a bit more detail about the different types of web browsers, operating systems, and how they affect how a page can look so different in various browsers.

 

A big part of helping your site grow is to make sure it's accessible to the greatest number of users possible. To do this, you'll want to declare a DOCTYPE in your pages.

At the time of this writing, there are three current standards for coding a Web page. They are HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML 4.01 is currently the widest-used standard on the Web, with XHTML (a combination of the XML markup language and HTML) being adopted at a fairly uneven pace. XHTML requires that you write well-formed code, whereas HTML 4.01 (especially in "transitional" format) will be more forgiving in your coding.

If you're just starting out, you will want to begin with a DOCTYPE of the HTML 4.01 variety. The DOCTYPE declaration needs to go at the very top of your page, so feel free to copy and paste one of these declarations at the top of your HTML document.

HTML 4.01 Transitional

  

"http://www.w3.org/TR/html4/strict.dtd">

If you have an older Website and are making the transition from older markup techniques to newer practices, you'll want to use the transitional DOCTYPE. Transitional may also be a good choice if you're just learning HTML/CSS.

HTML 4.01 Strict

  

"http://www.w3.org/TR/html4/loose.dtd">

The Strict DOCTYPE is for pages that are written the way HTML 4.01 was constructed to be written. Be careful when using a Strict DOCTYPE; it requires that you really know your stuff. Certain attributes (like "align," "bgcolor," "link," "alink," and "vlink," just to name a few) aren't allowed in a Strict DOCTYPE. The benefit to using a Strict DOCTYPE is that more browsers will be able to render your page in a way that is satisfying to you, rather than having to work around a browser's shortcomings. This is because a Strict DOCTYPE emphasizes structure over presentation; it tries to completely separate the HTML code (the page) from the CSS (the design and presentation). Built in this manner, your page will be highly compatible with a large number of the most popular browsers.

HTML 4.01 Frameset

  

"http://www.w3.org/TR/html4/frameset.dtd">

If you're building a site with frames (which isn't really recommended), you'll use this DOCTYPE on your frameset page. However, you should stay away from frames if there is any possible way... and there's always a way to stay away from frames.

XHTML

Like HTML 4.01, XHTML 1.0 also has Strict, Transitional, and Frameset DOCTYPEs. XHTML of all types must be well-formed, meaning all of your quotes must be in the right places, your tags must be closed in the proper order, and tags that don't usually require a closing tag (like <img> and <br>) are now to be written as "self-closing." A self-closing tag includes a forward slash at the end of the tag to indicate that it's closed. For example, in HTML, the <br> tag is sufficient and there's no need to close it. In XHTML, you'll make the tag self-closing by typing it as <br />.

The XHTML 1.0 Transitional DOCTYPE serves the same purpose for XHTML as the HTML 4.01 Transitional DOCTYPE serves for HTML. That is, for Web pages that are using older markup, you'll want to use the Transitional DOCTYPE, but build new sites with the Strict DOCTYPE. Again, the Strict DOCTYPE is much more restrictive, but separates the page coding from the design, making your page much easier to maintain and more cross-browser compatible. Below you'll find all the XHTML 1.0 DOCTYPEs.

XHTML 1.0 Strict

  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

  

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

XHTML 1.1 is an even more restrictive and technical version of XHTML 1.0 Strict. XHTML 1.1 is Module-based XHTML, which allows developers to create documents that can be extended to allow other XML-based applications to use small bits of XHTML in a well-defined manner. XHTML 1.1 removes practically all presentation-based markup (like the center tag and frameset option, among many others) and makes CSS the sole method of presentation for the page.

  

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Most Websites do not use XHTML 1.1.

Tags: website design, CSS tricks, web browser, website development, HTML