HTML Guide

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>

The value used in the height attribute on element iframe is not a valid integer. Remove any leading or trailing spaces from the attribute value.

Here’s an example:

<iframe width="560" height="315" src="your-video-link" frameborder="0" allowfullscreen></iframe>

<video> elements accept a height attribute to specify the width in CSS pixels. This value can only be an integer, it should not contain units or %. If you need to specify a percentage width, you can do that with CSS.

Here’s an example of setting width and height on a video element.

<video controls width="640" height="480">
  <source src="/media/cc0-videos/flower.webm" type="video/webm">
</video>

The W3C HTML Validator issue you encountered indicates that the URL provided in the href attribute of an anchor (<a>) element is not formatted correctly.

How to Fix the Issue

• Check the Protocol: For a valid URL, make sure that after https: there are two slashes (//).
• Update the URL: Correct the URL format to include the missing slash.

Example of Incorrect HTML

Here is an example of the code that would trigger the validation error:

<a href="https:/example.comf">Example</a>

Corrected HTML

Here’s how the corrected code should look:

<a href="https://example.com">Example</a>

Summary

Make sure that all URLs within href attributes are correctly formatted with both slashes following the protocol (https:// or http://).

Hash (#) characters can be used in an href attribute to link to a specific part of a document.

For example, if we have this page with several sections, each of them marked with an ID:

<h1>Frequently Asked Questions</h1>

<h2 id="pricing">Pricing</h2>
<p>All about pricing...</p>

<h2 id="terms">Terms</h2>
<p>You can find our terms at...</p>

<h2 id="guarantee">Guarantee</h2>
<p>We offer a guarantee...</p>

You can link to a specific part of that document, for example if this page URL is /faqs and you want to link to the Guarantee section you could use:

<a href="/faqs#guarantee">Guarantee</a>

Or, if you’re linking from inside the same document, for example in a table of contents, you could just use:

<a href="#guarantee">Guarantee</a>

As there can only be one fragment in an URL, the # character should only be used once. The following would be an invalid href:

<a href="/faqs#guarantee#pricing">Bad</a>

If needed, the # could be encoded as %23.

Space characters are not allowed in href attributes. Instead, they should be converted to %20. In this example, the first line is invalid and the second is valid:

<a href="https://example.com#some term">invalid</a>
<a href="https://example.com#some%20term">valid</a>

The href attribute on an <a> tag contains an space, which is not allowed. Consider replacing space characters with “%20”.

The href attribute on an element <a> contains a character that is not allowed, and should be encoded.

Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.

The attribute value in the href on the <a> element contains invalid characters.

HTML links require a valid URL as the value of the href attribute. Brackets ([, ]) are not allowed in attribute values.

Example of invalid usage:

<a href="mailto:[user@example.com]">Email Us</a>

Correct usage:

<a href="mailto:user@example.com">Email Us</a>

If you are using a template variable to create the links, be sure the template engine properly outputs a valid address in the final HTML.

Example using pseudocode for a templating engine (replace with your syntax as needed):

<a href="mailto:{{ address }}">Email Us</a>

Correct, fully rendered HTML after the template variable is replaced:

<a href="mailto:user@example.com">Email Us</a>

An href attribute on an a element contains an invalid URL that has space characters in the domain.

The domain in a URL cannot contain space characters, for example the following are invalid:

<a href="http://my domain.com">link</a>
<a href="http://my%20domain.com">link</a>

A tab character has been found in the domain part for an href attribute, which is not allowed.

URLs need to be encoded so that special characters area escaped, for example space characters need to be converted to “%20”. All special characters will therefore be converted to a percent sign followed by two hexadecimal characters, to be later decoded. In case a percentage sign (%) is found without being followed by two hexadecimal digits, a decoding error will be raised.

The most probable cause is an URL that contains a % that has not been properly encoded to %25 which is the code for the percent sign. For example:

<!-- This is invalid as the percentage sign has not been properly encoded -->
<a href="https://example.com?width=48%">link</a>

<!-- This is valid as the percentage sign has been encoded as %25 -->
<a href="https://example.com?width=48%25">link</a>

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

An href attribute with the value http:// is not a valid URL because the host section is missing.

The href attribute in the area element must contain a valid URL. A URL requires a scheme (http or https), followed by ://, and then a valid host (such as example.com). The value http:// lacks a host, making it invalid according to URL standards and resulting in a validation error. If you don’t want the area to navigate anywhere, you can use href="#" for a placeholder or omit the href attribute entirely. To link to an actual location, provide the complete URL, including the host.

Invalid example:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="http://" alt="" >
</map>

Valid example with a real host:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="http://example.com/" alt="" >
</map>

Valid example with a placeholder, no navigation:

<map name="myMap">
  <area shape="rect" coords="30,23,183,191" href="#" alt="" >
</map>

Replace http:// with a full URL or a suitable placeholder as needed for your application.

The href attribute on an element <link> contains a character that is not allowed, and should be encoded.

Some typical examples include the pipe character | that should be replaced by its encoded alternative %7C , and the left square bracket [ that needs to be encoded as %5B.

A <pattern> element has been found with an invalid ID. Check the format of the ID and ensure it does not start with a digit, full stop (.) or hyphen (-).

The <pattern> element is used within <svg> elements, which use XML 1.0 syntax. That syntax specifies that valid IDs only include designated characters (letters, digits, and a few punctuation marks), and do not start with a digit, a full stop (.) character, or a hyphen-minus (-) character.

The specified language code in the lang attribute of the <html> tag is not a valid ISO code.

The media attribute on a <link> element specifies the media for which the linked resource is intended, using a valid media query. The value indicated is not a valid media query, which leads to a parse error.

Explanation

The media attribute is used to define what type of device the linked stylesheet should be applied to. Examples include common media types like screen, print, or all, as well as more complex media queries, such as (max-width: 600px) for responsive designs.

Correct Usage

1. Media Type Only:

   You can specify general media types such as screen, print, or all.

   <link rel="stylesheet" href="styles.css" media="screen">

2. Media Query:

   For more precise control, use a media query to target specific conditions.

   <link rel="stylesheet" href="styles.css" media="(max-width: 600px)">

The media attribute on the link element cannot use the deprecated value projection; only valid CSS media types should be specified.

The media attribute specifies what media/device the linked resource is designed for, using a media query or a list of valid media types. In modern HTML and CSS, commonly accepted values include all, print, and screen.

The value projection was intended for projectors but has been deprecated and is no longer recognized by browsers or the HTML standard. To ensure validity and compatibility, remove projection and use only accepted types such as screen and/or print.

Incorrect example (with deprecated value):

<link rel="stylesheet" href="style.css" media="screen, projection">

Correct examples:

<link rel="stylesheet" href="style.css" media="screen">

<link rel="stylesheet" href="style.css" media="screen, print">

If you intend your stylesheet for screens and print, you can use both screen, print; for only screens, use just screen. If the stylesheet should apply to all devices, you can omit the media attribute or use all:

<link rel="stylesheet" href="style.css">

or

<link rel="stylesheet" href="style.css" media="all">

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.

The value of the name attribute on an <iframe> should not start with an underscore (_).

Browsing context names that begin with an underscore are reserved keywords in HTML, like _blank, _self, _parent, and _top. Using these reserved names or any custom name starting with an underscore for the name attribute of an <iframe> can lead to unexpected behavior and is considered invalid HTML.

Here’s how to fix the issue:

Problematic Code

<iframe src="https://example.com" name="_example"></iframe>

Solution

To resolve this issue, you should use a valid value for the name attribute that does not start with an underscore.

Corrected Code

<iframe src="https://example.com" name="example"></iframe>

Steps:

1. Identify the iframe element with the invalid name attribute value that starts with an underscore.
2. Replace the name value with a valid identifier that does not start with _. Use letters, numbers, hyphens (-), and underscores (_) (but not at the beginning).

The novalidate attribute is boolean: the presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. As a boolean attribute, it does not need to be passed any value such as true or 1 to activate the novalidate property.

This boolean attribute indicates that the form shouldn’t be validated when submitted. If this attribute is not set (and therefore the form is validated), it can be overridden by a formnovalidate attribute on a <button>, <input type="submit">, or <input type="image"> element belonging to the form.

Example:

<form method="post" novalidate>
  <label>User Name:
    <input name="user-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

The W3C Validator issue you’re seeing is because the ping attribute on the <a> (anchor) element is supposed to contain a space-separated list of URLs to which, when the hyperlink is activated, the browser will send ping requests. The ping attribute must only contain proper “http” or “https” URLs, that is, relative URLs are not allowed.

Example of Incorrect Code

<a href="https://example.com" ping="/track">Visit Example</a>

Examples of Correct Code

1. Proper Ping URL: Ensure the ping URL starts with http or https and is correctly formatted.

   <a href="https://example.com" ping="https://example.com/track">Visit Example</a>

2. Multiple URLs: If you have multiple URLs, they should be space-separated and each should be a valid URL.

   <a href="https://example.com" ping="https://example.com/track https://example.com/another-track">Visit Example</a>

Common Mistakes to Avoid

• Using invalid URL schemes like mailto: or /relative-path.
• Including broken URLs or URLs with protocols other than http or https.
• Incorrectly formatting multiple URLs; they must be space-separated, not comma-separated or otherwise.

Note

The ping property is not effective in Firefox and its usage may be limited due to privacy and security concerns.

Spaces in the poster attribute value are not valid in URLs and must be percent-encoded as %20.

The poster attribute on the video element specifies an image to show until the user plays or seeks the video. Attribute values that represent URLs (such as in src, href, or poster) must use valid URI syntax, meaning spaces are not allowed. Spaces must be replaced with %20, or you can use a path that avoids spaces entirely.

Example — Incorrect:

<video controls poster="/img/video images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Example — Fixed with percent-encoding:

<video controls poster="/img/video%20images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Example — Fixed by removing spaces from the folder name:

<video controls poster="/img/video-images/snapshot.png">
  <source src="/videos/sample.mp4" type="video/mp4">
</video>

Always encode any space in URLs as %20 or avoid spaces in file and folder names.

The rel attribute defines the relationship between a linked resource and the current document. Valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found.

Here’s an example of using the rel attribute to link a document to a CSS stylesheet:

<link rel="stylesheet" href="default.css" />

Here’s an example os using the rel attribute to tell search engine spiders to ignore the link relationship with another document:

<a href="https://example.com" rel="nofollow">more info</a>