A Few Things About the Anchor Element’s href You Might Not Have Known

I love “re-learning” things I thought I knew. HTML is full of those opportunities (case in point, like today) since it’s where you typically start learning about web development. And in those early days, you don’t know what you don’t know.

So, thanks Jim Nielsen for giving me a reason to give URL patterns another look. It’s easy to take URL superpowers for granted, even if you already have these patterns under your belt.

The patterns:

<a href="#"> <!-- Scrolls to the top of a document -->
<a href=""> <!-- Reloads the current page, preserving the search string but removing the hash string (if present). -->
<a href="."> <!-- Reloads the current page, removing both the search and hash strings -->
<a href="?"> <!-- Reloads the current page, removing both the search and hash strings (keeps `?`) -->
<a href="data:"> <!-- Link to data URLs, like text fragments -->
<a href="video.mp4#t=10,20">  <!-- Links to specific parts of a media file -->

But do yourself a favor and read Jim’s full post. He gets way more into the weeds, referencing the specification and stress testing different configurations. I mean, this is gold:

But I’m writing because #top will also scroll to the top if there isn’t another element with id="top" in the document. I didn’t know that.

Me neither.

A Few Things About the Anchor Element’s href You Might Not Have Known originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Source: Read More