Исполняемые доки HTML: Ссылки (a href)

Q: Как сделать ссылку в HTML?

Используйте элемент-якорь: Example . href это адрес назначения, а текст между тегами это то, по чему кликает читатель.

Q: Как сделать ссылку на определенное место страницы?

Дайте целевому элементу id и сошлитесь на него через решетку: FAQ и FAQ . С другой страницы добавьте решетку к URL: .

Q: Почему ссылка с www ведет не на ту страницу?

Без https:// браузер считает www.example.com относительным путем на вашем собственном сайте, и ссылка ведет куда-то вроде yoursite.com/www.example.com. Для внешних ссылок всегда пишите схему: href="https://www.example.com".

Q: Может ли тег a содержать div?

Да. В HTML5 может оборачивать блочное содержимое, например , заголовок и абзац, так и делают ссылки на всю карточку. Внутри не может быть другой ссылки, кнопки или любого другого интерактивного элемента.

Как сделать ссылку в HTML

Ссылка это элемент-якорь <a> с атрибутом href. href задает, куда ведет ссылка; содержимое между тегами это то, по чему кликает читатель.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Links</title>
</head>
<body>
  <p>
    Read the <a href="https://developer.mozilla.org/">MDN web docs</a>
    or go back to the <a href="/">home page</a>.
  </p>
  <p>This is <a>an anchor with no href</a>: it is not a link.</p>
</body>
</html>

Браузеры показывают ссылки синими и подчеркнутыми и меняют курсор на руку. Последняя строка показывает, почему важен href: без него <a> это обычный текст. Он не получает фокус, не кликается и не оформлен как ссылка.

Абсолютные и относительные URL

Значение href определяет, куда ведет ссылка. Основные формы:

`href`	Куда ведет
`https://example.com/page`	Абсолютный URL: ровно этот адрес
`/about`	`about` в корне текущего сайта
`about.html`	`about.html` в той же папке, что и текущая страница
`../index.html`	`index.html` на одну папку выше
`#pricing`	Элемент с `id="pricing"` на этой странице
`/help#faq`	Раздел `faq` другой страницы этого сайта
`mailto:hi@example.com`	Новое письмо в почтовой программе читателя
`tel:+15551234567`	Телефонный звонок на устройствах, которые умеют звонить

Используйте абсолютные URL для чужих сайтов и пути от корня (/about) внутри своего: они продолжают работать, когда страница со ссылкой переезжает в другую папку.

<a href="https://www.wikipedia.org/">Wikipedia</a>  <!-- another site -->
<a href="/pricing">Pricing</a>                     <!-- same site, from the root -->
<a href="www.wikipedia.org">Broken</a>              <!-- relative path, not a site! -->

Последняя строка показывает самую частую ошибку в ссылках. Без https:// браузер читает www.wikipedia.org как имя файла в текущей папке.

У ссылок на почту и телефон есть отдельная страница: ссылка mailto в HTML.

Ссылка на раздел страницы

