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