validation: another pair of eyes please!

croatiankid

10-23-2006, 10:39 AM

when i validate <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="robots" content="index,follow">
<meta name="keywords" content="test words">
<meta name="description" content="We use the latest technology with regards to web standards to create fast loading, search engine friendly sites.">
<link rel="stylesheet" href="index.css" type="text/css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Test page</title>
</head>
<body>
<div id="main"><div id="head">
<div id="header">
<h1><a href="index.php">croatiankid designs</a></h1>
<h2>clean, standards compliant designs at affordable rates</h2>
</div></div>
<div id="navcontainer">
<ul id="navlist">
<li><a href="index.php" class="left">Home</a></li>
<li><a href="design.php">Web design</a></li>
<li id="active"><a href="development.php" id="current">Web development</a></li>
<li><a href="portfolio.php">Portfolio</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<div id="border">
<div id="content">
<h3>The latest technology</h3>
<p>We use a combination of <b>HTML</b>, <b>CSS</b> and <b>PHP</b> to create sites that:
<ul>
<li><b>load fast</b>;</li>
<li>are <b>search engine friendly</b>;</li>
<li>are <b>cross browser compatible</b>;</li>
<li>follow the guidelines set by the <a class="content" href="http://www.w3.org/"><b>World Wide Web Consortium (W3C)</b></a>.</li>
</ul>
Using one single <b>CSS</b> file to control the layout of the <b>whole site</b>, it is much easier to modify the layout of a site, and shortens download times exponentially. Using <b>PHP</b> on a web server can lessen the size of the site as a whole, and allows for creation of things such as contact forms, logins etc.</p>
<h3>Search engine friendly</h3>
<p>Search engines give higher rankings to sites that follow the W3C's guidelines (the organisation that <b>sets the standards</b> in web design). They also prefer sites that are smaller and download faster. We follow the guidelines, hence our websites have an advantage of others'.</p>
<h3>Cross browser compatible</h3>
<p>There's little point in a site that looks right only in one version of Internet Explorer. We hate "This site is viewed best in..." signs. Our sites, including this one, look the same in <i>every</i> web browser. This ensures that <b>noone</b> will hit the back button because they see text and graphics jumbled all over the place. A <a href="http://www.w3schools.com/browsers/browsers_stats.asp" class="content">study</a> of the <b>W3C</b> shows that in September of 2006, only 55.6% of internet users use IE 6, and has been falling steadily since October of 2005. This is exactly why <b>cross browser compatibility</b> is one of the most important aspects of web design.</p>
</div>
<?php require("footer.php") ?>
</div>
</div>
</body>
</html>

mind the red p's, i get an error:
Error Line 37 column 323: end tag for element "P" which is not open.

...such as contact forms, logins etc.</p>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
I see in browsers as well!!! that the h3 is hugging the text above. but i don't see how the p isn't opened! i'm embarrassed to use database space for this stupid question, but please help me! thanks lol!

Bill Posters

10-23-2006, 10:57 AM

You cannot nest a ul element within a p element.
As the ul is a block level element, the browser is automatically closing the p element for you, before it opens the ul.
This means that your </p> tag actually refers to a p element which the browser has already closed.

croatiankid

10-23-2006, 11:42 AM

awwww urghhh ugh.
it seems stupid to do
<p>the reasons are:</p> because the sentance goes on into the <ul>. what should i do? nonetheless end the <p> after the colon?

croatiankid

10-23-2006, 11:45 AM

do i actually even need to include a </p>, since the list automatically closes it? i omitted it, and it validates... but isn't in not well-formed then?

Bill Posters

10-23-2006, 12:15 PM

If you're using HTML 4.01 (as text/html), then the browser's render engine will assess whether each consecutive element is a block level or inline level.
If it's a block level element, then it will invisible close the preceding block element (the p element).
It can normally do this speedily enough not to be noticeable.

Some exponents of HTML 4.01 consider this a bonus as it allows the document to be very slightly smaller. However, those who expouse the virtues of good, solid coding tend to recommend manually closing the tags yourself.

If your using XHTML markup scheme, then you'll be required to include the appropriate closing tags in the markup. Without them, the document will fail to validate.
If served as text/html, your XHTML markup will be treated as erroneous HTML, meaning that the browser will, once again, close the element for you when it encounters the ul.
The browser does this to try to ensure that the document stays well-formed.

If you were serving your XHTML markup as proper XML - and you omitted a closing tag - then the browser would return a yellow XML error page instead of attempting to render the page.

It's good practice to get into the habit of closing tags properly, rather than relying on the browser parser engine to spot the missing closing tags and add them for you. It's technically acceptable, but most quality-minded coders would advise that the markup in your documents is clear, complete and well-formed.

croatiankid

10-23-2006, 12:55 PM

thanks. since it validates, ill probably keep it like this. i used html for this site since xhtml would bring me no benefit whatsoever

croatiankid

10-31-2006, 07:30 AM

Could someone please delete the code from the first post, except for the code between the red <p>s? its affecting my google ranking, and the code outside of the <p>s isnt relevant anyway

Bill Posters

10-31-2006, 08:00 AM

I don't think that the code in that post is directly the problem, or that deleting some of it will help you get the top slot for your targeted keywords/phrase (croatiankid design?).
If you look closer at the Google serps ('More results from www.codingforums.com'), you'll see that numerous other CF pages including those keywords come out ahead of your own site.

It's likely to be the accumulation of all those mentions of the croatiankid keyword that leads Google to believe that this site (and other forums) all have more relevant information about croationkid than the actual croationkid designs website.

The fact that you have both croatiankid and design in your site title and h1 elements should help get you the top slot (or at least to rise above CF), but evidently that isn't always that case.

rpgfan3233

10-31-2006, 08:19 AM

Unfortunately, the P element is self-closing in HTML, making it hard to do something which can be done in XHTML like:
<p><ul><li>Generic List Item</li></ul></p>

HTML can be a pain in such cases and that is one of the reasons why I prefer XHTML over HTML.

Edit: As for well-formed code, that is about as close as you can get in HTML. It isn't an XML-based language, where everything must be closed in some way (e.g. <tag></tag> or <tag/>).

Bill Posters

10-31-2006, 08:40 AM

Unfortunately, the P element is self-closing in HTML, making it hard to do something which can be done in XHTML like:
<p><ul><li>Generic List Item</li></ul></p>
Think again. That isn't valid in XHTML either.
The p element cannot contain block-level elements. The ul element is a block-level element.

rpgfan3233

10-31-2006, 09:02 AM

Think again. That isn't valid in XHTML either.
The p element cannot contain block-level elements. The ul element is a block-level element.

That is true. Rather than argue that I was merely using the original idea as an example, I'll just post a valid example. Try this one:


<ul>
<li>
<p>Not sure why a paragraph would be here, but there could be reasons for it.</p>
</li>
</ul>


<ul>
<li>
<p>Not sure why a paragraph would be here, but there could be reasons for it.
</li>
</ul>

The code would be indented the same way, in terms of depth, but it doesn't feel right to leave something open that way. Something like <p>Value</p> or <p attribute="value"/> seems better to me. Maybe I just enjoy the well-formed idea of XML too much.

Bill Posters

10-31-2006, 09:37 AM

<p attribute="value"/>
That would also be incorrect in HTML as the p element is not an empty element, so therefore is never self-closing.
The purpose of the p is to contain text. If p were self-closing, where would its textual content go?

Even so, I am also of the view that XHTML provides a better model for markup straight out of the box.