HTML Guide

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>

The navigation landmark role is used to identify major groups of links used for navigating through a website or page content. It can be added to an element that contains navigation links by using role="navigation", but instead it’s preferable to just use the <nav> element. In that case, it’s unnecessary to make the navigation role explicit.

Examples:

<div role="navigation">
<!-- this is a valid way to define a navigation role -->

</div>

<nav>
<!-- but this is shorter and uses correct semantic HTML  -->

</nav>

A section element automatically defines a landmark region, so adding role="region" is redundant.

According to the HTML specification and WAI-ARIA guidelines, sectioning elements such as section, nav, article, and aside already have implicit landmark roles. Adding an explicit role="region" to a section does not change its semantics, and HTML validators will warn against this unnecessary usage.

Incorrect Example:

<section role="region">
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correct Example:

<section>
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

If a region of the page does not have an accessible name and you want it to be a landmark, add a heading element (<h1>-<h6>) as the first child to label the region for assistive technologies. Avoid adding redundant ARIA role attributes to native landmark elements for better accessibility and HTML validation.

The <meta> element no longer accepts a scheme attribute, it’s now obsolete and should be removed.

For example, old documents adhering to old definitions in DCMI (Dublin Core Metadata Initiative) use this HTML tag to define a date:

<meta name="DC.Date.Created" scheme="W3CDTF" content="2009-11-30" />

As the scheme attribute is now obsolete, it should now be removed. The following HTML code will pass current validations, but you should check the exact definition to use if you want to keep using the DCMI tags.

<meta name="DC.Date.Created" content="2009-11-30" />

The scope attribute must be used on a th element, not a td element.

The scope attribute helps define whether a header cell (th) refers to a column, row, or group of columns or rows in a table. According to current HTML standards, only th elements should use the scope attribute. Using scope on td elements is obsolete and invalidates your markup. To fix this, replace any td with scope with a th, and set the appropriate scope value (row, col, etc.).

Incorrect HTML Example (with validation error):

<table>
  <tr>
    <td scope="row">Monday</td>
    <td>Meeting</td>
  </tr>
</table>

Corrected HTML Example:

<table>
  <tr>
    <th scope="row">Monday</th>
    <td>Meeting</td>
  </tr>
</table>

Key points:

• Use scope="row" for row headers and scope="col" for column headers, but only on th elements.
• Never use the scope attribute on a td element.

The role="searchbox" attribute is redundant on an <input type="search"> without a list attribute and should be removed.

According to the HTML and ARIA specifications, an <input> element with type="search" is already recognized by assistive technologies as a search box. Adding role="searchbox" does not provide additional meaning and is considered unnecessary and potentially confusing by validators.

Incorrect usage:

<input type="search" role="searchbox" placeholder="Search...">

Correct usage:

<input type="search" placeholder="Search...">

A <select> element can only have multiple <option selected> if it includes the multiple attribute.

A <select> element represents a control that provides a menu of options. By default, only one option can be selected at a time unless the multiple attribute is present, allowing users to select more than one option. If multiple <option> elements use the selected attribute without multiple, this violates the HTML standard and triggers a validation error.

Example of incorrect usage:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage with only one selected option:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Correct usage for multiple selected options with multiple attribute:

<select name="color" multiple>
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Remove duplicate selected attributes unless multiple is set, or add the multiple attribute if multiple selection is intended.

Links created with the <a> element no longer accept a shape attribute. In order to define image maps, use the <area> element instead.

The sizes attribute is used to complement the srcset attribute on an <img> tag for responsive images, therefore it’s not valid if srcset is missing.

The W3C validator error you are seeing indicates that you’ve used the sizes attribute on an <img> element without providing a srcset attribute. According to HTML specifications, the sizes attribute is only meaningful when used alongside the srcset attribute.

The srcset attribute allows you to specify a list of possible image files for the browser to choose from based on conditions like the screen size or resolution. The sizes attribute helps the browser understand what size the image should be under specific conditions defined in srcset.

How to Fix the Issue

There are two options, adding or removing attributes.

1. Adding a srcset Attribute: If you need responsive images, make sure to include the srcset attribute in your <img> element.

2. Removing the sizes Attribute (if not necessary): If responsive images are not required and you’re not using srcset, simply remove the sizes attribute.

Example

Incorrect Markup:

<img src="image.jpg" sizes="(max-width: 600px) 480px, 800px" alt="Example Image">

Correct Markup with srcset:

<img src="image.jpg" 
     srcset="image-480w.jpg 480w, image-800w.jpg 800w" 
     sizes="(max-width: 600px) 480px, 800px" 
     alt="Example Image">

