Validator error message

document type does not allow element "UL" here; missing one of "APPLET", "O

[scato345]

Hello,

I have validated the page except for this message, and I am not familiar with the tags described below. I have used HTML 4.01 Transitional as the doc type.

Any help would be appreciated. The page comes up clean, but I might as well get it right as I build on what I have.

The cells are contained within embedded tables not shown.

Thanks,

THIS IS THE VALIDATOR MESSAGE BELOW:

document type does not allow element "UL" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag .

REFERENCE THIS CODE BELOW:

<tr>
<td align="center" valign="middle">
<h1>

<!-- #*$!#*$!#*$! PASTE DOC'S DESCRIPTION BELOW #*$!#*$!X -->
<font face="Verdana, Arial, sans-serif" color="black" size="2">A lace-to-toe non-steel toe safety boot. This style is electric hazard rated and has slip resistant soles.<ul><li>Leather: Industrial Grizzly is a lightly mulled full grain leather with water resistant properties</li><li>Construction: SPT sole with yellow Z stitch</li></ul></font>

</h1>
<!-- #*$!#*$!#*$! ABOVE #*$!#*$!#*$!#*$!#*$!X -->
</td>
</tr>

[SuzyUK]

It's only the first part that's important - "document type does not allow element "UL" here;"

<ul>

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 "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

it's indicating an nesting error, in the code you posted there's 2.

A UL is a block level element.

1. You can't nest a UL in side an h1, an h1 can only contain inline elements.

2. Also as the message above tells you can't nest a ul inside the <font> element as it's an inline element

[scato345]

SuzyUK,

Thank you very much.

I understand the different levels - mostly just from observation and usage, but I will sit down with what you said and digest it fully in regards to the code and seriously look at my notes.

BTW - I used <div> in another page - with which I was having problems, spacing between cells that had to line uo seamlessly top to bottom, and using the <div> tag worked.

Is there some magic to it? I am assuming from my scribbled notes that is on the same level as <td>. Is that correct? or is it some thing else?

"Using the <div style="..........> - took care of the problem.

I will be learning more CSS oriented language as I upgrade my site.

-Dorian

Here's the link to my site's (as yet not implemented or finished) new lobby. )When it is completed, with a bit of flash to open some elevatordoors, it will replace the current lobby. It was built with modified artwork and I couldn't get the "brass plate" to act as background with buttonsplaced over it. The button colors will change to green with mouse over commands when it is implemented.

[scato345]

SusyUK,

Well-------

Here's what works with the validator, though it is very cumbersome:

<tr>
<td align="center" valign="middle"
<font face="Verdana, Arial, sans-serif" color="black" size="2">

<!-- #*$!#*$!#*$!#*$!XX PASTE DOC'S DESCRIPTION BELOW #*$!#*$!#*$!#*$!#*$!#*$!X -->
A lace-to-toe non-steel toe safety boot. This style is electric hazard rated and has slip

resistant soles.
</font>

<ul>
<li>
<font face="Verdana, Arial, sans-serif" color="black" size="2">
Leather: Industrial Grizzly is a lightly mulled full grain leather with water resistant properties
</font>
</li>
<li>
<font face="Verdana, Arial, sans-serif" color="black" size="2">
Construction: SPT sole with yellow Z stitch

<!-- #*$!#*$!#*$!#*$!XX ABOVE #*$!#*$!#*$!#*$!#*$!#*$!X -->

</font>
</li>
</ul>

</td>
</tr>

The <h1> had to be eliminated.

I would now have to use <strong> to increase the font strength.

I assume that CSS would make this much easier if I intend to comply with validation demands.

Thanks again-

Dorian

[SuzyUK]

scato345, well done on the solution,

You are correct that CSS would make this less cumbersome and as a first step into CSS you can begin using it inline, it's recommended that it is external but I forget that using it embedded (in the <head> of the document) or inline (attached to the element) is most peoples natural progression until they get used to it.

You asked an HTML (document markup) validation question and what you found was that your desire to style the markup using HTML elements caused problems, This is the stage where you should be marking up the document with no style at all just mark it up so it looks logical in plain text. and remember that CSS has the ability to style everything. This is what CSS if for - to keep the markup and style separate!

