Keeping XHTML-Validated Templates Validated

The scenario: You purchase a template from PixelMill that is marked as XHTML 1.0 validated. You add your content. You publish your site. You run your template through the W3C validator. You get a big red bar saying that your site isn’t valid XHTML.
What happened?
Unfortunately, FrontPage 2003 isn’t very good at keeping your code XHTML-validated. (Expressing Web Designer and SharePoint Designer 2007, in contrast, are very good at keeping your code XHTML-friendly.) So here are a few common things that you’ll need to do in your pages for valid XHTML. (There may be others not listed here – if you have a specific question, post a comment!)

  1. First step – right-click in the Code View pane and choose Apply XML Formatting Rules. What this essentially does is to add closing slashes to empty tags — for example, your <br> tags will be automatically transformed to <br />. This will probably fix 80% of the errors generated by the HTML validator that are along the lines of &qout;end tag for … omitted, but OMITTAG NO was specified" It will also take any uppercase HTML code and make it lowercase.
  2. Now, go through and click on each of your images (that are actually embedded on the page — you will see the <img … /> tag in code view). Look at the HTML code. If you see anything that looks like
    1
    border=&quot;0&quot;

    , you will have to delete it. For example —

    1
    &lt;img <b>border=&quot;0&quot;</b> src=&quot;image.gif&quot; alt=&quot;My Image Here&quot; /&gt;

    will need to be changed to

    1
    &lt;img src=&quot;image.gif&quot; alt=&quot;My Image Here&quot; /&gt;

    . This should fix all of the "there is no attribute ‘border’" errors.

  3. Sometimes FrontPage will drop the closing paragraph tag (</p>). If you see errors that say: "end tag for ‘p’ omitted, but OMITTAG NO was specified," then look at the line and column number of the start tag (the validator conveniently lists it as the next item) to track down the opening of the paragraph. Then, in the HTML code, look for the end of the paragraph and manually type in the closing tag. For example, if you find code that looks like this:
    1
    &lt;p&gt;This paragraph is causing errors!&lt;/div&gt;

    , you will want to add the closing paragraph tag at the end of the paragraph, which would be before the closing div tag in this example…

    1
    &lt;p&gt;This paragraph is causing errors!<b>&lt;/p&gt;</b>&lt;/div&gt;

    .

  4. Did you add any FrontPage Link Bars to your template? If you did, they will not validate. You should remove the link bars and put in hard-coded links instead. (You might want to put those links into an Include Page for easier editing later.)
  5. Did you add any Flash or Swish movies? If you pasted in the typical HTML code (it’s a big block of code, with <object> and <param> tags all over the place), then it won’t validate properly. Instead, use a solution like Deconcept.com’s SWFObject embed solution. We have a tutorial on PixelMill that takes you through the basic steps of how to use it: http://www.pixelmill.com/support/al0/kb101619.htm .

By following the above steps, you should be able to get most of your site fully validated. There may be some other issues if you have used various scripts or components which will need to be dealt with on a case-by-case issue.

Leave a Comment

Your email address will not be published. Required fields are marked *

Enter Code *

Filed Under

Related

Do you need to build a custom search-driven component for your #digitalworkspace while saving thousands of hours of development time?

Join us on as we lift the hood of #PnP Modern Search v4, show you how it's built, & take you on a live coding adventure.

http://ow.ly/MTnL50EpN5J

#Hybridwork is more than just a buzzword to latch onto; it’s the future for many organizations for the unforeseeable future. So, how can you use #Microsoft365 for #hybridwork? Let's breaks it down…

http://ow.ly/ay2e50EmNhg

It's that time again! Join the #PixelMillWebinars on 4/29 where @EricOverfield lifts the hood of #PnP Modern Search v4, shows how it's built, & takes you on a live coding adventure to customizing your own web part using the power of the existing codebase.

http://ow.ly/EI5h50EmNqj

What? Anchor links now work in #SharePoint site navigation! This fix snuck in and I completely missed it. Use them to create a TOC for long pages or cross link between pages. They work in text or quick links web parts & nav too! https://support.microsoft.com/en-us/office/create-and-use-modern-pages-on-a-sharepoint-site-b3d46deb-27a6-4b1e-87b8-df851e503dec#bkmk_pageanchors

A big thank you to David Leveille and @CrushNetworks for having our President + Co-Founder @EricOverfield on this episode of #TheVirtualWaterCooler!

Subscribe to PixelMill's
E-news

* indicates required

Let's Talk Digital
Workspaces Today

Get In Touch