HTML Checking for Large Sites

The id attribute of an HTML element, used to identify the element when linking, scripting or styling, must be unique in the whole document and must not contain whitespace.

Technically, in HTML5, the value for an id attribute may contain any character, except whitespace characters. However, to avoid inadvertent errors, only ASCII letters, digits, _, and - should be used and the value for an id attribute should start with a letter.

Learn more:

• MDN: the id global attribute

The pattern attribute is only allowed on input whose type is email, password, search, tel, text or url. Check the type used, and consider changing to one of the allowed types to enable pattern client-side validation.

The pattern attribute is a handy way of adding client-side validation on HTML forms without resorting to JavaScript. Check out this article to learn more about Input Pattern.

The value contact is not a valid option for the autocomplete attribute on an <input> element.

Learn more:

• HTML Spec: autocomplete

All HTML elements may have the hidden boolean attribute set. When specified on an element, it indicates that the element is not yet, or is no longer, relevant, so browsers won’t render it.

Boolean attributes don’t accept values, its presence represents the true value and its absence represents the false value.

<!-- This is invalid because the hidden attribute should not have a value set -->
<div hidden="false"></div>

<!-- The correct way to hide a div is like this -->
<div hidden>This will be hidden</div>

<!-- And to show the element, we just don't hide it -->
<div>This won't be hidden</div>

Read more:

• HTML Spec: the hidden attribute
• HTML Spec: boolean attributes

An <a> element has been found with an invalid href attribute, containing more than one # adjacent character.

The # is used to separate the fragment part of an URI (typically used to indicate a section within a document). For example, this is a valid link to a URI containing a fragment:

<a href="https://example.com/faqs#pricing">pricing</a>

The next example is invalid because it contains two adjacent # characters, so that the fragment part would be #pricing instead of pricing:

<a href="https://example.com/faqs##pricing">pricing</a>

Learn more:

• Wikipedia: URI fragment

The href attribute of an <a> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

Learn more:

• Wikipedia: percent-encoding

The id attribute is used to identify a single element within a document, it’s not required, but if used it must be unique, and must not be an empty string.

IDs for HTML elements can’t be blank.

The src attribute on an <img> element contains an invalid character, that should be properly encoded as a URI percent-encoded character.

Learn more:

• Wikipedia: percent-encoding

The only permitted value for the xmlns attribute is http://www.w3.org/2000/svg.

The namespace declaration for an <svg> element is provided by the xmlns attribute like this:

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- more tags here -->
</svg>

Although using https in the URL looks like it’s going to be more secure, in fact this URL is not used to connect it to, only to declare the namespace.

Learn more:

* MDN: Namespaces crash course

<a> tags can be used to link to an email address using the mailto protocol in the href attribute. Ensure that there is no space in the email address.

<a href="mailto: liza@example.com">This is wrong as it contains an space</a>

<a href="mailto:liza@example.com">This is OK</a>

The <label> element represents a caption in a document, and it can be associated with a form input using the for attribute, which must be an ID. Document IDs cannot contain whitespace.

Example:

<form>
  <label for="user_name">Name</label>
  <input type="text" id="user_name" />
</form>

Learn more:

• MDN: label
• HTML Spec: the label element

The at symbol (@) should be percent-encoded as %40 in order to include it at an href attribute.

The media attribute on a <link> element has not been recognized.

This attribute specified what media the linked resource is optimized for. As an example, the following will link a general stylesheet, and a specific one for printing:

<head>
  <link rel="stylesheet" type="text/css" href="general.css">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

Valid values for this attribute include:

all. Default, used for all media. print. Used for printers and print previews. * screen. Used for computer, tablets or smartphone screens.

Learn more:

* W3: Media Type

The value provided on the type attribute of an a element is not a valid MIME type.

The type attribute expects a MIME type that hints at the linked URL’s format.

Read more:

• MDN: type attribute on a
• MDN: common MIME types

The type attribute on <a> elements, when present, gives a hint on the MIME type of the linked resource, for example:

<a href="application/pdf" src="book.pdf">Read our book</a>
<a href="image/jpeg" src="photo.jpeg">See a photo</a>

That is, we’re talking about the type of the linked resource, not the type of the <a> element, as it’s sometimes misunderstood. The following example is invalid because button is not a valid MIME type.

<a href="/order.php" type="button">Submit</a>

Learn more:

• HTML Spec: the type attribute

The value used to define the type of a link is not valid. You’re probably using a URL instead of a valid type.

Example of a valid type:

<link rel="icon" type="image/png" href="favicon.png">

Read more:

• HTML Spec: link types

The id attribute is used to identify a single element within a document, and is required to be unique. Check the document for repeated IDs.

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/)

Element IDs in an HTML document must be unique. The HTML validator is indicating the first occurrence of an ID that is repeated. Check the details for that issue to see web pages affected, and the elements within them, to fix that ID repetition.

In the days before HTML5, named anchors were used as a way to provide a link to a specific section of a document, for example:

<h2>
  <a name="section-5">Section 5</a>
</h2>

Now in HTML5, the name attribute is obsolete for <a> tags, and instead, you can use the id attribute of any element (not just <a>) as a way to navigate directly to it, for example:

<h2 id="section-5">Section 5</h2>

Read more about:

• W3C: name attribute is obsolete

The <option> element no longer accepts a name attribute, which is now obsolete.

Example:

<select id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
</select>

Learn more:

* MDN: option element

<label> tags are used to label inputs in form, which need to be present and visible in the document, for example:

<label for="age">Age</label>
<input id="age" />