A div is not a magic element it is simply a generic block level element used when a division is required on the page. In your case you're using tales so you probably don't need these generic divs yet.. the table cells <td>'s are your divisions and you can hook into a <td> the same as you can a <div> they are both just HTML elements.

The <h1> had to be eliminated.

I'm glad you found that out!
An H1 (Heading level 1) should just be on a page once. It should be used to designate the main page heading.. you should never use h1-6 elements just to make something bold! and in fact what you were doing albeit unintentionally was abusing the <h1> by "stuffing it" a tactic that some naughty people use, thinking the h1 has extra weight in the SE's. It's a dangerous thing to do, the SE's may very well have a auto way of detecting over abuse and your pages just might get penalised. Again you've found that out for the right reasons IMHO - it's simply not the right thing to do even at basic markup level ;)

I would now have to use <strong> to increase the font strength.

You can but you don't have to with CSS,
<strong> should just be used if there is always a word or paragraph you might like to add weight/emphasis to. Again think about the page marked up plainly (or imagine listening to the page.. would it make sense if the code reader emphasised/shouted the whole page?) - the <strong> will add strength to the plain page too and though you might want the text to visually appear bold today, next week you might want it to look red - so think carefully about adding any additional HTML markup.
<strong> itself is just another inline element (that can be styled too) so you would still have to nest it where you are using the <font> element in your code just now.

Here's a sample of using inline CSS with your code

<table style="font-family: verdana, arial, sans-serif; font-size: 13px; color: black;">
<tr>
<td style="text-align: center; vertical-align: middle; font-weight: bold;">
A lace-to-toe non-steel toe safety boot. This style is electric hazard rated and has slip resistant soles.
<ul>
<li>Leather: Industrial Grizzly is a lightly mulled full grain leather with water resistant properties</li>
<li>Construction: SPT sole with yellow Z stitch</li>
</ul>
</td>
</tr>
</table>

That's very basic, but the idea is to put the styles used by the whole table as high up the chain as you can, it will save repeating them, they will cascade (that's the 'C' part of CSS) down through the rest of the table - for instance if the whole table is to appear in bold you can move that rule from the individual table cell <td> and move it up to the table rule so you don't have to apply it repeatedly.

The bits in blue are the bits that can be removed to an actual stylesheet with style="..." being replaced by class="classname" but that's for another day.. :)

Suzy

[g1smd]

I make pages from headings, paragraphs, lists, tables and forms, and I ensure that all text content is inside a block of some sort. I never have words that are "bare" inside the body. Everything is inside a heading, paragraph, list, table or form.

Once the structure of the document is coded, it is an easy matter to style each of those elements using CSS, and to add class names for any exceptions such as the navigation list, and the footer paragraph.

[scato345]

Suzy,

Again, a very sincere thank you.

