HTML Guide
There’s an incomplete or incorrectly formed <meta> tag. The <meta> tag in HTML is used to provide metadata about the HTML document. This metadata is typically specified using attributes like charset, content, http-equiv, itemprop, name, and property.
To fix this issue, you need to ensure that your <meta> tags include at least one of these attributes. Here are some examples of properly formed <meta> tags with each of these attributes:
-
Using the charset attribute:
<meta charset="UTF-8">This specifies the character encoding for the HTML document, which is crucial for displaying text correctly in different languages.
-
Using the content and name attributes:
<meta name="description" content="A brief description of the webpage content.">This provides a description of the webpage content, which can be used by search engines.
-
Using the http-equiv and content attributes:
<meta http-equiv="refresh" content="30">This specifies information to be passed to the browser, such as refreshing the page every 30 seconds.
-
Using the property and content attributes:
<meta property="og:title" content="Your Webpage Title">This is used for Open Graph meta tags, which improve the appearance of shared content on social media platforms.
Correct Usage Example
Here’s an example of an HTML document with a properly formed set of <meta> tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the webpage content.">
<meta http-equiv="refresh" content="30">
<meta property="og:title" content="Your Webpage Title">
<title>Document</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>A <meta> element without a content, itemprop or property attributes has been found in an unexpected place.
Check its attributes and context - depending on the section of the document (<head> or <body>), the <meta> element allows different attributes.
A <meta> tag has been found that is missing its required content. Example of a valid meta tag:
<meta name="description" content="Description of the page" />A <meta> element without a itemprop or property attributes has been found in an unexpected place.
While the <meta> element is commonly used within the <head> section of the document, it can also be used within the <body> section, for example in the context of defining microdata, as in this example:
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>When used within the <body> section, the <meta> element is required to have a itemprop or property, and a content attribute, and it can’t have a http-equiv or charset attribute.
A common cause for this issue is including a <meta> element that was intended for the <head> section (for example one containing a http-equiv attribute in the <body> , for example:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<form>
...
</form>An HTML tag could not be parsed, most probably because of a typo.
<object> elements require both the data and type attributes to be valid according to W3C HTML specifications.
The <object> element is used to embed external resources, such as images, videos, PDFs, or other media—often for plugins or fallback content. The data attribute specifies the resource URL, while the type attribute describes its MIME type (such as "image/svg+xml" for SVG images, or "application/pdf" for PDFs). Supplying both attributes allows browsers and assistive technologies to correctly interpret and display the embedded content, ensuring accessibility and standards compliance.
Correct usage example:
<object data="example.pdf" type="application/pdf" width="600" height="400">
<p>Your browser does not support PDFs. <a href="example.pdf">Download the PDF</a>.</p>
</object>Incorrect usage examples (missing attributes):
<!-- Missing type attribute -->
<object data="example.svg"></object><!-- Missing data attribute -->
<object type="image/svg+xml"></object>Corrected example for embedding SVG:
<object data="image.svg" type="image/svg+xml"></object>To fix validator errors, always include both the data and type attributes in <object>.
Drop-down lists can be defined in HTML by using the <select> tag, containing the different <option>s. Each <option> must have a name, which can be either contained between <option> and </option>, or alternatively using the label attribute.
Example:
<select name="size">
<option value="s">small</option>
<option value="m" label="medium"></option>
</select>The picture element is used to provide multiple sources for an image depending on the viewport size or resolution of the device being used. It’s a container element that requires exactly one img child element, and zero or more source child elements inside.
The browser will consider each child <source> element and choose the best match among them. If no matches are found –or the browser doesn’t support the <picture> element– the URL of the <img> element’s src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
To fix this issue, add an img element inside the picture element with a src attribute pointing to the default image file that you want to display.
Here’s an example:
<picture>
<source srcset="example-large.jpg" media="(min-width: 800px)">
<source srcset="example-medium.jpg" media="(min-width: 450px)">
<img src="example-small.jpg" alt="Example">
</picture>In this example, we’ve added a default image img with the src attribute set to “example-small.jpg”. If none of the source elements match the device’s viewport size or resolution, this image will be displayed.
The async and defer boolean attributes of the <script> element control how an external script should be executed once it has been downloaded. The async attribute makes sense when an external script (defined with the src attribute) is loaded, or when defining a script of type module:
<script async src="app.js"></script>
<script async type="module">
/* JavaScript module code here */
</script>The charset attribute on a <script> element can be used to specify the character encoding of an external script, whose URL should be specified on the src attribute.
If the script is not external, then the charset attribute should not be used, as the character encoding of the HTML document will be used.
The defer and async boolean attributes of the <script> element control how an external script should be executed once it has been downloaded. These attributes only make sense when referring to external scripts, so a src attribute must also be present to specify the location of the script.
Example:
<script defer src="app.js"></script>If your script is not external, and is inlined within the HTML document, then you should remove the defer attribute, like in this example:
<script>
console.log("hello");
</script>A span element that conveys special meaning or interactive state must have appropriate ARIA attributes or role to be accessible and pass validation.
The span element is a generic inline container with no semantic meaning. To make it meaningful for assistive technologies (such as screen readers), ARIA attributes or a role attribute should be used when the element represents states, properties, or interactive features.
For example, in the following code the span is used to visually indicate a required field with an asterisk *, but it lacks additional semantic information:
<span class="required" aria-required="true"> *</span>To address this, add role="presentation" (to mark it as purely visual), or use aria-hidden="true" (to hide it from assistive technology), as the asterisk does not have semantic value for screen readers. Only use ARIA required (aria-required="true") on the form control (e.g., input), not on the decorative indicator.
Recommended HTML (decorative asterisk not announced):
<span class="required" aria-hidden="true">*</span>Alternative (if you want to announce “required”): Announce “required” with visually hidden text and use the actual aria-required="true" on the input.
<label for="name">
Name
<span class="required" aria-hidden="true">*</span>
<span class="visually-hidden">Required</span>
</label>
<input id="name" name="name" aria-required="true">This approach ensures accessibility, semantic correctness, and W3C HTML validation compliance.
The W3C HTML Validator issue indicates that your <td> element is missing one or more accessibility attributes: either aria-checked or role. These attributes are normally necessary when the cell content needs to convey a specific role or state, such as a checkbox.
If your td element should not act as a checkbox, you should reconsider the design. Ensure that only semantic roles and attributes appropriate for the content and functionality are used. If the misuse is identified due to incorrect implementation, revisiting and clearing the incorrect attributes might be required.
The <title> element, used to define the document’s title, is required and must not be empty.
Example:
<html>
<head>
<title>Automated Website Validator</title>
</head>
<body>
<p>...</p>
</body>
</html>An element is using ARIA attributes, but its role has not been defined. ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Examples:
<!-- This div uses ARIA but its role is not clear, so it's invalid. -->
<div aria-expanded="true">...</div>
<!-- This div defines clearly its role, so it's valid. -->
<div role="navigation" aria-expanded="true">...</div>
<!-- Nav elements have an implicit navigation role so we don't need the role attribute. -->
<nav aria-expanded="true">...</nav>The element X requires an attribute Y, but it’s not present. Check that element and add the required attribute, like in <X Y="value">.
The element X is not allowed as a child element of Y. For example, a <ul> element cannot have a <div> child element.
The <h1> through <h6> elements are headings for the sections with which they are associated. They should not be empty, for example <h1></h1> is invalid.
The W3C Validator issue “End of file seen and there were open elements” typically means that your HTML document has elements that were opened with start tags but were not properly closed with corresponding end tags before the end of the document. This results in improperly nested or unclosed tags, which can cause rendering issues in browsers and invalid HTML.
Steps to Fix the Issue
- Identify Open Elements: Check your HTML document for any elements that do not have matching closing tags.
- Properly Close Elements: Ensure that every opened tag has a corresponding closing tag.
Common Places to Check
- Nested Elements: Make sure all nested elements are properly closed inside their parent elements.
- Complex Structures: Pay special attention to complex structures like forms, tables, lists, etc., as they often have multiple nested elements.
Example: Fixing an Issue
Before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div>
<h1>Welcome to My Page
<p>This is a paragraph in a div.
</div>
<footer>
<p>Footer content here
Issues In This Example
- <h1> tag is not closed.
- <p> tag inside the div is not closed.
- <p> tag inside the footer is not closed.
After
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<div>
<h1>Welcome to My Page</h1>
<p>This is a paragraph in a div.</p>
</div>
<footer>
<p>Footer content here</p>
</footer>
</body>
</html>Explanation
- Closed the <h1> tag with </h1>.
- Closed the <p> tag inside the div with </p>.
- Closed the <p> tag inside the footer with </p>.
Tips for Preventing This Issue
- Use a Code Editor: Use a code editor with syntax highlighting and auto-completion to help you keep track of your open and closed tags.
- Validate as You Go: Regularly validate your HTML using the W3C Validator as you develop, to catch issues early.
- Indentation: Properly indent nested elements to make it easier to see opened and closed tags.
By following these steps, you can resolve the “End of file seen and there were open elements” error and ensure that your HTML is well-structured and valid.
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>An </a> end tag has been found to violate nesting rules. <a> tags 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 end tag </b> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <b> tag was closed before the nested <a> tag -->
<b><a href="#">link</b></a>
<!-- This line is OK as every end tag respects the nesting rules -->
<b><a href="#">link</a></b>The <br> tag inserts a line break, and it’s self-closing so you can use either <br> or <br/> but </br> is invalid.
As the <br> tag is a void element, it doesn’t need a closing tag, so <br> is preferred to <br/>.
First line<br>
Second line is also valid but discouraged.<br/>
Third line is invalid</br>An end tag </code> has been found violating nesting rules. Check other errors in the same document related to the <code> element, and fix the unallowed nested elements.
An end tag </em> has been found in an incorrect place within the document, violating nesting rules. A common case is closing it before closing other nested tags, for example:
<!-- This line is incorrect as the <em> tag was closed before the nested <a> tag -->
<em><a href="#">link</em></a>
<!-- This line is OK as every end tag respects the nesting rules -->
<em><a href="#">link</a></em>