A standard MSN homepage | part I: valid XHTML 1.0 Transitional | work | web development | blog posts

If you take a peek at the HTML source of the MSN home page, you’ll see that there’s really not far to go to bring this page from invalid markup to standard XHTML Transitional. These changes are simply made, and making them will allow browsers to render the page in standards mode, instead of the quirks mode rendering used today. I thought it would be interesting to write about the issues as I encounter them, and talk through their solutions along the way.

Note: the MSN home page has a broadband and narrowband version. The discussion here is focused on the narrowband version of the page, as seen by IE 6 on August 27, 2004. To coincide with this discussion, I have saved before and after snapshot versions of this page. These snapshots have been modified with links to the validators and with whitespace and indentation for readability.

Correctly identify the document and content

Specify the doctype

The home page today does not specify any doctype, preventing browsers from rendering the page in standards mode. To correct this, the following should be inserted before the html tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Download this code: /code/msn/part1_01.html

Use a complete html tag

Instead of a simple html tag, use a valid XHTML version:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
Download this code: /code/msn/part1_02.html

Specify the content type

Specify the type of the content and the encoding used for it by adding the following line to the head tag:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Download this code: /code/msn/part1_03.html

Fix incorrect structure

Do not place block elements inside of inline elements

According to the rules of HTML and XHTML, block elements cannot be included inside of inline elements. There are several cases where this exists on the home page, and correcting it is easy.

Instead of placing a block element inside of an inline element…

<b>
<div class="adp">
<a target="_top" href="#" style="color: #FFFFFF;">
<span style="color: #FFFFCC">
Looking for a new car? Click here for a free price quote!
</span>
</a>
</div>
</b>
Download this code: /code/msn/part1_04.html

Use another inline element instead:

<div class="adp">
<b>
<a target="_top" href="#" style="color: #FFFFFF;">
<span style="color: #FFFFCC">
Looking for a new car? Click here for a free price quote!
</span>
</a>
</b>
</div>
Download this code: /code/msn/part1_05.html

Another example, repeated several times, is placing a block-level heading tag inside of an inline element…

<span>
<a href="#">
<img src="#" border="0" alt="My MSN" title="My MSN" width="35" height="22" />
</a>
<br />
<h4>
<a href="#">
My MSN
</a>
</h4>
</span>
Download this code: /code/msn/part1_06.html

that can easily be fixed by using a block tag instead:

<div>
<a href="#">
<img src="#" border="0" alt="My MSN" title="My MSN" width="35" height="22" />
</a>
<h4>
<a href="#">
My MSN
</a>
</h4>
</div>
Download this code: /code/msn/part1_07.html

Another example…

<span>
<div class="ct">
<a href="#">
GetNetWise
</a>
  Quotes provided by Comstock
</div>
</span>
Download this code: /code/msn/part1_08.html

is fixed in a similar way:

<div>
<div class="ct">
<a href="#">
GetNetWise
</a>
  Quotes provided by Comstock
</div>
</div>
Download this code: /code/msn/part1_09.html

Properly encode URL’s

URL’s should be properly encoded for HTML. The link for the Passport sign-in image is not properly encoded, and the page will not be valid until this is fixed.

Note: for more information, check out my related post on why this is important.

Remove Deprecated Tags and Elements

The height attribute on the table tag is not allowed, and should be removed.

Use correct attribute values

The following attribute values are incorrect, and should be fixed:

On img tags, always specify a value for alt. When spacer images must be used, use alt=””.
On form tags, use method=”get”, not method=”GET”.
On script tags, use type=”text/javascript”, not language=”JavaScript”.

Final result

The result of these changes can be viewed in my after page. The first thing you should notice is that the page looks quite a bit different from the live MSN home page in terms of styling—font sizes, alignment and paddings are quite a bit off. However, we haven’t even touched the CSS! We’ve just made minor markup changes as discussed above to the HTML! So what happened? Remember, the styles were created against the quirks rendering mode of IE 6, not against the CSS standard. So once we’re out of quirks rendering mode, we’re now seeing how different it really is from standard-compliant mode. If we author against the standard rather than a specific browser’s quirks mode, we can be much more productive, because our initial styling will be closer to a consistent experience across browsers, assuming we write valid CSS.

Next steps

Now that we’ve achieved standards-compliant rendering for the markup, we can take the stylesheet to a valid and standards implementation as well. Part II of this series of articles will get our stylesheet to valid CSS, and in Part III we’ll fix the styles that were authored against quirks-mode rendering and behave differently now that we’re standards-compliant. After that, we’ll move from valid XHTML 1.0 Transitional to XHTML 1.0 Strict markup, and illustrate how one and only one XHTML document and one stylesheet for visual PC browsers can work. Time permitting, I’ll expand with alternate stylesheets for special needs such as devices such as PDA’s that have significantly different form factors and bandwidth, printers and users with special needs.

This post is closed to new comments.

A standard MSN homepage, part I: valid XHTML 1.0 Transitional