Urls are not clickable

Bit of a strange problem.

I have a super simple HTML page with a few anchor tags in an unordered list.

Here’s the html:

<!DOCTYPE html>
<html>
<body>
  <h1>Archives<h1>

  <h2>archives ></h2>

  <ul>
      <li>
        <a href=“/archives/2021”>2021</a>
      </li>
      <li>
        <a href=“/archives/2022”>2022</a>
      </li>
  </ul>
</body>
</html>

As far as I can tell the HTML is correct, yet when deployed on Netlify, when I try to click the link, the browser tries to open the following url:

https://[domain-redacted].netlify.app/archives/“/archives/2021”

Is there some Netlify setting that could be interfering? What am I missing?

Hey @mjgs

The double quotes look wrong in your code. Should look like

<a href="/archives/2022">2022</a>

If this doesn’t resolve the issue, please share the URL for your site.

Also note your HTML is not valid as it does not contain a <head>, or <title>, and should/must contains DOCTYPE. E.g.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Site</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <h1>My Site</h1>
    <ul>
      <li><a href="/page1.html" title="Page 1">Page 1</a></li>
    </ul>
 </body>
</html>

Read more:

Thanks for the extra pair of eyes @coalmay, looks like the editor I was using has an encoding bug which was resulting in the strange double quote character.

I changed the file extension of the file I was editing from .ejs to .js and the double quotes started looking normal again.

Very annoying, but at least there is a workaround until the bug is fixed.

Thanks also for the HTML snippet you posted. I was using the recommendation from w3schools, looks like they were wrong in this case:

If you paste the snippet from w3Schools into the W3C’s validator you will see it produces 1 warning (pertaining to the missing lang attribute), and 1 error (pertaining to the missing title element) which is a required element.

In certain circumstances, it is permitted to omit the head tag (see The HTML Spec) as it is with the title element.

As a fun little note this HTML is valid (according to the validator)

<!DOCTYPE html><html lang="en"><title>shortest html5</title>

though it obviously will display nothing on screen.

Thanks - I heard back from the devs of my editor. Turns out it was a feature.

There are 2 modes:

  • natural
  • programming

In natural mode, where there is autocorrect and auto capitalisation, you get the weird double quotes. Setting the file to ‘programming’ mode gets you the double quotes that browsers understand.

I mention it here in case it helps someone else with similar issues.