0Pricing
HTML Academy · Урок

Открытие ссылок в новых вкладках и атрибут download

Используйте атрибуты target и download для управления поведением ссылок

«Открытие ссылок в новых вкладках и атрибут download» — бесплатный урок HTML Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Открытие в новой вкладке

Атрибут target определяет, где открывается связанный документ:

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

Риск безопасности при использовании _blank

target="_blank" без дополнительных мер создаёт уязвимость системы безопасности:

  • Новая страница может получить доступ к открывшей её странице через window.opener
  • Вредоносная страница может перенаправить исходную вкладку
  • Эта атака называется обратной подменой вкладки

rel=noopener noreferrer

Всегда добавляйте rel="noopener noreferrer" при использовании target="_blank":

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Когда открывать новые вкладки

Рекомендации по использованию target="_blank":

  • Используйте его для внешних сайтов, если пользователи не ожидают покинуть ваше приложение
  • Используйте его для справочных документов (PDF-файлов, руководств)
  • Не используйте его для внутренней навигации по страницам
  • Всегда предупреждайте пользователей — добавляйте значок или заголовок «открывается в новой вкладке»

Как сообщить пользователям о новой вкладке

Сообщите пользователям, что ссылка открывается в новой вкладке:

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

Атрибут download

Атрибут download сообщает браузеру, что связанную ссылку нужно скачать, а не открыть:

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Ограничения атрибута download

Атрибут download имеет следующие ограничения:

  • Работает только для URL одного источника
  • Для скачивания с другого источника сервер должен отправить Content-Disposition: attachment
  • Имя файла в download является предложением — заголовки сервера могут его заменить

Скачивание URI данных

Вы можете скачивать созданное содержимое с помощью URI данных:

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript и цели ссылок

Если навигацией управляет JavaScript, не злоупотребляйте target="_blank":

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Атрибут ping

Атрибут ping отправляет запрос POST при нажатии на ссылку (для аналитики):

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Атрибут type у ссылок

Атрибут type указывает предполагаемый тип MIME связанного ресурса:

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Проверка

Какой атрибут безопасности всегда должен использоваться вместе с target="_blank"?

Итоги: target и download

Атрибуты, управляющие поведением ссылок:

  • target="_blank" — открывает ссылку в новой вкладке
  • Всегда добавляйте rel="noopener noreferrer" вместе с _blank
  • Визуально предупреждайте пользователей, когда ссылка открывается в новой вкладке
  • download — запускает скачивание файла вместо перехода по ссылке
  • download="filename" — предлагает имя файла для скачивания

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

Урок «Открытие ссылок в новых вкладках и атрибут download» бесплатный?

Да — полный текст урока «Открытие ссылок в новых вкладках и атрибут download» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Открытие ссылок в новых вкладках и атрибут download»?

Используйте атрибуты target и download для управления поведением ссылок Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Открытие ссылок в новых вкладках и атрибут download»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент anchor и атрибут href
  2. Абсолютные и относительные URL
  3. Открытие ссылок в новых вкладках и атрибут download
  4. Ссылки на разделы и идентификаторы фрагментов
← Назад к HTML Academy