Help W3C Validation Errors can someone take a look

I’m building a site from scratch and I really want to make this thing W3C compliant. So I’m starting bare-bones and adding in one element at a time and testing W3c validation as I go.

So far I got all my div tags laid out the way I want them. This initial design is validating W3C and is my starting point.

I’ll paste the initial validated code for reference, also an actual link to the site for reference too
http://www.divineenergysource.com/W3C-1-clean-passed.php (if links gets taken down PM me for links).

<?php require_once("wp/wp-blog-header.php"); ?>
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>w3c?</title>

<?php
// Include WordPress 
define('WP_USE_THEMES', false);
require('wp/wp-load.php');
query_posts('showposts=4');
?>

<link rel="stylesheet" href="css/w3c.css" type="text/css" />


</head>
<body>


<div id="wrapper">

<div id="header">Logo</div><!--close header div-->
  
<div id="nav"> Menu
<div id="menu">

    			<ul>
    		     <li class="home"><a href="index.php" title="Home"></a></li>
				 <li class="about"><a href="comingsoon.php" title="About"></a></li>
				 <li class="chat"><a href="comingsoon.php" title="Live Broadcast"></a></li>
				 <li class="forum"><a href="comingsoon.php" title="Forum"></a></li>
				 <li class="guestbook"><a href="comingsoon.php" title="Schedule"></a></li>
				 <li class="blog"><a href="comingsoon.php" title="Blog"></a></li>
                 <li class="links"><a href="comingsoon.php/" title="Store"></a></li>
                 <li class="contact"><a href="comingsoon.php" title="Contact Us"></a></li>
                 
	</ul>
    
                <div id="search_form">

<div class="headersearchcontainleft"></div>

<div class="headersearchcontainright"></div>

</div><!--close search form-->
    
  
      </div><!-- close menu -->      
      </div><!--close nav-->
       




<div id="center_content1_container">

  <div id="left_column"> Left Sidebar1
  
    <div id="recent_blog_post_title"></div><!--close recent_blog_post_title-->
        <div id="box_for_WP">
        
      <div id="wp_recent_blogpost_text"><span class="class1">
      

       
       </span></div><!--close wp_recent_blogpost_text-->
       
        </div><!--close box_for_WP-->
    
    
  </div><!-- close left column-->
  
  <div id="center_column">
    <div id="youtube">Center Content1</div><!--close youtube div-->
    <div id="HS_scroll_pics2">
      <div class="sc_menu2">Featured</div><!--close sc menu2 div-->
    </div><!--close HS scroll pics 2 div-->
  </div><!--close center column div-->
  <div id="right_column">Right Sidebar1</div><!--close right column div-->
</div><!-- close center content1 container-->

<div id="center_content2_container">

<div id="money_post">Middle Bar Misc</div><!--close money post-->

</div><!--close center_content2_container div-->

<div id="center_content3_container">

  <div id="left_column2_container">
  
  <div id="top_left">Lower Left sidebar2 
  
   <div id="box2_for_WP">
      <div id="wp_recent_blogpost2_text"><span class="class1"></span></div><!--close wp_recent_blogpost_text-->
      
     </div><!--close box_for_WP-->
  
  
  
  
  </div><!-- close top left -->
  <div id="bottom_left">Misc ads lower right</div><!-- close bottom left-->
  
</div><!--close left column2_container-->

  <div id="center_column_videowall">
  
<div id="videowall_box">Lower Content2
  

  </div><!--close video wall box-->
  
  </div><!--close center column videowall div-->
  
    
  <div id="right_column2_container">
  
  <div id="top_right">Lower Right sidebar2</div><!-- close top right-->
  <div id="bottom_right">misc ads lower right</div><!-- close bottom right-->
  
  </div><!--close right column2 container div-->
 
</div><!--close center_content3_container div-->

<div id="footer"> Footer

<div id="footer_nav"><span class="class1"></span> </div><!--close footer nav-->


<div id="terms_of_use_etc"><span class="class3"></span></div><!-- close terms of use div-->

<div id="copyright">©test w3c</div>

</div><!-- close footer-->

</div><!--close wrapper div-->


</body>
</html>

So with that out the way - now, I’m adding my elements to my foundation and I already got an error / W3C issue that I have no idea how to fix.

Little bit of detail on the error; I’m going to be pulling excerpts of WordPress post from various specific categories. It took me awhile to figure out how to do this but eventually I found this page

http://codex.wordpress.org/The_Loop (if links gets taken down PM me for links).

