HTML Guide
The attribute rows on a textarea element, when present, must be a positive integer.
The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form. Its attributes rows and cols allow to define the dimensions of the text area by respectively specifying the numbers of rows and columns.
Example:
<textarea name="comments" rows="5" cols="25">
It all works great!
</textarea>An empty sizes attribute on an img element is invalid; the attribute must contain a valid value or be omitted.
The sizes attribute specifies the slot width that the browser should use for selecting the appropriate image from those available in srcset. It should only be used when the srcset attribute is present. An empty string is not a valid value—if you do not have any sizes to specify, the attribute should be removed entirely.
Correct usage:
- Remove the empty sizes and srcset attributes if not needed.
- If specifying, provide valid values such as "100vw" or "(max-width: 600px) 100vw, 50vw".
Incorrect example:
<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1200w" sizes="" alt="">Corrected example (with a valid sizes value):
<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1200w" sizes="100vw" alt="">Illegal character “[” in the iframe src URL requires percent-encoding or removal.
The iframe element’s src must be a valid URL. According to URL syntax, characters like [ and ] are not allowed in the query unless percent-encoded. If your src contains array-like parameters (e.g., filters[category]=news), encode reserved characters: [ becomes %5B and ] becomes %5D. Avoid spaces and encode other reserved characters as needed. Alternatively, adjust the server to accept dot or bracketless notation (e.g., filters.category=news or filters_category=news) so the URL stays valid without encoding.
HTML Examples
Example causing the validator error
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Error</title>
</head>
<body>
<!-- [ and ] are illegal in URLs unless encoded -->
<iframe src="https://example.com/embed?filters[category]=news&filters[tags]=web"></iframe>
</body>
</html>Fixed example with percent-encoding
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe URL Fixed</title>
</head>
<body>
<!-- Encode [ as %5B and ] as %5D -->
<iframe src="https://example.com/embed?filters%5Bcategory%5D=news&filters%5Btags%5D=web"></iframe>
</body>
</html>An <iframe> element allows to embed an HTML document inside another HTML document, and its src attribute is indicated the source URL of the embedded web page. The src attribute is a required attribute, so it cannot be blank.
Example:
<iframe src="https://example.com/map.html"></iframe>A fragment identifier (the part after #) is not allowed in a data: URL used in an img src.
The img element accepts any valid URL in the src attribute, including data URLs per RFC 2397. However, RFC 2397 forbids fragment identifiers in data: URIs.
If you need to reference an internal fragment (e.g., an SVG symbol or id), use one of these approaches:
- Inline the SVG in the DOM and reference its ids normally.
- Put the SVG in a separate file and use a standard URL with a fragment (example.svg#icon).
- Remove the fragment from the data: URL and ensure the content renders without fragment navigation.
Square brackets in an img src query string must be percent-encoded to be valid.
The src attribute on img must be a valid URL. In URL query strings, characters like [ and ] are not allowed unescaped per URL syntax. When present (often from frameworks adding array-like params), they must be percent-encoded as [ -> %5B and ] -> %5D. Alternatively, remove brackets from the query or use a server-side/route format that avoids them.
HTML examples
Example causing the validator error
<img src="/images/photo.jpg?size[width]=300&size[height]=200" alt="Sample">Fixed example using percent-encoding
<img src="/images/photo.jpg?size%5Bwidth%5D=300&size%5Bheight%5D=200" alt="Sample">Fixed example by avoiding brackets in params
<img src="/images/photo.jpg?size_width=300&size_height=200" alt="Sample">The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.
The src attribute for <img> tags is required, to define the source of the image, like in this example:
<img src="photo.jpg" alt="wombat" />Ensure the src attribute on the script element is non-empty and points to a valid resource.
The src attribute in a script element specifies the URL of an external script file. An empty src attribute is invalid because it tells the browser to fetch a resource from a URL that is not provided, leading to loading errors. Instead, ensure that the src attribute contains a valid file path or URL to an existing script file. If the script content is meant to be inline, you should omit the src attribute altogether and include the script content directly within the script element.
Example of a Valid External Script
Here is a valid example of a script element with a non-empty src attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid Script Example</title>
</head>
<body>
<script src="path/to/script.js"></script>
</body>
</html>Example of a Valid Inline Script
If the script is to be written inline, exclude the src attribute and write the JavaScript code directly within the script tags:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline Script Example</title>
</head>
<body>
<script>
console.log('This is an inline script.');
</script>
</body>
</html>Troubleshooting
Double-check the script’s file path:
- Ensure the file path you provide in the src is correct relative to the HTML file.
- Make sure the script file exists in the location specified.
- If using a network URL, verify that the URL is correct and accessible.
An empty src attribute on a source element is invalid; it must contain a valid non-empty URL.
The source element is typically used within audio or video elements to specify multiple media source files. The src attribute defines the path to the media file, and it must not be empty, as per the HTML standard.
Incorrect Example:
<video controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>Corrected Example:
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Always ensure the src attribute on source is present and contains a valid, non-empty URL.
Replace square brackets in srcset URLs or percent-encode them.
The img element’s srcset expects valid URLs for each image candidate. According to the URL Standard, unescaped square brackets are not allowed in the path or query of an HTTP(S) URL used in HTML attributes like srcset. They must be either removed, replaced, or percent-encoded.
- Use safe characters in query parameters (e.g., hyphens or underscores instead of brackets).
- If brackets must remain for backend reasons, percent-encode them: [ -> %5B, ] -> %5D.
- Ensure each image candidate follows the URL [whitespace] descriptor pattern (e.g., 2x, 300w) with commas separating candidates.
HTML examples
Example causing the error
<img
src="image.jpg"
srcset="image.jpg?size=[small] 1x, image@2x.jpg?size=[large] 2x"
alt="Sample">Corrected example (encode brackets)
<img
src="image.jpg"
srcset="image.jpg?size=%5Bsmall%5D 1x, image@2x.jpg?size=%5Blarge%5D 2x"
alt="Sample">Corrected example (avoid brackets)
<img
src="image.jpg"
srcset="image.jpg?size=small 1x, image@2x.jpg?size=large 2x"
alt="Sample">srcset contains candidates without a width descriptor while sizes is present, so each candidate must use a width (w) descriptor.
When an img has sizes, every srcset candidate must include a width descriptor like 320w, not a pixel density descriptor like 1x. Mixed descriptors are not allowed in the same srcset. Use either:
- Width descriptors with sizes (e.g., 320w, 640w, 1024w)
- Density descriptors without sizes (e.g., 1x, 2x)
The browser uses sizes to map CSS layout width to the best w candidate. Without sizes, density (x) can be used, but not together with sizes.
HTML examples
Reproduce the issue (invalid: sizes + x descriptors)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Fix using width descriptors with sizes (valid)
<img
src="photo-640.jpg"
srcset="photo-320.jpg 320w, photo-640.jpg 640w, photo-1280.jpg 1280w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Sample photo">Alternative fix: remove sizes and use density descriptors (valid)
<img
src="photo-640.jpg"
srcset="photo-640.jpg 1x, photo-1280.jpg 2x"
alt="Sample photo">The sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images. When this attribute is present, all image candidates must specify its width.
The tabindex attribute expects a valid integer value, not an empty string.
This attribute allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the Tab key) and determine their relative ordering for sequential focus navigation.
This attribute accepts an integer value, where:
- A negative value means the element is not reachable via sequential keyboard navigation.
- A value of 0 means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values. The focus navigation order of these elements is defined by their order in the document source.
- A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, tabindex="4" is focused before tabindex="5" and tabindex="0", but after tabindex="3".
The target attribute on <a> elements can’t be blank.
This attribute defines the browsing context for links, that is, where should the linked documents be opened. This was used extensively on the now deprecated <frame> element, so you could give the name of the frame to open the document in, but is now more used to force links to open in a separate tab or window using target="_blank". Another option is using a name, so the new browsing context can be referred to on subsequent clicks on links with the same target.
For example, this will force the links to open on a new tab:
<a href="https://example.com" target="_blank">will open a blank tab</a>Empty target on an <area> element is invalid; it must be a named browsing context (at least one character) or a valid keyword like _self, _blank, _parent, or _top.
The target attribute on hyperlinked elements such as <a> and <area> controls where to open the linked resource. It accepts either a named browsing context (e.g., target="mapFrame") or one of the standard keywords: _self (default, same frame/tab), _blank (new tab/window), _parent, or _top. An empty string "" is not allowed and causes validation errors. Choose the appropriate keyword or remove target if default behavior is desired. If you need to direct links to a specific frame or iframe, use a non-empty name and ensure the frame has a matching name attribute.
HTML Examples
Invalid example (reproduces the error)
<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
<area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="">
</map>Fixed examples
<!-- Use a valid keyword -->
<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
<area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="_self">
</map><!-- Or remove target to use default behavior -->
<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
<area shape="rect" coords="10,10,100,60" href="/about" alt="About">
</map><!-- Or target a named iframe -->
<iframe name="mapFrame" src="about:blank" title="Content frame"></iframe>
<img src="plan.png" usemap="#site-map" alt="Site map">
<map name="site-map">
<area shape="rect" coords="10,10,100,60" href="/about" alt="About" target="mapFrame">
</map>Empty type attributes are invalid on the <a> element; you must either remove the type attribute or provide a valid MIME type value.
The type attribute on an <a> (anchor) element specifies the MIME type of the linked resource. According to the WHATWG HTML specification and W3C validator, the value of the type attribute cannot be an empty string. It should be a valid MIME type, such as application/pdf or text/html. If you do not know the MIME type or it’s not relevant, you should omit the attribute.
Incorrect HTML example (causes validation error):
<a href="document.pdf" type="">Download PDF</a>Correct HTML example (remove the invalid attribute):
<a href="document.pdf">Download PDF</a>Correct HTML example (provide a valid MIME type):
<a href="document.pdf" type="application/pdf">Download PDF</a>If the type is unknown or unnecessary, leaving it out is preferred to using an empty value.
The attributes width and height of <iframe> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.
The attributes width and height of <img> elements expect a non-negative integer, so an empty string is not allowed. Either define the correct dimension, or remove this attribute.
Ensure the xmlns attribute for <svg> elements is set to “http://www.w3.org/2000/svg”.
In HTML documents, the xmlns attribute in an <svg> element must be defined correctly. The xmlns attribute specifies the XML namespace for an SVG element, which should always be “http://www.w3.org/2000/svg”. If you receive a validation error indicating a bad value for xmlns, it means that the attribute is empty or incorrectly set. This namespace ensures that the SVG elements are properly recognized as SVGs by the browser and aids in maintaining proper structure and function.
Here’s a correct example of an <svg> element:
<!DOCTYPE html>
<html lang="en">
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</body>
</html>Ensure that every <svg> element you use includes the xmlns attribute with the correct value to avoid validation issues and ensure complete browser compatibility.
The value group is not a valid value for the role attribute on an li element according to the W3C HTML specification.
The role attribute defines the semantic purpose of an element for assistive technologies. Common valid ARIA roles for li elements are listitem, not group. The role group is intended for container elements such as ul, ol, or div when grouping related widgets, not for individual list items.
To fix this, remove the role="group" attribute from the li element.
Incorrect:
<ul>
<li role="group">Item 1</li>
<li role="group">Item 2</li>
</ul>Correct:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>For most cases with HTML lists, native semantics suffice and no role attribute is needed for li.
The value highest is not valid for the fetchpriority attribute on a link element; valid values are auto, high, and low.
The fetchpriority attribute is used to inform the browser about the relative priority of resource fetching, such as stylesheets or preloads. According to the WHATWG HTML standard and the W3C validator, only the values auto, high, and low are permitted. Using an invalid value like highest will trigger a validation error.
Correct usage:
- fetchpriority="high": Resource is prioritized for early fetching.
- fetchpriority="low": Resource is fetched with lower priority.
- fetchpriority="auto": Browser chooses the priority.
Incorrect example:
<link rel="preload" href="style.css" as="style" fetchpriority="highest">Corrected example:
<link rel="preload" href="style.css" as="style" fetchpriority="high">Minimal valid HTML example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="preload" href="style.css" as="style" fetchpriority="high">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>Replace highest with high, low, or auto to resolve the validation error.
The href attribute on an a tag expects a valid URL, but only http(s):// was found.
Use xmlns="http://www.w3.org/1999/xhtml", not http://www.w3.org/1999/html.
The xmlns attribute specifies the XML namespace. For XHTML documents, the only valid value is http://www.w3.org/1999/xhtml. Using http://www.w3.org/1999/html is incorrect and causes validation errors. For regular HTML5 (not XHTML), you do not need the xmlns attribute at all.
Correct XHTML Example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>XHTML Example</title>
</head>
<body>
<p>Hello, XHTML world!</p>
</body>
</html>Correct HTML5 Example (no xmlns attribute):
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Example</title>
</head>
<body>
<p>Hello, HTML5 world!</p>
</body>
</html>For XHTML, always use xmlns="http://www.w3.org/1999/xhtml". For regular HTML5, omit the xmlns attribute.
Only http://www.w3.org/1999/xhtml is allowed as the value for the xmlns attribute in HTML5 documents.
The xmlns attribute specifies the XML namespace of an element and is mainly used with XHTML documents. For HTML5, the correct value is http://www.w3.org/1999/xhtml, and typically you don’t need to include the xmlns attribute at all unless you are serving your document as application/xhtml+xml (XHTML). Using the http://www.w3.org/TR/REC-html40 value is invalid and will trigger validator errors.
Correct code for a standard HTML5 document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Valid HTML5 Example</title>
</head>
<body>
<!-- Page content -->
</body>
</html>If you are using XHTML and need the namespace:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Valid XHTML Example</title>
</head>
<body>
<!-- Page content -->
</body>
</html>For HTML5, simply remove the xmlns attribute or, if serving as XHTML, ensure the value is exactly http://www.w3.org/1999/xhtml.