HTML Guide

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>

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

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

Based on the content of the document, the W3C validator has determined that the main language doesn’t match the one specified in the lang property of the <html> tag. Check the language of the document, if it matches the lang property you can safely ignore and mute this warning.

This validation issue indicates that your HTML document does not specify a language for its content. Specifying the document’s language is important for accessibility, search engines, and browser behavior.

To fix this, you need to add the lang attribute to the <html> element, indicating the primary language of the document. For example, if your document is written in Spanish, you should set the lang attribute to "es".

Here’s how to do it:

Original HTML (without lang attribute)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un párrafo en español.</p>
</body>
</html>

Updated HTML (with lang attribute)

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un párrafo en español.</p>
</body>
</html>

Explanation

• The lang="es" attribute specifies that the primary language of the document is Spanish.
• Setting the lang attribute helps screen readers and other assistive technologies to better interpret the content.
• It also provides crucial information for search engines and browsers, improving the accessibility and search engine optimization (SEO) of your website.

If you need to specify a regional variation of Spanish, you can use values like lang="es-ES" for Spanish as used in Spain, or lang="es-MX" for Spanish as used in Mexico.

Example with Regional Variation

<!DOCTYPE html>
<html lang="es-MX">
<head>
    <meta charset="UTF-8">
    <title>Mi Sitio Web</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
    <p>Este es un párrafo en español de México.</p>
</body>
</html>

By adding the lang attribute with the appropriate value, you’ll resolve the W3C HTML Validator issue.

Void elements, like area, base, br, col, embed, hr, img, input, link, meta, source, track, and wbr are self-closing and don’t need a trailing slash /, which should be avoided as that can interfere with unquoted attribute values.

These void elements can optionally have a trailing slash and some people prefer to include it as it may look clearer. Some HTML formatters integrated in code editors automatically add a trailing slash to void elements.

So for example, both <hr> and <hr/> are valid self-closing void elements. However, when combined with unquoted values for attributes, the trailing slash can be problematic.

In this example, the img element takes http://example.com/logo.svg as the value its src attribute.

<img alt=SVG src=http://example.com/logo.svg>

But in the following example with a trailing slash, the img element takes http://example.com/logo.svg/ as the value its src attribute. That is, the trailing slash has been parsed as part of the value for the src attribute, which breaks the display of the image.

<img alt=SVG src=http://example.com/logo.svg/>

In short, this HTML warning makes you aware of this problem. When possible, it’s recommended to avoid trailing slashes in void elements.

A <span> tag has not been closed. Example:

<p><span>I'm forgetting something</p>
<p>Life goes on</p>

An open tag has not been properly closed.