You would think WordPress guys would post code that validates out problems but for some reason it’s giving me W3C errors???
Here is the code to the page with the WordPress added and here is a link to the site for reference

http://www.divineenergysource.com/W3C-2-issue-added-wordpress-2nd-loop.php

<?php require_once("wp/wp-blog-header.php"); ?>
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>w3c?</title>

<?php
// Include WordPress 
define('WP_USE_THEMES', false);
require('wp/wp-load.php');
query_posts('showposts=4');
?>

<link rel="stylesheet" href="css/w3c.css" type="text/css" />


</head>
<body>


<div id="wrapper">

<div id="header">Logo</div><!--close header div-->
  
<div id="nav"> Menu
<div id="menu">

    			<ul>
    		     <li class="home"><a href="index.php" title="Home"></a></li>
				 <li class="about"><a href="comingsoon.php" title="About"></a></li>
				 <li class="chat"><a href="comingsoon.php" title="Live Broadcast"></a></li>
				 <li class="forum"><a href="comingsoon.php" title="Forum"></a></li>
				 <li class="guestbook"><a href="comingsoon.php" title="Schedule"></a></li>
				 <li class="blog"><a href="comingsoon.php" title="Blog"></a></li>
                 <li class="links"><a href="comingsoon.php/" title="Store"></a></li>
                 <li class="contact"><a href="comingsoon.php" title="Contact Us"></a></li>
                 
	</ul>
    
                <div id="search_form">

<div class="headersearchcontainleft"></div>

<div class="headersearchcontainright"></div>

</div><!--close search form-->
    
  
      </div><!-- close menu -->      
      </div><!--close nav-->
       




<div id="center_content1_container">

  <div id="left_column"> Left Sidebar1
  
    <div id="recent_blog_post_title"></div><!--close recent_blog_post_title-->
        <div id="box_for_WP">
        
      <div id="wp_recent_blogpost_text"><span class="class1">
      
      
      <!-- Start the Loop. -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

 <!-- Test if the current post is in category 3. -->
 <!-- If it is, the div box is given the CSS class "post-cat-three". -->
 <!-- Otherwise, the div box is given the CSS class "post". -->

 <?php if ( in_category('3') ) { ?>
           <div class="post-cat-three">
 <?php } else { ?>
           <div class="post">
 <?php } ?>


 <!-- Display the Title as a link to the Post's permalink. -->

 <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>


 <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

 <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>


 <!-- Display the Post's content in a div box. -->

 <div class="entry">
   <?php the_content(); ?>
 </div>


 <!-- Display a comma separated list of the Post's Categories. -->

 <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
 </div> <!-- closes the first div box -->


 <!-- Stop The Loop (but note the "else:" - see next line). -->

 <?php endwhile; else: ?>


 <!-- The very first "if" tested to see if there were any Posts to -->
 <!-- display.  This "else" part tells what do if there weren't any. -->
 <p>Sorry, no posts matched your criteria.</p>


 <!-- REALLY stop The Loop. -->
 <?php endif; ?>
      

       
       </span></div><!--close wp_recent_blogpost_text-->
       
        </div><!--close box_for_WP-->
    
    
  </div><!-- close left column-->
  
  <div id="center_column">
    <div id="youtube">Center Content1</div><!--close youtube div-->
    <div id="HS_scroll_pics2">
      <div class="sc_menu2">Featured</div><!--close sc menu2 div-->
    </div><!--close HS scroll pics 2 div-->
  </div><!--close center column div-->
  <div id="right_column">Right Sidebar1</div><!--close right column div-->
</div><!-- close center content1 container-->

<div id="center_content2_container">

<div id="money_post">Middle Bar Misc</div><!--close money post-->

</div><!--close center_content2_container div-->

<div id="center_content3_container">

  <div id="left_column2_container">
  
  <div id="top_left">Lower Left sidebar2 
  
   <div id="box2_for_WP">
      <div id="wp_recent_blogpost2_text"><span class="class1"></span></div><!--close wp_recent_blogpost_text-->
      
     </div><!--close box_for_WP-->
  
  
  
  
  </div><!-- close top left -->
  <div id="bottom_left">Misc ads lower right</div><!-- close bottom left-->
  
</div><!--close left column2_container-->

  <div id="center_column_videowall">
  
