The Default Display of (X)HTML

Every Web browser has a default system for displaying each kind of (X)HTML element. While the system may vary from browser to browser, they all maintain the basic structure that you set forth in the Web page.

So, for example, a level one header (h1) will always be set larger than a level two header (h2), which will always be larger than a level three header (h3). Similarly, an em element will always be set off from the surrounding text in order to emphasize it.

That doesn't mean that the H1 element will always be in say, 24pt Times, or that emphasis will always be achieved with italics. While the default display systems are very similar on all personal computer-based browsersincluding Explorer, Firefox, and Opera on both Macs and PCs (Figure 1.40), they are quite different on PDAs, cell phones, and of course, on aural browsers. And that's a good thing. The structure of the Web page is maintained but its display is adapted to fit the browser on which it appears. And that means your Web page is universally accessible and intelligible.

Figure 1.40. With no styles applied, the text appears after the image, in its default font and color. Most current versions of major browsers (from the top down: IE 7, Firefox 1.5, Opera 8.54, Safari 1.3) have very similar defaults. Safari is slightly different because it's on a Mac, but it's very close to the Firefox and Opera browsers for Macintosh.

[View full size image]

[View full size image]

[View full size image]

[View full size image]

It doesn't mean, however, that your Web page is a work of art. A browser's default display system is typically quite generic. Luckily you can override that system by applying styles to your elements. We'll get to them beginning in Chapter 7, Style Sheet Building Blocks. First, we'll learn how to write some (X)HTML.