Correctly using <UL> that validates Options

[Magikalfox]

Hi all!

I'm trying to have my navigation buttons (text only) spaced nicely in a list format but the validator gives me this message:

document type does not allow element "ul" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

To follow is my code that seems to have issues:

<p align="left"><font color="#000000" size="2" face="Georgia, Times New Roman, Times, serif"><strong><ul><li><a href="index_can.htm">HOME</a></li>
<li><a href="about.htm">ABOUT US</a></li>
<li><a href="index_can.htm"> CANADA SEARCH</a></li>
<li><a href="index_us.htm"> U.S. SEARCH</a></li>
<li><a href="hosts.htm">SALES</a></li>
<li><a href="seekers.htm">SEARCH</a></li>
<li> <a href="join.htm">MEMBERSHIP</a></li>
<li> <a href="privacy.htm">PRIVACY POLICY</a></li>
<li><a href="contact.htm">CONTACT US</a></li></ul></strong></font></p>

I've moved the <UL> tag around, trying it in different spots, but that made the validator go from one error to twelve errors.

Can anyone help me?

Thank you so much!

[Effovex]

.........UL can't be contained in P, as P can only contain inline elements. UL also can't be contained in STRONG, because strong, like other phrase elements, can only contain inline elements.

[Magikalfox]

I tried putting the <UL> at the beginning of the <p align...> and closing it at the end and the validator came up with 12 errors saying I couldn't put it there.

Sorry... don't mean to be a total dummy.

Thanks again.

[Brian Chandler]

I tried putting the <UL> at the beginning of the <p align...> and closing it at the end and the validator came up with 12 errors saying I couldn't put it there.

Sorry... don't mean to be a total dummy.

Thanks again.

You have <p>....</p> containing a <ul>. You can't do that. Therefore, don't. Simplest way to not put the <ul> inside a <p> is to delete the <p>. Then do the same for the <font> (which is unnecessary anyway, since CSS does it better), and for the <strong> (whatever this is meant to mean exactly).

It will then validate. Then you might write some CSS style stuff for UL to tart up the list as required.

[pandy]

Exactly. Magikalfox, I get the feeling that you think of "tags" as commands of sort and the order they come in. Try to think of elements rather than tags and see them as containers. Like circles within circles, if you will.

<p>Blah blah <em>BLAH</em> blah</p>
All of the above is the element P. Start tag for P, content, end tag for P. It happens to contain another element, EM, Much of HTML syntax is about which element can contain which, it isn't about in what order they come.

The HTML element is the mother of them all and contains all other elements, the whole page. BODY contains everything that's visible on the page and so on. This way it continues down to the smallest little SPAN.

"Tag thinking" is a big hindrance when trying to get a grip of HTML. Hope I managed to explain and didn't just confuse you.

[Magikalfox]

Thanks everyone. That worked just fine... now I just need to work on my CSS skills and all will be well in my world o' web.

Thanks again.

[stjepan]

The HTML element is the mother of them all and contains all other elements, the whole page. BODY contains everything that's visible on the page and so on. This way it continues down to the smallest little SPAN.

The best explanation I've ever read.

[pandy]

Thank you.