GaryBadger.com: Crappy Microsoft HTML

CRAPPY MICROSOFT HTML

Microsoft Word is a very powerful word processing program. In my professional life I use it many times daily, and while I've rarely had cause to use some of the more fancy features I still consider myself to be a "power user". But despite all of its glory there is one task that I think Microsoft Word doesn't do very well at all, and that is web page editing.

Word can be used as a WYSIWYG (What You See Is What You Get) editor to create a web page. Using normal word processing capabilities Word allows users to edit a page to their exacting specifications, and then Save As a web page in HTML format for posting to the Internet and viewing in a web browser. But there is a problem: Microsoft Word generates really, really crappy HTML upon which these web pages are built.

The problem with crap code is that it does not support the web standards upon which web browsers are built to display. Usually this means that the browser will try to make educated guesses about what was probably meant. The problem is that different browsers (or even different versions of the same browser) will make different guesses about the same code; worse, if the HTML is really pathological, the browser could get hopelessly confused and produce a mangled mess, or even crash.

This topic attempts to highlight the extent to which Microsoft Word's crappy code strays from well-formed compliant code, as well as plain common sense.

As my test case for this demonstration I created pretty much the smallest web page file that I could. Two lines of text, no background, no styling, and boring old Times New Roman font at 12pt. I wrote the exact same content in a well-formed hand-coded web page, and I also let Microsoft Word 2007 have a crack at it.

The hand-coded page consumed 12 lines of code and created a file 467 bytes in size. The W3C Markup Validation Service reported "This Page Is Valid XHTML 1.0 Strict!" while the W3C CSS Validation Service reported "Congratulations! No Error Found". As well it should have; the hand-coded page was that simple that it didn't require any CSS.

The code is merely:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bare Bones</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
</head>
<body>
<p>This is a bare-bones web page, used for demonstration purposes only.</p>
<p>Two lines of text, no background, and boring old Times New Roman font at 12pt.</p>
</body>
</html>

Now to create the same web page using Microsoft Word 2007. To display the same two lines of text, no background, no styling, and boring old Times New Roman font at 12pt, Word generated 453 lines of code and created a file weighing in at 22,446 bytes worth of data. That's 38 times the volume of code and 48 times the file size for the exact same page content!

That's just bloated and overweight! Imagine if this had been a complex web page containing lots of content and fancy styling... ... ...

Sadly it doesn't end there. The code is loaded with Microsoft proprietary HTML, which sits outside of web standards. The W3C Markup Validation Service reported "Failed validation, 10 Errors" while the W3C CSS Validation Service reported "Sorry! We found the following errors (5)". Let's not forget, this page is so incredibly basic that it doesn't need any styling, but Word generated CSS for it anyway.

To be frank I think that Word got off very lightly with the Markup Validation Service, and this happened because the code did not declare a Doctype against which to assess the xHTML. If we set Word up for a fall and attempt to validate the page as XHTML 1.0 Strict the W3C Markup Validation Service reports "Failed validation, 57 Errors". But I'll admit that's not entirely fair given that Word didn't pretend that its code would comply with "Strict".

Now give your scrollbar a bit of a workout and have a look at the 22,446 bytes of data that Word generated to display a bare-bones web pages with only two lines of content. Eek!

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 12">
<meta name=Originator content="Microsoft Word 12">
<link rel=File-List href="barebones-msword_files/filelist.xml">
<title>Bare Bones</title>

<link rel=themeData href="barebones-msword_files/themedata.thmx">
<link rel=colorSchemeMapping
href="barebones-msword_files/colorschememapping.xml">

<style>

</style>

</head>

<body lang=EN-AU style='tab-interval:36.0pt'>

<div class=Section1>

<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'>This
is a bare-bones web page, used for demonstration purposes only.<o:p></o:p></span></p>

<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'><o:p> </o:p></span></p>

<p class=MsoNormal style='margin-bottom:0cm;margin-bottom:.0001pt;line-height:
normal'><span style='font-size:12.0pt;font-family:"Times New Roman","serif"'>Two
lines of text, no background, and boring old Times New Roman font at 12pt.<o:p></o:p></span></p>

</div>

</body>

</html>

CONCLUSION

So what does all this mean?

Use Microsoft Word for word processing. It is an excellent program for this purpose.
Use almost anything else for developing web pages. It's just not Word's forté, and you'll get better results.

If hand-coding xHTML doesn't hold much appeal and you are looking for an alternate code editing program, be sure to check my page entitled HTML Coding Programs.

Acknowledgement:

This topic was inspired by a first-class resource entitled Webpages are NOT Created Equal. I have attempted to update the content of that article to account for changes presented by Microsoft Word 2007, and also to build on it by demonstrating validation problems. My sincere thanks to the original author.

VISITOR COMMENTS

Got a view or opinion on this subject? Please feel free to add your thoughts to this topic.

Please check the "Rules of Engagement" before submitting, and note:

Comments are moderated, and only added to this page after approval;
HTML tags are automatically stripped from comments and will not appear;
Comments are restricted to 1500 characters (that's around 200 words for most people).

RULES OF ENGAGEMENT

Submissions containing any of the following will be rejected:

Adult content, or links to any such content;
Offensive language;
Anything that looks or even smells like advertising;
Comments which have potential to offend, degrade, intimidate, or incite violence or prejudicial action against a person or group of people based on their race, gender, age, ethnicity, nationality, religion, sexual orientation, gender identity, disability, language ability, moral or political views, socioeconomic class, occupation or appearance (such as height, weight, and hair colour), mental capacity and any other distinction.

Steer clear of these and we'll all remain happy!

Naturally I accept no responsibility or ownership of news or views submitted by others. If you believe that there is sensitive or damaging material within website comments please contact me and I will review / remove it.

Your Name:
Your Website:
Your Location:
Comments:	Maximum 1500 characters

GaryBadger.com: Web Designs by Gary Badger, Sydney Australia.

CRAPPY MICROSOFT HTML

CONCLUSION

VISITOR COMMENTS

RULES OF ENGAGEMENT