Отличия 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"
вы рискуете обнаружить привычное пространство.