This chapter is from the book
This chapter is from the book
This chapter is from the book
HTML Rendering Differences
It is well known that different web browsers display (or render) HTML documents slightly differently. Each browser has its own way of interpreting HTML tags and drawing them on the screen. This is, of course, what makes browsers different, because their entire purpose is to interpret and display HTML.
When HTML was designed, it was supposed to be a system for marking up text (a markup language) and for providing links between documents (hypertext). Originally, the markup only generically described the way a particular tag should be rendered and left the rest to the browser. For example, HTML specification states that the H1 tag should indicate the top level of structure within the document, with H2 forming the second level. There was nothing to say that H1 should be Times New Roman, 48 pixels, and bold—that was left to the browser to decide.
The idea behind this methodology was to allow a browser to display hypertext documents in a way best suited to the device and the user's preferences. If the user is viewing a document on a PC with a large screen, a 48-point heading is no problem; if the viewer is using a Personal Digital Assistant with a 3-inch screen, however, a 48-pixel heading might take up the whole display. This is why the flexibility in displaying text is left with the browser.
For today's World Wide Web, the reality is different. Although most people view web pages with Microsoft Internet Explorer 5 or 6 and a reasonably sized desktop screen, developers must work to strict design templates and be sure that the page will look good in whichever browser it is viewed. Whether this is the best state for the web to be in or not, it is the situation we have and the one we need to accommodate.
HTML in Dreamweaver
Dreamweaver MX creates standard HTML or XHTML, depending on your preference. The default operations you can perform on your document in Dreamweaver will output HTML that should be understood by most browsers. As a web developer, you would be hard-pressed to find differences between the basic HTML that Dreamweaver outputs and what you might produce yourself, except for the fact that the Dreamweaver code might be presented better and contain fewer mistakes! This very important fact means that you can rely on the HTML that Dreamweaver outputs and don't need to be concerned that working in a visual environment might produce substandard code.
Another vital point is that Dreamweaver does not modify any hand-written HTML by itself. If you dip into the code and make some changes, Dreamweaver will not overwrite them unless it is told to do so. This feature, known as Roundtrip HTML, means that you can rest easy, knowing that whether you choose to develop in the Dreamweaver visual environment, or within the Dreamweaver HTML editor, your code will not be messed with as you switch between the two.
The only circumstance in which Dreamweaver will make any changes at all to your document is when it comes to code formatting. Depending on your code formatting preferences, Dreamweaver will reformat your code into a more logical and understandable form when making changes in Design view or when running a command specifically to format the source—such as Apply Source Formatting. However, Dreamweaver doesn't change the code itself, just how it is formatted within the Code view.
The same holds true if you decide to use another, external program, such as HomeSite, to edit your source code. Moving between the Dreamweaver visual environment and an external editor does not result in the loss of any code integrity, no matter how many times you flip between them.
These factors result in the code that Dreamweaver outputs, being very reliable and compatible with most browsers. As already noted, however, all browsers are different and render code differently. No two available browsers render code in the same way. For this reason, sometimes Dreamweaver HTML is not rendered correctly by some browsers. The fault, in these circumstances, lies with the browser in 9 out of 10 cases.
XHTML (a.k.a. The Acronym Section)
New with Dreamweaver MX, you can now author your pages in XHTML. XHTML is a new version of HTML based on XML (eXtensible Markup Language). In fact, an XHTML document is actually just an implementation of XML, with a DTD (document type definition)—so similar to HTML 4 that primitive browsers need not be concerned with the difference.
There won't be any new versions of HTML after version 4. XHTML is here to take its place for the moment, and eventually XHTML itself will be replaced by a more pure form of XML, totally removed from anything we're used to currently. What this does mean, however, is that the sooner we start to author pages in XHTML, the better. Because XHTML is really just XML with an HTML-style DTD, future browsers will always be able to display our XHTML pages by applying the correct DTD.
TIP
XHTML is an interesting subject, and is worthy of more detailed research—probably more detailed than I am able to document in this book. You might like to check out the New Riders book XHTML, by Chris Minnick and Chelsea Valentine (ISBN: 0735710341), or the section on the W3C web site dedicated to markup (http://www.w3.org/MarkUp/).