<div id="videowall_box">Lower Content2
  

  </div><!--close video wall box-->
  
  </div><!--close center column videowall div-->
  
    
  <div id="right_column2_container">
  
  <div id="top_right">Lower Right sidebar2</div><!-- close top right-->
  <div id="bottom_right">misc ads lower right</div><!-- close bottom right-->
  
  </div><!--close right column2 container div-->
 
</div><!--close center_content3_container div-->

<div id="footer"> Footer

<div id="footer_nav"><span class="class1"></span> </div><!--close footer nav-->


<div id="terms_of_use_etc"><span class="class3"></span></div><!-- close terms of use div-->

<div id="copyright">©test w3c</div>

</div><!-- close footer-->

</div><!--close wrapper div-->


</body>
</html>

I’m hoping you guys can help me wrap my head around fixing some of these W3C errors. Any help or feedback is greatly appreciated.

Thanks

I’m sure it’s unnecessary to tell you, but just to be sure: don’t validate the php script. Validate the resulting HTML web page.

I did, and it gave me these two errors:

Validation Output: 2 Errors

[B]Error Line 68, Column 40: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag[/B]

            &lt;div class="post-cat-three"&gt;

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "&lt;p&gt;" or "&lt;table&gt;") inside an inline element (such as "&lt;a&gt;", "&lt;span&gt;", or "&lt;font&gt;").

 [B]Error Line 101, Column 30: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag[/B]

            &lt;div class="post"&gt;

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "&lt;p&gt;" or "&lt;table&gt;") inside an inline element (such as "&lt;a&gt;", "&lt;span&gt;", or "&lt;font&gt;").

The problem seems to be caused by the <span> tag containing <div>'s. But that span isn’t put there by WP, it is part of your theme basis. Get rid of the span and see if it validates.

Thanks for reply!

wait I didn’t know that? Did you mean when I validate my page to take out the php call for wordpress excerpts? I think you meant don’t validate just the wordpress code on its own which I’m aware of. Can you clarify?

Anyway I took the span tag out and went from 4 errors to 3 errors

every little bit of progress is good now 3 more errors to go

I’ll keep trying things any other ideas?

The W3C HTML validator validates only HTML code. If you copy and paste the code including the php code in the validator, it will give you loads of errors.
What you need to do is validate the HTML code of the page as you see it in your browser. It’s easy: just put the link to the page in the validator.

Anyway I took the span tag out and went from 4 errors to 3 errors

