HTML with No Errors

Last night I attended a Meetup in Portland where the topic was, “How to choose a web developer”. One point struck me about how web developers should be detail oriented and produce web sites that have perfect HTML and no errors as defined by the W3C Validator. One good reason to have perfect HTML is that the search engines will penalize a web site with HTML errors even if the site renders OK in a browser.

Here’s the HTML validation on my Home page from today:

HTML validation

It’s nice to see zero errors, however this morning my Home page had a handful of errors so I sat down and did some detective work. Sure enough I was getting HTML errors because a popular plugin called Easy Nivo Slider (some 45,000 downloads) was inserting CSS statements inside of the <body> when in fact they only belong in the <head> section. That’s a typical mistake of plugin writers that forget to see if their HTML is valid, or filled with errors.

So, being resourceful I deactivated the Easy Nivo Slider plugin and modified my custom WordPress theme to just use the jQuery-based Nivo Slider (over 1,000,000 downloads).

In my header-home.php file inside of the HEAD section I added some CSS and javascript:

1
2
3
    <!-- Home page slider -->
    <link rel="stylesheet" href="<?php bloginfo('template_url');?>/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="<?php bloginfo('template_url');?>/default/default.css" type="text/css" media="screen" />
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="&lt;?php bloginfo('template_url');?&gt;/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
    $(document).ready(function() {
        $('#slider').nivoSlider({
            effect: 'fade',
            directionNav: false
        });
    });

// ]]></script>

Next, I modified in my header-home.php file the place where my banner images slide in:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
        <?php
       $category_id = get_term_by('slug','home-page-banner','category');
       $args = array('category' => $category_id->term_id, 'numberposts'=>3);
        $thumbnails = get_posts( $args );
        //print_r($thumbnails);
       
        foreach( $thumbnails as $thumbnail ) {
            if (has_post_thumbnail($thumbnail->ID) ) {
                 $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($thumbnail->ID), 'large');
                 $url = get_permalink($thumbnail->ID);
                 print "<a href='".$url."'><img src='".$large_image_url[0]."' alt='".get_the_title($thumbnail->ID)."' /></a>";
            } else {
                print "<p>Error: no thumbnail image for".get_thte_title($thumbnail->ID)."</p>";
            }
        }
        ?>
        </div><!-- slider -->
    </div><!-- slider-wrapper -->
</div>

I’m a happy camper again, and can say that all of my web pages are HTML error-free.

Leave a Reply