HTML Guide
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.
The <!DOCTYPE html public "-//W3C//DTD HTML 4.0 Transitional//EN"> doctype triggers quirks mode in modern browsers and is not compliant with HTML5 standards.
The HTML5 specification requires the use of a simple doctype declaration, which ensures standards mode rendering. The correct doctype is <!DOCTYPE html>, which must appear at the very top of every HTML5 document. Legacy doctypes like HTML 4.0 Transitional are obsolete for modern web development and can cause inconsistent browser behavior.
Example of correct usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid HTML5 Doctype Example</title>
</head>
<body>
<p>Your content here.</p>
</body>
</html>Replace any legacy or malformed doctype with the above declaration to conform to current HTML standards.
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/)
Ensure to escape unescaped angle brackets by using < for < and > for > in HTML.
HTML documents may contain special characters where using the raw characters could lead to errors or misinterpretation by the browser. This is common with angle brackets < and >, which are used for delimiting HTML tags. If these characters are used in textual content or mistakenly typed in an unintended manner, it can cause issues, such as unexpected tag closure or rendering problems.
In your case, the W3C HTML Validator has detected an occurrence of the characters </> which might actually be intended as a simple display of these symbols, but are misinterpreted as an incomplete HTML tag. To prevent such issues, you should escape these characters using HTML character entities like < for the less-than sign and > for the greater-than sign.
Example:
You might want to display code or a message like This is the “<tag>” example in your HTML content. The direct use of < and > can break the HTML content. Instead, use:
<p>This is the "<tag>" example.</p>If you are trying to display the stand-alone sequence </>, you should use:
<p>Saw “</>”</p>These replacements ensure the validator processes your HTML correctly without mistaking your intended display content for HTML coding errors.
A U+0000 character (the null character) is not allowed anywhere in HTML documents according to the W3C and WHATWG HTML standards.
Browsers treat the null character as invalid and ignore it, but its presence may indicate a copy/paste problem, text encoding corruption, or an editor issue. U+0000 should be completely removed from the HTML source. Search for and delete any occurrence of this character in your file.
Example of invalid code containing U+0000 (represented as \0 below for clarity):
<p>This is some text with a null character here:\0</p>Correct, valid example with the null character removed:
<p>This is some text with a null character here:</p>Ensure there are no null characters in the HTML document by searching for \0, U+0000, or using your editor’s “show hidden characters” feature. Save the cleaned HTML and revalidate.
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 <br> element has been found in an invalid place within a <table> element.
For example, the following table has an invalid <br> between two <tr>, but the <br> that appears inside a <td> is valid.
<table>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
<!-- The following br is invalid -->
<br>
<tr>
<td>Book</td>
<td>
<!-- The br in the following line is valid -->
Title: HTML & CSS<br>
Author: John Duckett
</td>
</tr>
</table>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>An end tag for X has been found that does not correspond to a previous open tag. This usually happens when you close the same tag twice, for example:
<ul>
<li>item</li>
</ul>
</ul>