mtcodex

How to write better HTML than Microsoft

• home
• work
• about
• journal
• contact

How to write better HTML than Microsoft Thursday evening, 16 February 2006

Well, it’s not that hard really. I just though we would take some time to dissect the footer links from this page on the Microsoft site that tells me I am required to use Internet Explorer in order to use Office Live (well what a surprise).

So, lets check out the offending code:

<td nowrap="true" class="ftrtxt">
      <span style="margin: 0 5 0 5" id="" href="">© 2006 Microsoft Corporation. All rights reserved.</span>
      <SPAN class="txtbr">|</SPAN>
      <A style="margin: 0 5 0 5" ID="__shell__accessibilityLink" href="javascript:void(0);" accesskey="0">Accessibility</A>
      <SPAN class="txtbr">|</SPAN>
      <A style="margin: 0 5 0 5" ID="__shell__SupportLink" href="/Signup/Pages/Support.aspx?scpf=ContactUs">Contact Us</A>
      <SPAN class="txtbr">|</SPAN>
      <A style="margin: 0 5 0 5" ID="__shell__LegalLink" href="/Misc/Links.aspx?linkId=legal">Legal</A>
      <SPAN class="txtbr">|</SPAN>
      <A style="margin: 0 5 0 5" ID="__shell__PrivacyLink" href="/Misc/Links.aspx?linkId=privacy">Privacy</A>
</td>

Firstly, it’s good practice to encode entities, so that copyright symbol should be an © Secondly, it’s usually bad to to use the style attribute, plus it’s invalid CSS to not include a unit for margin attributes. Thirdly, what is a 'href' doing on a span tag?. Looking at the page we can assume the purpose of all this rubbish is to add some extra space between the links and the '|' symbols. So lets see if we can do any better with some simple CSS.

/* CSS */
td.ftrtxt{
  white-space:nowrap; /*we don’t need a nowrap attribute*/
  color: #A5BADF;     /*the vertical bars are a different color*/
}

td.ftrtxt a,
td.ftrtxt span
{
  color: #505050; /*default text color, lets assume the anchor color overrides it*/
  margin: 0 5px;  /*we don’t need those style attributes*/
}

/* HTML */
<td class="ftrtxt">
      <span>&copy; 2006 Microsoft Corporation. All rights reserved.</span> |
      <a id="__shell__accessibilityLink" href="javascript:void(0);" accesskey="0">Accessibility</a> |
      <a id="__shell__SupportLink" href="/Signup/Pages/Support.aspx?scpf=ContactUs">Contact Us</a> |
      <a id="__shell__LegalLink" href="/Misc/Links.aspx?linkId=legal">Legal</a> |
      <a id="__shell__PrivacyLink" href="/Misc/Links.aspx?linkId=privacy">Privacy</a>
</td>

Now that is a vast improvement, the HTML is now readable. There’s still one little problem some eagle eyed readers may have caught. The link to ‘Accessibility’ is a pop up window, but you can only get at it if you have javascript enabled. That’s not exactly very accessible, so lets fix that now.

 <a id="__shell__accessibilityLink" href="/client/helppreview.aspx?AssetID=HA100749701033&ns=OFLV&lcid=1033&quot; accesskey="0">Accessibility</a> |

All that is required is to add a ‘return false’ to the end of the javascript function which launches the pop-up. That way if javascript is enabled, it will launch normally, if not it will open the link in the same window.

 

Comments