Целью может быть любой элемент с id. Сошлитесь на него через # и id, и браузер прокрутит к нему. Кликните по ссылкам в превью:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Anchor links</title>
  <style>
    section { min-height: 220px; padding: 8px; border-top: 2px solid #e5e7eb; }
    :target { background: #fef3c7; }
  </style>
</head>
<body>
  <nav>
    <a href="#install">Install</a> |
    <a href="#usage">Usage</a> |
    <a href="#faq">FAQ</a>
  </nav>

  <section id="install"><h2>Install</h2></section>
  <section id="usage"><h2>Usage</h2></section>
  <section id="faq">
    <h2>FAQ</h2>
    <a href="#top">Back to top</a>
  </section>
</body>
</html>

Некоторые детали:

id должен совпадать точно, включая регистр. href="#FAQ" не найдет id="faq".
href="#top" и href="#" прокручивают к началу страницы, даже если ни у одного элемента нет id top.
Селектор :target оформляет раздел, на который сейчас указывает URL. На настоящей странице подсветка видна; превью прокручивается, не меняя свой адрес, поэтому в нем подсветки нет.
Чтобы сослаться на раздел другой страницы, добавьте решетку к URL этой страницы: <a href="/docs/html/table#caption">.

Якорные ссылки под закрепленной шапкой

Закрепленная или фиксированная шапка закрывает верх раздела, к которому выполнен переход. scroll-margin-top у целей оставляет под нее место, а scroll-behavior: smooth делает переход плавным:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sticky header</title>
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; font-family: system-ui, sans-serif; }
    header {
      position: sticky;
      top: 0;
      padding: 12px 16px;
      background: #111827;
    }
    header a { color: #fff; margin-inline-end: 12px; }
    h2 { scroll-margin-top: 60px; margin: 0; padding: 8px 16px; background: #e5e7eb; }
    p { height: 320px; margin: 0; padding: 16px; }
  </style>
</head>
<body>
  <header>
    <a href="#one">One</a>
    <a href="#two">Two</a>
    <a href="#three">Three</a>
  </header>
  <h2 id="one">Section one</h2>
  <p>Content</p>
  <h2 id="two">Section two</h2>
  <p>Content</p>
  <h2 id="three">Section three</h2>
  <p>Content</p>
</body>
</html>

Удалите строку scroll-margin-top и снова кликните Two: заголовок окажется спрятан за темной шапкой.

Ссылки на скачивание

Атрибут download просит браузер сохранить файл, а не открыть его. Его значение, если вы его зададите, это предлагаемое имя файла:

<a href="/files/report-2026.pdf" download>Download the report</a>
<a href="/files/r-8f2a.pdf" download="report.pdf">Download (saved as report.pdf)</a>

download работает только для файлов с того же источника, что и страница (та же схема, хост и порт), а также для URL data: и blob:. Для файла с другого источника, даже с поддомена, браузеры его игнорируют и открывают файл как обычную ссылку. Сервер может заставить скачать любой файл заголовком Content-Disposition: attachment.

Понятный текст ссылок

Пользователи программ чтения с экрана часто перемещаются по странице от ссылки к ссылке и слышат только текст ссылки. «Нажмите здесь» и «Подробнее» им ничего не говорят.

<!-- Vague: -->
To see our prices, <a href="/pricing">click here</a>.

<!-- Clear: -->
See the <a href="/pricing">pricing plans</a>.

Атрибут title показывает подсказку при наведении, но не виден на сенсорных экранах и большинству пользователей клавиатуры, поэтому не пишите в нем ничего важного.

Ссылка на всю карточку

<a> может оборачивать блочное содержимое: заголовок, картинка и абзац могут быть одной ссылкой. Так делают кликабельные карточки.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Card link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .card {
      display: block;
      max-width: 280px;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      color: #111827;
      text-decoration: none;
    }
    .card:hover { border-color: #2563eb; }
    .card h3 { margin: 0 0 6px; color: #2563eb; }
    .card p { margin: 0; }
  </style>
</head>
<body>
  <a class="card" href="https://developer.mozilla.org/">
    <h3>MDN web docs</h3>
    <p>Reference pages for HTML, CSS and JavaScript.</p>
  </a>
</body>
</html>

display: block делает кликабельным весь блок, а не только текст. Содержимое карточки держите коротким, потому что программа чтения с экрана зачитывает его целиком как название ссылки. И никогда не кладите внутрь другую ссылку или кнопку: интерактивные элементы нельзя вкладывать в <a>.

Другие атрибуты тега a

Атрибут	Что делает
`href`	Адрес назначения. Без него `<a>` не является ссылкой
`target`	Где открыть; `target="_blank"` открывает новую вкладку, см. открыть ссылку в новой вкладке
`rel`	Отношение к цели: `noopener`, `nofollow`, `sponsored`, `ugc`
`download`	Сохранить файл, а не открыть его
`hreflang`	Язык связанной страницы, как подсказка
`referrerpolicy`	Сколько от текущего URL отправлять в качестве referrer

Частые ошибки

Внешний URL без схемы. href="www.site.com" это относительный путь. Пишите https://.
<a href="#"> для действия JavaScript. Он прокручивает к началу и добавляет # к URL. Если клик никуда не ведет, используйте <button>.
Ссылка внутри ссылки или кнопка внутри ссылки. И то, и другое некорректный HTML: второй <a> заставляет парсер досрочно закрыть первый, а у клика по кнопке внутри ссылки нет ясной цели.
Пробелы в именах файлов. href="my file.html" обычно работает, потому что браузер кодирует пробел, но my-file.html снимает вопрос полностью.
«Нажмите здесь» в тексте ссылки. Лучше опишите, куда она ведет.
Разный регистр id. #Pricing и id="pricing" различаются.

Часто задаваемые вопросы

Как сделать ссылку в HTML?

Используйте элемент-якорь: <a href="https://example.com">Example</a>. href это адрес назначения, а текст между тегами это то, по чему кликает читатель.

Как расшифровывается href?

Hypertext reference, «гипертекстовая ссылка». В нем хранится URL, на который ведет ссылка: полный адрес, путь на том же сайте вроде /about, раздел страницы вроде #pricing или схема вроде mailto:.

Как сделать ссылку на определенное место страницы?

Дайте целевому элементу id и сошлитесь на него через решетку: <h2 id="faq">FAQ</h2> и <a href="#faq">FAQ</a>. С другой страницы добавьте решетку к URL: <a href="/help#faq">.

Почему ссылка с www ведет не на ту страницу?

Без https:// браузер считает www.example.com относительным путем на вашем собственном сайте, и ссылка ведет куда-то вроде yoursite.com/www.example.com. Для внешних ссылок всегда пишите схему: href="https://www.example.com".

Может ли тег a содержать div?

Да. В HTML5 <a> может оборачивать блочное содержимое, например <div>, заголовок и абзац, так и делают ссылки на всю карточку. Внутри не может быть другой ссылки, кнопки или любого другого интерактивного элемента.

Связанные концепции