When an attribute value ends in a slash, can I omit the quotes? It looks confusing when the trailing slash is next to the closing angle bracket

Question

I have been thinking about this case:

You want to use canonical on page A directing to example.com/:

<link rel=canonical href=example.com/>

If I wouldn't use quotation marks like that, could search engines interpret / as a closing slash and the canonical would lead to example.com without /? If example.com would be redirected to example.com/ that could cause troubles. So I am wondering if that could happen?

Answer 1

Here is what the HTML spec says about using unquoted attribute values:

An unquoted attribute value is specified by providing the following parts in exactly the following order:

1. an attribute name
2. zero or more space characters
3. a single = character
4. zero or more space characters
5. an attribute value

In addition to the general requirements for attribute values, an unquoted attribute value has the following restrictions:

• must not contain any literal space characters
• must not contain any ", ', =, >, <, or `, characters
• must not be the empty string

The trailing slash (/) is not in the list of restricted characters, so it would be considered part of the href attribute. The closing angle bracket (>) is in the list of restricted characters, so it would not be considered part of the href attribute.

Given that your case is confusing and requires a careful reading of the spec to get it right, I would not recommend using your markup. Even if it doesn't confuse any browser or search engine spider, it is likely to confuse somebody who needs to later modify the code (maybe even yourself!)

I would choose one of the following options:

• Use quotes: <link rel=canonical href="example.com/">
• Add a space: <link rel=canonical href=example.com/ >

Even though you don't have to use quotes around attribute values in HTML5, many people recommend always doing so for consistency. If your canonical URL had a query string with an equal sign, it would need the quotes around it. I personally omit quotes to make my HTML smaller for simple attribute values but I put in the quotes any time there is punctuation because I can't be bothered to remember the list of disallowed punctuation exactly.

Your example is also troubling because example.com/ is not a valid canonical URL. Canonical URLs should be absolute. That means that they need to include the protocol. So instead use:

<link rel=canonical href="https://example.com/">