Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
By bstrange on
I am using Drupal 5.5 with a modified Beale Street theme (http://demo.roopletheme.com/bealestreet/ ) for my site http://www.homepcpatrol.com
Ok so following standard SEO procedures, after building my site I log on to http://validator.w3.org/ to make sure I have nice clean code. Turns out that I don't. If I have the banner image turned on (like the panoramic guitar in the Beale St demo page, I get the following errors:
Line 98, Column 112: required attribute "alt" not specified .
…alestreet/images/blue/gradigrid1.jpg"></p>
Line 98, Column 116: end tag for "img" omitted, but OMITTAG NO was specified .
…treet/images/blue/gradigrid1.jpg"></p>
Line 98, Column 28: start tag was here .
<div class="content"><p><img src="http://www.homepcpatrol.com/themes/bealest
Line 98, Column > 80: XML Parsing Error: Opening and ending tag mismatch: img line 98 and p .
…//www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg"></p>…
Line 99, Column 6: XML Parsing Error: Opening and ending tag mismatch: p line 98 and div .
</div>
Line 220, Column 7: XML Parsing Error: Opening and ending tag mismatch: div line 62 and body .
</body>
Line 221, Column 7: XML Parsing Error: Opening and ending tag mismatch: body line 60 and html .
</html>
Line 221, Column 7: XML Parsing Error: Premature end of data in tag html line 4 .
</html> The associated source code is as follows:
91. <div class="middleWrapper">
92. <div class="middleBlock">
93. <div id='banner'>
94. <!--$Id: block.tpl.php,v 1.3 2007/09/11 16:45:35 roopletheme Exp $-->
95. <!-- www.roopletheme.com -->
96. <div class="block block-block" id="block-block-2">
97. <h2 class="title"></h2>
98. <div class="content"><p><img src="http://www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg"></p>
99. </div>
100. </div>
101. </div> and
219.
220. </body>
221. </html> If I take the banner image out the code shows up 100% clean and all 7 errors are no longer present.
I am not sure if it is the theme's code, or my error, but the way I am inserting my banner image is by creating a block titled "Banner Image" and publishing it to the banner section (directly under the masthead) of the template. The block content within the configure section of my Banner Image block is as follows:
<img src="http://www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg">
So out of curiosity, I pulled up the Beale St demo in firefox and turned on firebug and noticed that the html code for their image was slightly different than mine:
<img id="bealestreetbanner" title="The Beale Street Theme for Drupal" src="http://demo.roopletheme.com/bealestreet/images/guitarbanner.jpg"/>
So I changed mine to:
<img id="homepcpatrolbanner" title="Home PC Patrol Computer Repair and Web Design" src="http://www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg"/>
instead of:
<img src="http://www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg">
and it eliminated all but one of the seven original errors, leaving only this one:
Line 98, Column 191: required attribute "alt" not specified .
…lestreet/images/blue/gradigrid1.jpg"/></p>The associated source code is:
93. <div id='banner'>
94. <!--$Id: block.tpl.php,v 1.3 2007/09/11 16:45:35 roopletheme Exp $-->
95. <!-- www.roopletheme.com -->
96. <div class="block block-block" id="block-block-2">
97. <h2 class="title"></h2>
98. <div class="content"><p><img id="homepcpatrolbanner" title="Home PC Patrol Computer Repair and Web Design" src="http://www.homepcpatrol.com/themes/bealestreet/images/blue/gradigrid1.jpg"/></p>
99. </div>
100. </div>
101. </div>
Their comment on the error was:
The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.
Typical values for type are type="text/css" for
and type="text/javascript" for . While 1 error is better than 7, I want the site to be 100% clean, so again, if anyone has any ideas, any help would be greatly appreciated! You can check out the current error at http://validator.w3.org/ and typing in http://www.homepcpatrol.com in the blank Thanks in advance!
Comments
You should look over how
You should look over how XHTML is marked up.
http://w3schools.com/xhtml/xhtml_html.asp
For example, all img tags need to be closed.
Additionally, you need to specific alternative text for all images for readability. So, within the img tag you need to add a alt="description goes here" within the image tag.
Keep in mind that once you start fixing these errors others may disappear as well. Keep in mind, that p tags are for text. In the context of div>p>img the p's shouldn't be there at all. You have no text.
Actually, I don't think that
Actually, I don't think that is entirely correct about a paragraph being only for text, although the paragraph tag is most likely unnecessary in this case. I believe all the error messages are related to the banner which is consistent with bstrange's assertion that the problem disappears when the header image is removed. Changing the image markup to the following should work:
The only change is adding in the alternate text, as suggested by cjeanson, and adding the closing slash (/).
well...
Technically, you CAN use a paragraph tag to create more than a single line break - but it is considered good practice not to use paragraph tags to align images. CSS should be used for this.
For example, if you want to have the grid image positioned slightly "down" it should be written something along these lines:
Of course, there are no official rules that I know of, but moving away from hardcoded paragraph tags is always a good idea, using CSS to control everything is a powerful tool. Separate content from style and Bob's Your Uncle!
Thanks to all who replied!
Adding the 'alt' definition in the image code did infact remove that last error. Appearently, it is mandatory for compatability with mobile devices, old browsers, and browsers with images turned off.
You guys bring up an interesting point about the paragraph tags. If you look at my image code for the block you will see that I did not include any paragraph tags in my block code, yet in the html source code it is everpresent. The question I have is: Did the theme's CSS denoth that the paragraph tags be used in the blocks or is it Drupal code that governs this. Lastly, does the inclusion of paragraph tags negatively impact my site in any way?
Thanks again to everyone who helped and I am pleased to announce that www.homepcpatrol.com is now 100% valid XHTML 1.0 Strict :)
CSS is completely separate
CSS is completely separate from your HTML/XHTML markup so it's Drupal or one of your Drupal modules that's inserting the paragraph tags. It's unlikely that the paragraph tags are going to negatively affect you in any way, but they are unnecessary and probably semantically incorrect.
You also run the possibility of seeing some odd styling in the future if you are trying to style your other paragraph tags on the site and forget about the one surrounding your banner image. Overall, though, that would probably be a small annoyance and not a major concern.