HTML Guide

A textbox role is not valid for a li (list item) element. If the intention is to create a textual input area, a different approach, such as using the input element or the textarea element, is recommended.

The textbox role is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.

Here’s an example of how to use the textbox role on a <div> element:

<!-- Simple text input field -->
<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="5-digit zipcode"
  aria-labelledby="txtboxLabel"></div>

The allowfullscreen attribute is used to allow an iframe to activate fullscreen mode. As a boolean attribute, it should only be declared without any value.

Here is an example of correct usage:

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

However, this is now a legacy attribute, and has been redefined as allow="fullscreen", as part of the more general Permissions Policy:

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

The multiple attribute is used to indicate that multiple options can be selected in a <select> element. As a boolean attribute, it should only be declared without any value.

Instead of:

<select multiple="true">

You should use:

<select multiple>

Here is an example of the correct usage of the multiple attribute:

<label for="colors">Select your favorite colors:</label>
<select id="colors" name="colors" multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
  <option value="yellow">Yellow</option>
</select>

The selected attribute on option elements is boolean, so it should not have any value associated.

To fix this issue, simply remove the value assigned to the selected attribute.

Instead of this:

<select>
  <option selected="true">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Use this:

<select>
  <option selected>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

In the example above, we’ve removed the value assigned to the selected attribute on the first option element. This will specify that “Option 1” is the default option to be selected in the dropdown list.

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport 768px maximum:

<link rel="stylesheet" media="only screen and (max-width: 768px)" href="styles.css">

To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

The width media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport including the size of a rendered scroll bar (if any).

In the following example, this media query expresses that the style sheet is only linked if the width of the viewport is greater than 768px:

<link rel="stylesheet" media="only screen and (min-width: 768px)" href="styles.css">

The accept attribute may be specified to provide browsers with a hint of what file types will be accepted on an <input> element. It expects a comma-separated list of allowed file types. Refer to the list of media types to check the accepted tokens. In this example, the first line is invalid while the second is valid:

<input name='file' type='file' accept='doc, docx, pdf' />

<input name='file' type='file' accept='text/doc, text/docx, application/pdf' />

The only accepted values for the aria-current property are page, step, location, date, time, true and false.

A non-null aria-current state on an element indicates that this element represents the current item within a container or set of related elements.

When you have a group of related elements, such as several links in a breadcrumb or steps in a multi-step flow, with one element in the group styled differently from the others to indicate to the sighted user that this is the current element within its group, the aria-current should be used to inform the assistive technology user what has been indicated via styling.

In its simplest form, you only need to add aria-current="true" to the element that you wish to mark as the current element of a group, for example:

<nav>
  <ol>
    <li>
      <a href="/page1">Page 1</a>
    </li>
    <li>
      <a href="/page2" aria-current="true">Page 2</a>
    </li>
    <li>
      <a href="/page3">Page 3</a>
    </li>
  </ol>
</nav>

If you can, use the values page, step, location, date or time instead of true to indicate the nature of the current element:

page

Represents the current page within a set of pages such as the link to the current document in a breadcrumb.

step

Represents the current step within a process such as the current step in an enumerated multi step checkout flow.

location

Represents the current location within an environment or context such as the image that is visually highlighted as the current component of a flow chart.

date

Represents the current date within a collection of dates such as the current date within a calendar.

time

Represents the current time within a set of times such as the current time within a timetable.

For example, here we use page instead of true.

<nav>
  <ol>
    <li>
      <a href="/page1">Page 1</a>
    </li>
    <li>
      <a href="/page2" aria-current="page">Page 2</a>
    </li>
    <li>
      <a href="/page3">Page 3</a>
    </li>
  </ol>
</nav>

If you want to indicate that an element is not the current element, you can use the false value or just skip the aria-current property entirely on the element.

Using a blank string is not a valid value for this property, so instead of this:

 <a href="/page3" aria-current="">Page 3</a>

you can use false:

 <a href="/page3" aria-current="false">Page 3</a>

or, better yet, skip the property entirely:

 <a href="/page3">Page 3</a>

The only accepted value for the aria-required property is true.

The aria-required attribute indicates that user input is required on the element before a form may be submitted.

When a semantic HTML <input>, <select>, or <textarea> must have a value, it should have the required attribute applied to it. When form controls are created using non-semantic elements, such as a <div> with a role of checkbox, the aria-required attribute should be included, with a value of true, to indicate to assistive technologies that user input is required on the element for the form to be submittable.

Example:

<div id="email_label">Email Address *</div>
<div
  role="textbox"
  contenteditable
  aria-labelledby="email_label"
  aria-required="true"
  id="email"></div>

The async 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 async property.

For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available.

For module scripts, if the async attribute is present then the scripts and all their dependencies will be executed in the defer queue, therefore they will get fetched in parallel to parsing and evaluated as soon as they are available.

<script async src="app.js"></script>

<script async type="module">
  /* JavaScript module code here */
</script>

The value used in the datetime attribute is not in a valid format.

The <time> HTML element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

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 <iframe> element, used to embed another document inside the current document, accepts both attributes width and height which must be valid non-negative integers. Percentages are not allowed for these attributes.

<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.

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.

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.