Are these supposed to get self-closing tags? In between the head

#1

I’ve seen them with them and without them.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="shortcut icon" href="" type="image/x-icon">
  <link rel="icon" href="" type="image/x-icon">
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>

Like this, or no?

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="shortcut icon" href="" type="image/x-icon" />
  <link rel="icon" href="" type="image/x-icon" />
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
#2

Try pasting the script into the following:

https://validator.w3.org/

#3

No Errors

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>html</title>
  <link rel="shortcut icon" href="https://i.ibb.co/2d9593g/fav.png" type="image/x-icon"/>
  <link rel="icon" href="https://i.ibb.co/2d9593g/fav.png" type="image/x-icon"/>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen"/>
</head>

No Errors

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>html</title>
  <link rel="shortcut icon" href="https://i.ibb.co/2d9593g/fav.png" type="image/x-icon">
  <link rel="icon" href="https://i.ibb.co/2d9593g/fav.png" type="image/x-icon">
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
</head>
#4

The trailing slash is basically an ignored syntax error in html5 for backward compatibility.

It is classed as optional in HTML5 and will not produce a syntax error from the validator.

There is no need to add the trailing slash as html 5 does not require it so adding it is just adding redundancy to your code.

5 Likes