Firstly I must tell you that I am not a web designer (as must be obvious) but a writer, who is also rebuilding a train station and starting a web business and am strapped - and unable to find very knowledgeable people here in East Tennessee, (and the books and tutorials on the subject are not as clear as the advice I've received here) so here I go it alone for the moment.

The insight that I have gained from your last reply is immeasurable.

And the remark about putting the "C" elements into the appropriate block levels, etc, so that they may be repeated whennecessary gives validation, and flexibility to my liking this very stable format for all the content:

<tr>
<td>
<table>
<tr>
<td>
<div> - or <p> - or whatever..........
<font><strong>SPECIFICATIONS</strong></font>

etc.
....and back out

I believe that gLsmd was referring to that in his post.

I will have to print out the email and study it somewhat closely as I am going to implement your suggestions ASAP, as I am working on another page that would require the same solutiion as the one you suggested (that I now understand because of its application to what I am doing,) but repeated many more times. And your suggestion would simplify that immensely.

Yes, I was told to use as many h1's as possible, but I would prefer not to for the reasons that you mentions, as I am quite sure that interesting content and good meta tags will do what is necssary to get a site recognized. I will, though, make sure I do have at least one good h1 on each page, which I don't always have because I use artwork for many of the page headings - I'll work through that.

Respectfully,

Dorian

[edited by: tedster at 1:01 am (utc) on Mar. 11, 2007]

[scato345]

A follow-up.

I implmeneted some in-line CSS, and it made what I was doing, for the lack of a better word, "fun."

I can see that I will have much cleaner code AND be able to much more easily control the various iterations of the same kinds of pages, which is my ultimate goal - to use several templates and modify their style vis a vis color, font, etc. for the various applications within the business.

I have already begun looking at the on-line tutorials. I will call the uniuversity here once again to get a tutor on this (I tried last month), because I now see that full CSS is a priority for me.

Even the in-line helped simplify the page mark-up.

I do have two problems, as a result of the in-line I tried, though I'm sure it will clear up once I learn what I am doing.

I must say that I first looked at CSS as a conspiracy by programmers to complicate the web by making it too technical for the average Joe. I now believe that it actually makes things simpler - so now maybe I think it was just created for the pros who aren't too sharp ;-)

*******I am wondering if the additional table within a table that comprises each section of information that I like so much will be getting in the way of the style sheet and prevent it from being interpretted properly? I isolate each section of the page within a table and then I use the "extra" table for each row (or collection of several related rows) of info. ********

Here are the problems:

The a href text color and text width is not being displayed and the cellspacing is lost.

<!-- Bottom Cell - Links-->

<tr>
<td width="780" align="center" height="35" colspan="2">
<table >

<tr>
<td width="780">
<!--"EXTRA" TABLE I AM REFERRING TO-->
<table width="100%" cellpadding="5" cellspacing="3" style="font-family: verdana; font-size: 10px; color: #1D7A67;

border: 0px solid #ffffff; background-color: #eeeeee;">
<tr>
<td align="center" valign="middle" height="20" width="20%"><a

href="http://#*$!.com">STORE WINDOW</a>
</td>
<td align="center" valign="middle" height="20" width="20%"><a

href="http://#*$!.com/lobby">MAIN LOBBY</a>
</td>
<td align="center" valign="middle" height="20" width="20%"><a

href="http://#*$!.com/lobby/3_sneekeefeet_lobby/index.html"><i>SNEEKEEFEET LOBBY</i></a>
</td>
<td align="center" valign="middle" height="20" width="20%">
</td>
<td align="center" valign="middle" height="20" width= "20%"><a

href="http://#*$!.com/contact-info/addresses.html">CONTACT US</a>
</td>
</tr>
</table>
</td>
</tr>

</table>
</td>
</tr>

The 'a href' text color, width and style info is not being displayed.

<tr>
<td border="0" align="center">
<table width="780" style="font-color: #193933; face: Verdana; size: 14px; width: bold; border: 0px

solid;">
<tr>
<td align=center valign="middle" width="20%" height="20"><a

href="http://xx.com/lobby/3_sneekeefeet_lobby/a_sneakers/a_converse/index.html">CONVERSE</a>
</td>

<td align=center valign="middle" width="20%" height="20"> <a

href="http://xx.com/lobby/3_sneekeefeet_lobby/a_sneakers/b_palladium/index.html"><font color="blue"

face="Verdana" size="2">PALLADIUM</font></a>
</td>
<td align=center valign="middle" width="20%" height="20"> <a
href="../messages/under_construction.html"> <font color= "blue" face="Verdana"
size="2">COMING SOON</font></a>
</td>
<td align=center valign="middle" width="20%" height="20"> <a

href="http://xx.com/lobby/3_sneekeefeet_lobby/a_sneakers/d_os.html"><font color= "blue" face="Verdana"

size="2">ORIGINAL SWAT</font> </a>
</td>
<td align=center valign="middle" width="20%" height="20"> <a
href="../messages/under_construction.html"> <font color=blue face="Verdana"
size="2">COMING SOON </font></a>
</td>
</tr>
</table>
</td>
</tr>

I'll figure it out eventually, I guess, as I learn what I'm doing, but thought I'd post it and speed things up. It is interesting. Almost makes me wish I had learned computer programing languages - (C++ here I come!)

Again,

Thanks

Dorian