HTML Guide
The W3C HTML Validator issue “Misplaced non-space characters inside a table” usually occurs when there are text nodes (or other elements) that are not properly placed within table elements. In HTML, all text content should be contained within table cells.
How to Fix the Issue
To resolve this issue, ensure that all text content is placed inside <td> or <th> elements, which are the valid child elements of <table>, <tr>, and related elements. Here’s how you can identify and fix the issue:
Example of Incorrect Table Structure
<table>
<tr>
Hello World <!-- This is misplaced content -->
<td>First Cell</td>
<td>Second Cell</td>
</tr>
</table>Corrected Table Structure
<table>
<tr>
<td>Hello World</td> <!-- All text should be inside <td> or <th> -->
<td>First Cell</td>
<td>Second Cell</td>
</tr>
</table>Guidelines
-
Text Content: Ensure that all text (including any headers or titles) is wrapped in <td> (for data cells) or <th> (for header cells). Keep in mind that event the non-breaking space character ( ) counts as text.
-
Table Structure: Remember a typical structure for a table includes <table> containing one or more <tr> elements, which in turn contain the <td> or <th> elements.
-
No Direct Text Nodes: Avoid having any direct text nodes outside of the cell elements within the table.
An end tag </p> has been found that cannot be matched for an opening tag <p>. Most of the times this is due to closing the same tag twice, for example:
<p>some text</p></p>Attributes in HTML elements need to be separated by space, in this example the first line is invalid and the second one is valid:
<a href="page.php"class="big">link</a>
<a href="page.php" class="big">link</a>And end tag for element X has been found with no corresponding opening tag for it. Most of the times this is due to closing the same tag twice.
Rocket Validator checks HTML on your sites using the latest version of W3C Validator Nu HTML Checker, which is intended for HTML5 documents.
The page scanned is using an obsolete doctype, instead of the expected <!DOCTYPE html>.
When specifying a numeric value for a CSS property, remember to always include the units, like 3px or 3em. Only the 0 value can go without units, and instead of 0px you can just use 0.
The aria-label attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. This attribute does not work consistently with all HTML elements, so the W3C validator is warning about a possible misuse.
Quote characters used for attributes can use either single quotes (') or double quotes ("), and they must be properly matched, for example:
<p class="news">...</p>A common cause for this issue is forgetting to use the equal sign (=), so the HTML parser wrongly believes the quote forms part of the attribute name, for example:
<p class "news">this is wrong</p>The web page could not be validated because it took too long for the remote server to respond.
A table row tr has been found, containing no td cells. Check the table and remove empty rows.
Table contents is organized in rows using the <tr> element, which must contain cells using the <td> element, as in this example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Liza</td>
<td>12</td>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</tbody>
</table>A tr with no td cells on it will raise an issue, as in this example:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
<td>Jimmy</td>
<td>14</td>
</tr>
</tbody>
</table>Note that self-closing <tr/> elements also count as empty rows as are like <tr></tr>.
An end tag has been found after the closing </body> tag, which breaks the expected HTML document structure.
Check out the document structure, a basic example follows:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>Attributes for HTML elements must be defined like name="value". The name may be missing before the =.
Some examples:
<!-- Missing equal sign -->
<p name "value"></p>
<!-- Missing space before the attribute -->
<pname "value"></p>A < character has been found when an attribute was expected instead. Check the syntax of the affected tag, it’s probably malformed and a < character inside has been interpreted as an attribute.
For example, this code might cause this issue:
<!-- Malformed img tag -->
<img src="photo.jpg" alt="smiling cat" < />
<!-- Fixed img tag -->
<img src="photo.jpg" alt="smiling cat" />A tag starting with <? has been found within the document, but it’s not supported. Probable causes can be:
- Copy-pasting the contents of an SVG file. If you do that, you should only paste the <svg>...</svg> part, but not the first line with <?xml...>.
- Unprocessed <?...> tags on server scripting languages like PHP, like <?php>
Learn more:
- [freeCodeCamp: How to Use SVG Images in CSS and HTML]https://www.freecodecamp.org/news/use-svg-images-in-css-html/)
Attributes for HTML elements must be defined like name="value". A common issue is missing the =, or repeating the " like in these examples:
<!-- Missing equal sign -->
<p name "value"></p>
<!-- Repeated quotes -->
<p name="value""></p>Nested comments are not allowed in HTML. When you place an opening comment tag <!-- within an existing comment, it causes a parsing error.
To fix this issue, you should avoid nesting comments. If you need to include multiple comments in your HTML code, you can separate them or consider alternative ways to convey the information without nested comments.
Here’s an example of a nested comments, which is not allowed in HTML:
<!-- This is a valid comment -->
<!-- This <!-- is not allowed --> nested comment -->To fix the nested comment issue, you can rewrite the comments like this:
<!-- This is a valid comment -->
<!-- Avoid nesting comments and provide comments separately -->
<!-- Another comment here --> The <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:
<h1>All about guitars</h1>
<section>
<h2>Guitar types</h2>
<p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
<h2>Amplifiers</h2>
<p>Analog, digital, portable...</p>
</section>A slash character (/), normally used for self-closing tags, has been found in an unexpected place for a tag, and the validator has decided to ignore it and treat is as a start tag instead.
HTML tags can go in pairs (start tag, end tag) or be self-closing, for example:
<p>This is a paragraph with a start and end p tag</p>
<img src="image.jpg" alt="This is an image with a self-closing tag" />In HTML5, the ending slash and the preceding space is optional for self-closing tags so all of these are valid:
<img src="image.jpg" alt="This is an image with a self-closing tag" />
<img src="image.jpg" alt="This is an image with a self-closing tag"/>
<img src="image.jpg" alt="This is an image with a self-closing tag">A common mistake is including a slash tag on a start tag, as in the following example. If the Nu HTML checker encounters that, it will ignore the slash and just treat the tag as a start tag.
<select />
<option value="1">one</option>
</select>An <a> tag can’t include other <a> tags inside. Most probable cause is an unclosed <a> tag, like in this example:
<a href="one.html">Page 1
<a href="two.html">Page 2</a>An <a> element has been found in an invalid place within a <table> element.
For example, the following code would cause this issue:
<table>
<tr>
<a href="#">link</a>
</tr>
</table>Instead, the <a> element should be inside a <td> element, as a <tr> can’t hold content directly:
<table>
<tr>
<td>
<a href="#">link</a>
</td>
</tr>
</table>An opening <body> tag has been found in an incorrect place. Check that it appears only once in the document, right after the closing </head> tag, and that the whole document content is contained within <body> and </body> tags.
A <button> tag can’t include other <button> tags inside. Most probable cause is an unclosed <button> tag, like in this example:
<button>Submit
<button>Cancel</button>An opening <head> tag has been found in an incorrect place. Check that there’s only a <head> tag in the document.
This issue can happen because the expected closing tag </head> was misspelled as <head>, as in this example:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<head>
<body>
</body>
</html>Or, it could happen because another <head>...</head> section was nested inside a previous one:
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<head>
</head>
</head>
<body>
</body>
</html>HTML documents are expected to start with a first line containing the Document Type Declaration, that defines the HTML version used. Since HTML5, it’s just <!DOCTYPE html>, which must appear before the start <html> tag.
Here’s an example of a minimal HTML5 document:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>All HTML documents must start with a <!DOCTYPE> (Document Type Declaration), that informs browsers about the type and version of HTML used to build the document. In HTML5, this is simply <!DOCTYPE html> and must appear at the start of the document.
Here is an example of a minimal HTML document, including the Document Type Declaration at its start:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p></p>
</body>
</html>