HTML Guide - issues tagged as obsolete

The <big> tag is now obsolete. It was used to increase the size of text, you can do that using CSS instead. For example:

<p>Now this is <span style="font-size: larger;">big</span></p>

The “charset” attribute on the “link” element is obsolete. Use an HTTP Content-Type header on the linked resource instead.

The W3C Validator is indicating that the charset attribute on the link element is obsolete. According to modern HTML standards, the charset attribute should not be used on the <link> element, and instead, the character encoding should be specified via an HTTP Content-Type header on the server response of the resource.

Here’s how you can address and fix the issue:

1. Remove the charset attribute from the <link> element:

You should simply remove the charset attribute from the <link> element in your HTML file.

Before:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css" charset="UTF-8">
  <title>Example Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

After:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>Example Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

2. Set the charset using HTTP Headers:

To ensure that the correct character encoding is used, you should configure your web server to send the appropriate Content-Type header with the CSS file.

For Apache: You can modify the .htaccess file or the server configuration file.
```
<FilesMatch "\.css$">
    AddCharset UTF-8 .css
</FilesMatch>
```
For Nginx: You can add the following directive to your server block or location block:
```
location ~* \.css$ {
    charset utf-8;
}
```

For Express.js (Node.js): You can set headers in your response:

app.get('/styles.css', function(req, res) {
  res.setHeader('Content-Type', 'text/css; charset=UTF-8');
  res.sendFile(__dirname + '/styles.css');
});

The “charset” attribute on the “script” element is obsolete.

A <script> element has been found that is using the now obsolete charset attribute. You can safely remove this attribute.

For example, this is using both type and charset attributes, with their default values. Both can be removed:

<script src="app.js" type="text/javascript" charset="UTF-8"></script>

and just use this:

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

The “font” element is obsolete. Use CSS instead.

The <font> element, used to define the font face, size and color in previous versions of HTML, is no longer valid in HTML5. Instead, you should rely on CSS styles.

For example, you can define a font size of 12px, bold text with inline styles like this:

<p style="font-size: 12px; font-weight: bold;">some text</p>

The “language” attribute on the “script” element is obsolete. You can safely omit it.

The “longdesc” attribute on the “iframe” element is obsolete. Use a regular “a” element to link to the description.

The issue you’re encountering comes from using the longdesc attribute on an iframe element. The longdesc attribute was historically used to provide a URL to a long description of the content. However, it is now considered obsolete and should not be used. Instead, you should use a regular a (anchor) element to provide a link to the description.

Here’s a short guide on how to fix this issue:

Original Code with longdesc

<iframe src="video.html" longdesc="description.html" title="Video"></iframe>

Updated Code with Regular a Element

The recommended approach is to use a regular a element to provide a link to the description, like in the following example:

<iframe src="video.html" title="Video"></iframe>

<p>
  <a href="description.html">Long description of the video content</a>
</p>

Explanation

Original Code: The longdesc attribute is used on the iframe element, which is now obsolete.
Updated Code: We remove the longdesc attribute and provide an external link using the a element to guide users to the description.

The “name” attribute on the “option” element is obsolete. Use the “id” attribute instead.

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 “scheme” attribute on the “meta” element is obsolete. Use only one scheme per field, or make the scheme declaration part of the value.

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 “summary” attribute on the “table” element is obsolete. Consider describing the structure of the “table” in a “caption” element or in a “figure” element containing the “table”; or, simplify the structure of the “table” so that no description is needed.

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 “tt” element is obsolete. Use CSS instead.

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 “version” attribute on the “html” element is obsolete. You can safely omit it.

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>