Заголовки и цели ссылок HTML

Урок про ссылки уже дал вам рабочие элементы a с понятными значениями href. Два распространённых дополнения меняют опыт, не заменяя href: атрибут title для короткой подсказки при наведении и target, который может открыть адрес в новой вкладке браузера. При осторожном использовании они помогают. Если ставить их на каждый пункт меню, они раздражают людей и создают дыры в безопасности.

Что делают эти атрибуты

href по-прежнему решает, куда ведёт ссылка. title, target и rel настраивают подсказки и то, как браузер открывает этот адрес. Изучайте их как необязательные инструменты поверх сильного текста ссылки — а не как замену описательной формулировке.

Прямой ответ

• title="…" — необязательный справочный текст подсказки при наведении (поддержка и польза различаются; никогда не полагайтесь только на него)
• target="_blank" — открыть в новой вкладке или окне
• С _blank также задайте rel="noopener noreferrer", чтобы новая страница не могла полностью управлять вашей исходной вкладкой через window.opener (более безопасный повседневный шаблон)
  Оставляйте навигацию внутри сайта в той же вкладке по умолчанию. Резервируйте _blank для случаев, когда остаться на вашей странице действительно помогает — часто это внешние ссылки или загрузки.

title, target и rel одним взглядом

Полезная подсказка title

Используйте title, когда короткая дополнительная подсказка даёт ценность сверх видимого текста ссылки. Не вставляйте одну и ту же фразу в оба места в надежде удвоить ясность — опыт экранных читалок и наведения различается, а пустое повторение тратит внимание.

Разбор примера с title

• Видимый текст Beginner guide остаётся основной подписью
• title добавляет краткую справочную строку при наведении во многих десктопных браузерах
• Мобильные устройства и вспомогательные технологии могут не показывать title так же — держите видимый текст сильным
• href по-прежнему указывает на guide.html; сам по себе title никуда не ведёт

Новая вкладка с более безопасным rel

Открытие внешнего сайта в новой вкладке позволяет читателям оставить ваш урок открытым. Для таких случаев сочетайте _blank с rel="noopener noreferrer" как более безопасную привычку по умолчанию.

Зачем noopener и noreferrer

• noopener снижает риск, что новая страница будет манипулировать вашей исходной вкладкой через window.opener
• noreferrer также во многих браузерах не отправляет referrer (побочный эффект для приватности; всё равно обычно преподают вместе с этим шаблоном)
  Вам не нужна глубокая теория безопасности браузера в этом курсе — запомните парные атрибуты для внешних ссылок с _blank и идите дальше.

Не открывайте всё в новой вкладке

Новые вкладки множатся. Если каждая ссылка в боковой панели открывается с _blank, пользователи теряют простую историю кнопки «Назад» и получают кучу вкладок. Предпочитайте ссылки в той же вкладке для своих страниц (about.html, следующий урок, главная). Используйте _blank, когда уходите с сайта или когда требование продукта явно об этом просит.

title — это не заголовок страницы

Элемент документа <title> в head подписывает всю вкладку. Атрибут title на a — лишь подсказка на этой ссылке. Разные задачи, похожее английское слово — не путайте их.

Практика в редакторе

1. Добавьте локальную ссылку с понятным видимым текстом и полезным title, который даёт одну дополнительную деталь.
2. Добавьте внешнюю ссылку с target="_blank" и rel="noopener noreferrer".
3. Наведите (на десктопе), чтобы увидеть подсказку; кликните, чтобы подтвердить новую вкладку.
4. Оставьте третью внутрисайтовую ссылку без _blank и убедитесь, что она обычным образом заменяет текущую вкладку.
5. Перепишите любой title, который лишь повторяет текст ссылки без новой информации.

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

• Использование _blank на каждом пункте внутреннего меню
• Забытый rel="noopener noreferrer" на внешних ссылках с _blank
• Бесполезный title, который только эхом повторяет текст ссылки
• Мысль, что title или target могут заменить отсутствующий href
• Путаница атрибута title ссылки с элементом документа <title>

Итог

• title может добавить короткую подсказку при наведении; видимый текст ссылки остаётся главным
• target="_blank" открывает новую вкладку или окно
• Сочетайте _blank с rel="noopener noreferrer" для более безопасных внешних ссылок
• Предпочитайте навигацию в той же вкладке для своих страниц
• href остаётся адресом назначения; эти атрибуты лишь уточняют опыт