HTML Guide
Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:
<table style="width:100%;">
<tr>
<td style="width:50px;">Name</td>
</tr>
</table>You’re using an attribute X that is no longer valid for element Y, but you can use CSS to achieve the same effect.
Based on the content of the document, the W3C Validator has determined that it’s written in Arabic, and it suggests you specify the direction of text from right to left like this:
<html dir="rtl" lang="ar">Based on the content of the document, the W3C validator thinks that it’s written in English. Consider explicitly specifying the language using the lang property.
Example:
<html lang="en">Based on the content of the document, the W3C validator thinks that it’s written in English, but the lang property in the <html> element specifies a different language. Check the language of the document, if it matches the lang property you can safely ignore and mute this warning.
Example:
<html lang="fr">Based on the content of the document, the W3C validator has determined that the main language doesn’t match the one specified in the lang property of the <html> tag. Check the language of the document, if it matches the lang property you can safely ignore and mute this warning.
This validation issue indicates that your HTML document does not specify a language for its content. Specifying the document’s language is important for accessibility, search engines, and browser behavior.
To fix this, you need to add the lang attribute to the <html> element, indicating the primary language of the document. For example, if your document is written in Spanish, you should set the lang attribute to "es".
Here’s how to do it:
Original HTML (without lang attribute)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mi Sitio Web</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo en español.</p>
</body>
</html>Updated HTML (with lang attribute)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Web</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo en español.</p>
</body>
</html>Explanation
- The lang="es" attribute specifies that the primary language of the document is Spanish.
- Setting the lang attribute helps screen readers and other assistive technologies to better interpret the content.
- It also provides crucial information for search engines and browsers, improving the accessibility and search engine optimization (SEO) of your website.
If you need to specify a regional variation of Spanish, you can use values like lang="es-ES" for Spanish as used in Spain, or lang="es-MX" for Spanish as used in Mexico.
Example with Regional Variation
<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<title>Mi Sitio Web</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo en español de México.</p>
</body>
</html>By adding the lang attribute with the appropriate value, you’ll resolve the W3C HTML Validator issue.
Void elements, like area, base, br, col, embed, hr, img, input, link, meta, source, track, and wbr are self-closing and don’t need a trailing slash /, which should be avoided as that can interfere with unquoted attribute values.
These void elements can optionally have a trailing slash and some people prefer to include it as it may look clearer. Some HTML formatters integrated in code editors automatically add a trailing slash to void elements.
So for example, both <hr> and <hr/> are valid self-closing void elements. However, when combined with unquoted values for attributes, the trailing slash can be problematic.
In this example, the img element takes http://example.com/logo.svg as the value its src attribute.
<img alt=SVG src=http://example.com/logo.svg>But in the following example with a trailing slash, the img element takes http://example.com/logo.svg/ as the value its src attribute. That is, the trailing slash has been parsed as part of the value for the src attribute, which breaks the display of the image.
<img alt=SVG src=http://example.com/logo.svg/>In short, this HTML warning makes you aware of this problem. When possible, it’s recommended to avoid trailing slashes in void elements.
A <span> tag has not been closed. Example:
<p><span>I'm forgetting something</p>
<p>Life goes on</p>An open tag has not been properly closed.
Specify the language of your HTML document using the lang attribute on the <html> element instead of using a <meta> tag for the language.
The HTML5 standard encourages specifying the primary language of a document using the lang attribute on the <html> element. The lang attribute should be set to a valid language code, such as en for English or fr for French. Using a <meta> tag to declare the document language is considered obsolete because the <meta> tag cannot convey element-specific language information. The lang attribute is more versatile and directly associates the language with the HTML document structure itself. This approach aligns better with accessibility requirements and helps user agents understand and render the content appropriately.
Here is how you should specify the language using the lang attribute:
Correct usage with lang attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document with Language Specification</title>
</head>
<body>
<p>This document is written in English.</p>
</body>
</html>Incorrect usage with <meta> tag:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en">
<title>This usage is considered outdated</title>
</head>
<body>
<p>This should not be done in HTML5.</p>
</body>
</html>By defining the language with the lang attribute directly in the <html> tag, you improve the document’s compliance with modern standards and enhance the accessibility and internationalization aspects of your web content.
Mismatch between the declared character encoding and the actual encoding confuses browsers and validators, and can cause character display issues.
The charset declaration in the meta tag should match the actual character encoding of your HTML file. Declaring "iso-8859-1" but saving the file as "windows-1252" (or vice versa) creates a conflict, since these encodings are similar but not identical. Moreover, UTF-8 is the recommended encoding for web documents, widely supported and preferable for modern websites.
To resolve the issue:
- Decide which character encoding your HTML file should use.
- Save your document with that encoding in your text editor or IDE.
- Ensure your HTML declares the same encoding using the meta tag in the <head> section.
Example using UTF-8 (recommended):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>If you specifically want iso-8859-1:
- Save the file as iso-8859-1 in your editor.
-
Declare it in your HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>ISO Example</title> <meta charset="iso-8859-1"> </head> <body> <p>Bonjour, monde !</p> </body> </html>
Make sure your editor does not save the file as windows-1252 if you declare iso-8859-1 in your HTML. For best compatibility, use UTF-8 for both saving and declaring the document encoding.
Elements that have the xml:lang attribute also need a matching lang attribute. In HTML5 documents, using just the lang attribute is enough.
Check the HTMLImageElement.srcset guide to learn about the correct usage of the srcset and sizes attributes.
Attribute values for HTML elements must be enclosed within quotes. Check for attributes whose values are missing quotes.
Example:
<!-- These are invalid -->
<div class=important></div>
<div class=important"></div>
<!-- This is valid -->
<div class="important"></div>The X-UA-Compatible meta tag or HTTP header value must be set to IE=edge instead of IE=10 for modern browser compatibility.
The X-UA-Compatible HTTP header or <meta http-equiv="X-UA-Compatible"> element instructs Internet Explorer which document mode to use. Setting it to IE=10 forces the page into IE10 rendering mode, which is outdated and may cause issues with modern web standards. The recommended value is IE=edge, which tells IE to use the highest supported mode available, ensuring the browser uses the latest standards.
Example of the correct <meta> tag for compliance:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct X-UA-Compatible Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<!-- Page content -->
</body>
</html>Remove any instance like IE=10 and replace with IE=edge to resolve the validator issue.
Setting the X-UA-Compatible HTTP header with the value IE=edge,chrome=1 is non-standard; it should be set to IE=edge only.
The X-UA-Compatible header is used to specify how Internet Explorer should render a webpage. It allows web developers to opt into the latest standards mode in IE, thus ensuring better compatibility and performance by avoiding compatibility modes that simulate older browser versions. Setting it to IE=edge tells IE to use the highest mode available, which is the most standards-compliant mode the browser supports. The additional ,chrome=1 directive was used for a Google Chrome Frame feature, which is now deprecated and should not be used in modern webpages.
To ensure your HTML document meets the W3C standards, you must remove ,chrome=1 and just have the IE=edge value. Here’s how you can properly set the X-UA-Compatible header:
- In HTML Meta Tags: Ensure your meta tag within the HTML document head is correctly written.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My Web Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>- In HTTP Headers: If you’re setting the X-UA-Compatible via server configuration, for example in an .htaccess file (for Apache), ensure it’s configured without the ,chrome=1.
# .htaccess example
<IfModule mod_headers.c>
Header set X-UA-Compatible "IE=edge"
</IfModule>Correctly setting this ensures that your page is rendered with the most up-to-date rendering engine, enhancing compatibility and performance across modern web standards.