Отличия target="_blank" и target="_new" в HTML: руководство

Быстрый ответ

Для открытия ссылок в новой вкладке браузера рекомендуется использовать target="_blank". target="_new" не соответствует стандартам и может привести к нежелательному повторному использованию вкладок. Вот как это должно выглядеть в коде:

<!-- Хороший пример: безопасное открытие ссылки в новой вкладке -->
<a href="https://example.com" target="_blank" rel="noopener">Посетить сайт Example</a>

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

Безопасность и оптимизация: роль "noopener" и "noreferrer"

При использовании target="_blank" важно соблюдать безопасность и оптимизацию. Атрибут rel="noopener" помогает обеспечить защиту вашего сайта, блокируя новой вкладке доступ к вашей странице через window.opener, что минимизирует подобные уязвимости.

Кроме того, rel="noreferrer" обеспечивает дополнительную защиту, внедряя анонимность и увеличивая скорость загрузки страниц, благодаря блокировке передачи HTTP-заголовка Referer.

Пример безопасного использования:

<!-- Крепость: Надёжность, сопоставимая с надежностью швейцарского банка. Отличная скорость загрузки страниц. -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Посетить сайт Example</a>

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

Игра в названия: понимание поведения браузера с именованными целями

В HTML присутствуют особые зарезервированные имена для целей. "_blank" — одно из них. Когда вы присваиваете target="SomeWindowName", браузер ищет окно или вкладку с таким именем и, в случае успеха, использует её. В обратном случае создаёт новое.

"_new" воспринимается браузерами как именованная цель:

<!-- Перекрёсток: Может открывать новое окно по своему усмотрению -->
<a href="https://example.com" target="_new">Посетить сайт Example</a>

Такой подход вызывает неоднозначное поведение, поскольку "_new" не воспринимается как специальное имя, в отличие от "_blank", "_self", "_parent", "_top". Решение простое: избегайте использования target="_new" для предсказуемости и удобства навигации.

Священные тексты: зарезервированные имена целей и стандарты HTML

Спецификация HTML детально описывает зарезервированные имена целей и их поведение, обеспечивая стандартизацию и универсальность их использования:

• "_blank": при каждом клике открывается новая вкладка или окно.
• "_self": содержимое открывается в текущем окне или фрейме.
• "_parent": переход выполняется в родительский фрейм.
• "_top": содержимое отображается в полноэкранном режиме.

Для наиболее эффективного оформления ссылок используйте данные стандарты и Спецификацию HTML5.

Слушая легенд: мнения экспертов о "rel" атрибутах

Особую ценность представляют мнения экспертов, таких как Матиас Биннс и Джейк Арчибальд. Их публикации о атрибутах "rel" считаются обязательными к изучению для каждого веб-разработчика и служат отличным руководством по вопросам безопасности и лучшим практикам.

Визуализация

Можно представить различные варианты атрибута target в виде дверей в доме:

target="_blank": 🆕🌐 Каждая дверь ведёт в новую комнату. target="_new": 🔁🌐 Все двери открывают одну и ту же комнату.

Таким образом, target="_blank" надежно ведёт вас в новое место, в то время как с target="_new" вы рискуете обнаружить привычное пространство.

Полезные материалы

1. MDN – Элемент Anchor
2. HTML a target Attribute – W3Schools
3. HTML Standard – Hyperlink Target
4. Когда использовать target="_blank" – CSS-Tricks
5. Фреймы в HTML документах – W3C
6. WebAIM: Гипертекстовые ссылки – Создание доступных ссылок
7. Can I use... Support tables for rel=noopener