Member Avatar for astnrocker

This is for an assignment in school. All of our HTML has to be W3C validated. I'm still getting one error. On line 32 specifically. This is what it's saying:

"Line 32, Column 43: end tag for "select" which is not finished
<select name="choiceBox" size="7"></select>✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on."

I don't see anything nested incorrectly. I've been hacking at the code for a while now with no solution. Anyone have any ideas?

<table border="0"> 
 <tr> 
  <td valign="top"> 
    <h3>Personal Information</h3> 
    <p>Name<br /> 
      <input type="text" name="name" size="50" onclick="document.forms[0].name.value = '';" /></p> 
    <p>E-mail<br /> 
      <input type="text" name="e_mail" size="50" onclick="document.forms[0].e_mail.value = '';" /></p>  
  </td> 
 </tr> 
  <tr> 
  <td valign="top"> 
  <p>Are you 18 years of age or older?</p> 
  <p><input type="radio" name="preferences" />Yes</p> 
  <p><input type="radio" name="preferences" />No</p> 
  </td> 
 </tr> 
<tr>
<td valign="top">
<p>Positions interested in:</p>
<select name="available" size="7" onchange="moveOver();">
<option>Server</option>
<option>Host</option>
<option>Food Runner</option>
<option>Line Cook</option>
<option>Manager</option>
<option>Busser</option>
<option>Event Coordinator</option>
</select>

<p>Your Choices:</p>
<select name="choiceBox" size="7"></select>

<p><input type="button" value="Remove" onclick="removeMe();" /></p>
</td>
</tr>
</table>
  • 3 Contributors
  • 4 Replies
  • 112 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Arkinder

Dani AI

Generated

The validator message shown usually means the DTD expected certain child elements inside that <select> (option or optgroup) or that earlier markup closed in a way that left the select “inside” another element. and pointed to the right area — the static HTML the validator reads must meet the DTD rules, and moving things around later with JavaScript does not change what the validator checks.

A simple, non‑intrusive fix is to include a small placeholder option in the original HTML so the <select> is valid at parse time (for example a first option with an empty value or a “Select…” label that your scripts ignore). If the course requires an HTML4/XHTML doctype, keep the markup and server MIME consistent so the validator parses it against the right DTD. If validating as HTML5 is allowed, the rules are more forgiving, but check the validator mode first.

Troubleshooting tips that often find the real cause: validate by pasting the page into the W3C validator to see the exact snippet it highlights; temporarily remove blocks to isolate where a stray or unclosed tag might be; inspect the DOM in browser dev tools to see how auto‑closing (especially <p>) changed structure; and avoid placing non‑option elements inside a select. ’s point about using semantic form elements (labels, fieldsets) and avoiding tables for layout will also reduce nesting surprises and improve accessibility.

References: MDN’s select element reference (MDN select element) and the W3C Markup Validation Service (W3C Validator).

Recommended Answers

All 4 Replies

Member Avatar for faroukmuhammad

I qoute from third paragraph;

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on."

Just as lines 21-29 are so should line 32. In other words, you have to put some <option> tags between <select> and </select>.

Edited by faroukmuhammad because: n/a
Member Avatar for astnrocker

I tried that but it messed it up. The user selects a job position and it appears in the box below. The user should also be able to select that and remove it as well.

Member Avatar for faroukmuhammad

O.k, then it should be an input box.

Member Avatar for Arkinder

If you were turning this into me I would fail you.

In 1996, a man named David Siegel had a great idea - to use tables to position elements. This would allow him to simply plug in his content and position things wherever he wanted. While this idea worked, it meshed structure and presentation into one. Making code an endless mess. Imagine trying to dig through hundreds of lines of tables just to edit something. David regretted his own idea only a year later.

Unfortunately, we've been paying for it ever since. I cannot stress to you enough how important it is to only use tables for tabular data. What you currently have belongs in a form. Because that is exactly what it is.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	</head>
	
	<body>
	
	<h3>Personal Information</h3>
	
	<form method="get" action="">
	<div>
	
	<label for="name">Name</label><br>
	<input type="text" id="name" name="name" size="50" onclick="document.forms[0].name.value = '';"><br><br>
	<label for="e_mail">E-mail</label><br>
	<input type="text" id="e_mail" name="e_mail" size="50" onclick="document.forms[0].e_mail.value = '';"><br><br>
	
	<h4>Are you 18 years of age or older?</h4>
	<input type="radio" name="preferences">Yes
	<input type="radio" name="preferences">No
	
	<h4>Positions interested in:</h4>
	<select name="available" size="7" onchange="moveOver();">
		<option>Server</option>
		<option>Host</option>
		<option>Food Runner</option>
		<option>Line Cook</option>
		<option>Manager</option>
		<option>Busser</option>
		<option>Event Coordinator</option>
	</select>
	
	<h4>Your Choices:</h4>
	<select name="choiceBox" size="7">
		<option></option>
	</select><br><br>
	
	<input type="button" value="Remove" onclick="removeMe();">
	
	</div>
	</form>
	
	</body>
	
</html>

As faroukmuhammad said, select requires option tags. If you post your JavaScript then I'm sure that I can help you find a work around.

Some things to keep in mind.

  • Do not use a XHTML doctype unless you are parsing XML data.
  • This means that <br /> become <br> and <input /> becomes <input> .
  • Instead of using paragraphs for headings, use the heading tag h1, h2, h3, h4, h5, or h6. It's what they're for and it helps screen readers.
  • I used the label tag, this is also useful for screen readers. But it requires that the value of the for attribute matches the ID attribute of the input. for=name id=name .
  • The single division tag is actually what is replacing all of the paragraph tags you had earlier. This is because inline elements: input, a, text. must be inside of a block-level element: div, p, hx (x meaning 1-6). List of inline elements. List of block-level elements.

If you have any questions or do not fully understand something, feel free to ask.

Regards
Arkinder

Edited by Arkinder because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.