That’s strange. If I validate your page (http://www.divineenergysource.com/W3C-2-issue-added-wordpress-2nd-loop.php) the span is still there, and it gives me only 2 errors.

you where right, it was the span tags and validating the HTML in browser = I got it! Now there are 0 errors :slight_smile: Just got to figure out the way to properly implement span tags. It shouldn’t be that hard as
I got a few variations with span tags working on my other page with no errors.

thanks much I might have a few other errors may need help with look for me soon hehehe

thanks much!

ok update, here is the code that now validates with the wordpress loop call. I took out the span like you mentioned

but for the life of me I cant figure this out. I need the span tags in there somewhere in the <div id=“wp_recent_blogpost_text”> to style the text links etc…

I’ll paste the code, can you confirm that it validates and show me how to implement the span for the wordpress loop without giving errors in W3C?

Whats weird is the spans for the footer are working fine error free, so I basically tried the same exact thing up in the <div id=“wp_recent_blogpost_text”> but I get W3C errors for some reason ?

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>w3c?</title>


<link rel="stylesheet" href="css/w3c.css" type="text/css" />


</head>
<body>


<div id="wrapper">

<div id="header">Logo</div><!--close header div-->
  
<div id="nav"> Menu
<div id="menu">

    			<ul>
    		                 <li class="home"><a href="index.php" title="Home"></a></li>
				 <li class="about"><a href="comingsoon.php" title="About"></a></li>
				 <li class="chat"><a href="comingsoon.php" title="Live Broadcast"></a></li>
				 <li class="forum"><a href="comingsoon.php" title="Forum"></a></li>
				 <li class="guestbook"><a href="comingsoon.php" title="Schedule"></a></li>
				 <li class="blog"><a href="comingsoon.php" title="Blog"></a></li>
                                 <li class="links"><a href="comingsoon.php/" title="Store"></a></li>
                                 <li class="contact"><a href="comingsoon.php" title="Contact Us"></a></li>
                 
	</ul>
    
                <div id="search_form">

<div class="headersearchcontainleft"></div>

<div class="headersearchcontainright"></div>

</div><!--close search form-->
    
  
      </div><!-- close menu -->      
      </div><!--close nav-->
       




<div id="center_content1_container">

  <div id="left_column"> Left Sidebar1
  
    <div id="recent_blog_post_title"></div><!--close recent_blog_post_title-->
        <div id="box_for_WP">
        
      <div id="wp_recent_blogpost_text">
      
      
      <!-- Start the Loop. -->
 
 <!-- Test if the current post is in category 3. -->
 <!-- If it is, the div box is given the CSS class "post-cat-three". -->
 <!-- Otherwise, the div box is given the CSS class "post". -->

            <div class="post-cat-three">
 

 <!-- Display the Title as a link to the Post's permalink. -->

 <h2><a href="http://amazingabsguide.com/wp/?p=4" rel="bookmark" title="Permanent Link to Hello Sitepoint">Hello Sitepoint</a></h2>


 <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

 <small>November 30th, 2012 by <a href="http://amazingabsguide.com/wp/?author=1" title="Posts by admin" rel="author">admin</a></small>


 <!-- Display the Post's content in a div box. -->

 <div class="entry">
   <p>Was up code bros can you help me fix this</p>
 </div>


 <!-- Display a comma separated list of the Post's Categories. -->

 <p class="postmetadata">Posted in <a href="http://amazingabsguide.com/wp/?cat=3" title="View all posts in Popular Articles" rel="category">Popular Articles</a></p>
 </div> <!-- closes the first div box -->


 <!-- Stop The Loop (but note the "else:" - see next line). -->

 
 <!-- Test if the current post is in category 3. -->
 <!-- If it is, the div box is given the CSS class "post-cat-three". -->
 <!-- Otherwise, the div box is given the CSS class "post". -->

            <div class="post">
 

 <!-- Display the Title as a link to the Post's permalink. -->

 <h2><a href="http://amazingabsguide.com/wp/?p=1" rel="bookmark" title="Permanent Link to Hello world!">Hello world!</a></h2>


 <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

 <small>November 30th, 2012 by <a href="http://amazingabsguide.com/wp/?author=1" title="Posts by admin" rel="author">admin</a></small>


 <!-- Display the Post's content in a div box. -->

 <div class="entry">
   <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
 </div>


 <!-- Display a comma separated list of the Post's Categories. -->

 <p class="postmetadata">Posted in <a href="http://amazingabsguide.com/wp/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></p>
 </div> <!-- closes the first div box -->


 <!-- Stop The Loop (but note the "else:" - see next line). -->

       

       
       </div><!--close wp_recent_blogpost_text-->
       
        </div><!--close box_for_WP-->
    
    
  </div><!-- close left column-->
  
  <div id="center_column">
    <div id="youtube">Center Content1</div><!--close youtube div-->
    <div id="HS_scroll_pics2">
      <div class="sc_menu2">Featured</div><!--close sc menu2 div-->
    </div><!--close HS scroll pics 2 div-->
  </div><!--close center column div-->
  <div id="right_column">Right Sidebar1</div><!--close right column div-->
</div><!-- close center content1 container-->

<div id="center_content2_container">

<div id="money_post">Middle Bar Misc</div><!--close money post-->

</div><!--close center_content2_container div-->

<div id="center_content3_container">

  <div id="left_column2_container">
  
  <div id="top_left">Lower Left sidebar2 
  
   <div id="box2_for_WP">
      <div id="wp_recent_blogpost2_text"><span class="class1"></span></div><!--close wp_recent_blogpost_text-->
      
     </div><!--close box_for_WP-->
  
  
  
  
  </div><!-- close top left -->
  <div id="bottom_left">Misc ads lower right</div><!-- close bottom left-->
  
</div><!--close left column2_container-->

  <div id="center_column_videowall">
  
<div id="videowall_box">Lower Content2
  

  </div><!--close video wall box-->
  
  </div><!--close center column videowall div-->
  
    
  <div id="right_column2_container">
  
  <div id="top_right">Lower Right sidebar2</div><!-- close top right-->
  <div id="bottom_right">misc ads lower right</div><!-- close bottom right-->
  
  </div><!--close right column2 container div-->
 
</div><!--close center_content3_container div-->

<div id="footer"> Footer

<div id="footer_nav"><span class="class1"></span> </div><!--close footer nav-->


<div id="terms_of_use_etc"><span class="class3"></span></div><!-- close terms of use div-->

<div id="copyright">©test w3c</div>

</div><!-- close footer-->

</div><!--close wrapper div-->


</body>
</html>