Frontend Developer: “A Few Things About the Anchor Element’s href You Might Not Have Known…”

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

Обычно то, что кажется супер простым, просто пролистывается и не читается 🙂
Но я уже много раз говорила: сила — в базовых вещах ⚡️

На днях наткнулась на статью с таким названием:
«Несколько фактов о значении href у тега `<a>`, которых вы могли не знать»
и решила посмотреть, что там интересного 👀

Вот что я нашла:

* `href="#"` — скроллит страницу в начало документа.
* `href=""` — перезагружает текущую страницу, сохраняя строку запроса (query string), но удаляя hash.

Примеры:

URL                  Преобразуется в
/path/               /path/
/path/#foo           /path/
/path/?id=foo        /path/?id=foo
/path/?id=foo#bar    /path/?id=foo

* `href="."` — перезагружает текущую страницу, убирая и query string, и hash (если они есть).

Примеры:

URL                  Преобразуется в
/path                /
/path#foo            /
/path?id=foo         /
/path/               /path/
/path/#foo           /path/
/path/?id=foo        /path/
/path/index.html     /path/

* `href="?"` — тоже перезагружает страницу, убирая query и hash, но оставляет ?.

Примеры:

URL                  Преобразуется в
/path                /path?
/path#foo            /path?
/path?id=foo         /path?
/path?id=foo#bar     /path?
/index.html          /index.html?

* `href="data:"` — можно делать ссылки на data URL. Например:

<a href="data:text/plain,hello world">
  View plain text data URL
</a>

* `href="video.mp4#t=10,20"` — медиa-фрагменты. Можно указывать конкретный отрезок видео или аудио.
В этом примере видео начнётся с 10-й секунды и остановится на 20-й.

---

Было ли среди этого что-то, о чём вы не знали? 🤔

👉 https://blog.jim-nielsen.com/2025/href-value-possibilities/