In this correct example, the srcset attribute provides two different images (image-480w.jpg and image-800w.jpg) and their corresponding widths (480w and 800w). The sizes attribute tells the browser to use the 480 pixels wide image if the viewport is 600 pixels or less, otherwise, it will use the full 800 pixels.

Correct Markup without sizes and srcset:

<img src="image.jpg" alt="Example Image">

If you don’t need responsive images, simply remove the sizes attribute to fix the issue.

Summary

Ensure that whenever you use the sizes attribute, you also include a srcset attribute. This makes sure that the browser can effectively make decisions about which image size to load in different scenarios.

To resolve the W3C Validator issue regarding the obsolete summary attribute on the table element, you should remove the summary attribute and instead provide a description of the table structure using a caption element.

Here’s how you can fix it:

• Remove the summary attribute: This attribute is no longer supported in modern HTML standards.
• Add a caption element: This element gives a brief description of the table, making it accessible and informing users what the table represents.

Example Before and After

Before Fixing (with obsolete summary attribute)

<table summary="This table shows the sales data for the year.">
    <tr>
        <th>Month</th>
        <th>Sales</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$1000</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$1200</td>
    </tr>
</table>

After Fixing (with caption element)

<table>
    <caption>Sales Data for the Year</caption>
    <tr>
        <th>Month</th>
        <th>Sales</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$1000</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$1200</td>
    </tr>
</table>

Additional Option: Using a figure Element

If you want to provide a more extensive description alongside your table, you can wrap the table in a figure element.

Example with figure

<figure>
    <figcaption>Sales Data for the Year</figcaption>
    <table>
        <tr>
            <th>Month</th>
            <th>Sales</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$1000</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$1200</td>
        </tr>
    </table>
</figure>

The <time> HTML element represents a specific period in time, which can be taken from the datetime attribute or from the text contents of the element.

In both cases, the time or datetime must be in a valid format, for example:

a valid year string

2011

a valid month string

2011-11

a valid date string

2011-11-18

a valid yearless date string

11-18

a valid week string

2011-W47

a valid time string

14:54

14:54:39

14:54:39.929

a valid local date and time string

2011-11-18T14:54:39.929

2011-11-18 14:54:39.929

a valid global date and time string

2011-11-18T14:54:39.929Z

2011-11-18T14:54:39.929-0400

2011-11-18T14:54:39.929-04:00

2011-11-18 14:54:39.929Z

2011-11-18 14:54:39.929-0400

2011-11-18 14:54:39.929-04:00

a valid duration string

PT4H18M3S

For example:

<p>
  The event will take place on <time datetime="2025-03-20T13:00">March 20, 2025</time>.
</p>

The textbox role, used to identify an element that allows the input of free-form text, is unnecessary for an <input> element of type text when it doesn’t have a list attribute.

The <tt> tag, used in HTML4 to apply a monospaced (fixed width) font to the text, was deprecated in HTML5. Instead, you should use CSS to apply the desired font.

Example, instead of this deprecated code:

<tt>This is deprecated</tt>

You can define a monospaced text using font-family:

<span style="font-family: monospace;">This is monospaced text</span>

The HTML <style> element contains style information for a document, or part of a document, defined in CSS. This element does not need the type attribute anymore, so it should be omitted.

For example, this style defines that <p> elements should be in red color.

<style type="text/css">
p {
  color: red;
}
</style>
<p>This text will be red.</p>

But, the type attribute is not used anymore, so we can just use this:

<style>
p {
  color: red;
}
</style>
<p>This text will be red.</p>

The default type for <script> tags is JavaScript, so you don’t need to include the type for JS resources.

<td> elements no longer accept a valign attribute. This can be achieved using CSS like this:

<td style="vertical-align:middle;">content</td>

Read about Normalization in HTML and CSS.

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

In HTML5, there’s no need to specify the version attribute - it is now obsolete. Here’s an example minimal HTML document to start with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
  </head>
  <body>
    <p></p>
  </body>
</html>

Both <table> and <td> elements no longer accept a width attribute. Instead, you should use CSS as in this example:

<table style="width:100%;">
  <tr>
    <td style="width:50px;">Name</td>
  </tr>
</table>

You’re using an attribute X that is no longer valid for element Y, but you can use CSS to achieve the same effect.

Based on the content of the document, the W3C Validator has determined that it’s written in Arabic, and it suggests you specify the direction of text from right to left like this:

<html dir="rtl" lang="ar">

Based on the content of the document, the W3C validator thinks that it’s written in English. Consider explicitly specifying the language using the lang property.

Example:

<html lang="en">

Based on the content of the document, the W3C validator thinks that it’s written in English, but the lang property in the <html> element specifies a different language. Check the language of the document, if it matches the lang property you can safely ignore and mute this warning.

Example:

<html lang="fr">