HTML 4.01, Forms, and </p> 1

[Kirsle]

I'm hoping somebody can provide some insight on a couple of little quirks about HTML 4.01 that I don't quite get.

I've been making sites that validate as HTML 4.01 Strict for a few years, and every page on all the sites would validate except for pages that contain forms. The validator would say that "input" tags of various kinds aren't allowed to appear in the context that they're in. For instance with this kind of code:

<form name="comment" action="/" method="post">
<input type="hidden" name="p" value="blog.comment">
<input type="hidden" name="action" value="save">
<input type="hidden" name="id" value="35">
<strong>Name:</strong><br>
<input type="text" name="name" size="20"><p>

<strong>Message:</strong><br>
<textarea cols="30" rows="6" name="message"></textarea><p>

<input type="submit" value="Post Comment">

<div style="display: none">
Do not edit these fields.<br>
<input type="text" size="20" name="email" value=""><br>
<input type="text" size="20" name="url" value="[URL unfurl="true"]http://"><br>[/URL]
<textarea cols="20" rows="2" name="comment"></textarea>
</div>

</form>

Today after seeing a failed validation again on a page containing forms, I finally googled for how HTML 4.01 forms are supposed to work, and found a simplified example on W3C's site that went like this:

 <FORM action="[URL unfurl="true"]http://somesite.com/prog/adduser"[/URL] method="post">
    <P>
    <LABEL for="firstname">First name: </LABEL>
              <INPUT type="text" id="firstname"><BR>
    <LABEL for="lastname">Last name: </LABEL>
              <INPUT type="text" id="lastname"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sex" value="Male"> Male<BR>
    <INPUT type="radio" name="sex" value="Female"> Female<BR>
    <INPUT type="submit" value="Send"> <INPUT type="reset">
    </P>
 </FORM>

So I wrapped the contents of my form between a <p> and </p>. Now the validator stopped complaining about my input fields, but now it complained that it found a </p> that wasn't matched to anything.

So, the main thing here that I don't get about HTML 4.01 is: why don't <p> tags need to be closed? I removed the </p> and then it validated fine. I've always used <p> as like a drop-in replacement for "<br><br>" and never closed them. I read somewhere that if you include a block-level element such as <div> inside of a <p>..</p>, that it implicitly closes the <p> tag and that the following </p> will cause the validation to fail.

Why does <p> work this way?

-------------
Cuvou.com | My personal homepage

perl -e '$|=$i=1;print" oo\n<|>\n_|_";x:sleep$|;print"\b",$i++%2?"/":"_";goto x;'

 

[Vragabond]

First, you need to understand a few basics.

1. Although it is a block level element with its own margins and everything, form acts solely as a container for the form elements, making them perform their function. In a visual content of the page, it has no meaning. Since proper HTML coding requires all inline elements to be enclosed in meaningful block level elements, you need to put your inputs (inline elements) inside a block level element (such as a paragraph or division).

2. Paragraph (<p>) is a block level element that can contain text and inline elements, but not any other block level element. This is incredibly important to know, because it means that you cannot put a div, a list or a table inside a paragraph.

3. As you already know, 4.01 spec is very lax when it comes to following the rules. Since paragraph cannot have any other block level element following it, it was safely enough for 4.01 spec to assume that at any other block level element, paragraph closes automagically. That block level element could be either a div, a table, a list or another paragraph. HTML behaves in a similar way with many other elements (li, tr, td, etc.)

If you know all these facts (and ignore slightly erroneous explanation of how tags get closed, the situation becomes very simple:

1. Your form does not validate initially because your inline elements are not enclosed inside a meaningful block level element.

2. If you wrap your whole contents inside a paragraph, that paragraph is closed implicitly when your div begins, because div cannot be inside a paragraph (since the paragraph cannot contain other block level elements). Your extra closing paragraph is thus erroneous.

3. If you move your closing paragraph above the opening div, everything should work. If you wrap everything in another div, it should still work.

If you were coding in a more strict spec, such as XHTML 1.0, it would tell you that it expected a closing paragraph before the opening div, and that might help you understand the situation better.

Do something about world cancer today: Comprehensive cancer control information at PACT

 

[Kirsle]

Thanks for the explanation!

-------------
Cuvou.com | My personal homepage

perl -e '$|=$i=1;print" oo\n<|>\n_|_";x:sleep$|;print"\b",$i++%2?"/":"_";goto x;'