Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
- Напишите ссылку и сделайте, чтобы она открывалась в новом окне браузера
В предыдущем уроке научились создавать якоря на HTML-страницах при помощи атрибутов name и id. В этом уроке продолжим знакомство с основными атрибутами ссылок в HTML.
Атрибут target
Атрибут target совместим со всеми браузерами и это его первое удобство. И для чего он нужен? По умолчанию, при переходе по ссылке, новая страница открывается в этом же окне, а при помощи атрибута target это можно изменить.
Если установлено несуществующее значение атрибута target, то ссылка будет открываться в новом окне.
Далее таблица значений:
Значение target |
Описание |
|---|---|
_blank |
Загружает страницу в новое окно браузера. |
_self |
Загружает страницу в текущее окно. (Это значение по умолчанию, поэтому его необязательно указывать) |
_parent |
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self. |
_top |
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self. |
Пример открытия ссылки в новом окне:
<a href = "#" target = "_target">ссылка</a>Атрибут download
Если добавить атрибут download к ссылке, то браузер не будет переходить по ней, а предложить скачать указанный файл:
<a href = "https://codebra.ru/image.jpg" download>Скачать image.jpg</a>Атрибут rel
Атрибут rel определяет взаимоотношения между текущей страницей и страницей, на которую ведет ссылка с этим атрибутом. Значений у этого атрибута множество и все перечислять не вижу смысла. Остановимся на некоторых.
Значение nofollow атрибута rel
Значение nofollow - одно из самых популярных. Оно связано с SEO. Пример:
<a href = "https://domen.org" rel = "nofollow">Другой сайт</a>В таком случае эта ссылка не будет увеличивать ссылочный вес другого сайта, то есть по этой ссылке не передается индекс цитирования, который используют поисковики для ранжирования страниц в своей выдаче.
Значения noopener и noreferrer атрибута rel
Значения noopener и noreferrer тоже часто используются. Они не влияют на SEO, но имеют значения для безопасности. Значение noreferrer запрещает передачу HTTP-заголовков странице, а noopener ограничивает window.opener и кроссдоменный доступ.
<a href = "https://domen.org" target = "_blank" rel = "noopener noreferrer">Другой сайт</a>Добавляйте к ссылке, открываемой в новом окне (target = "_blank"), атрибут rel = "noopener noreferrer". Так вы повысите защищенность вашего веб-приложения. Сразу отвечу не возможный вопрос: «Что если злоумышленник удалит атрибут rel через консоль разработчика?». В таком случае важно понимать, это может помочь злоумышленнику при наличии физического доступа к устройству жертвы. В такой ситуации, наличие или отсутствие атрибута rel не будет влиять на безопасность.
К чему это примечание? Хотел подвести к другому моему курсу: тестирование на проникновение во внутреннюю сеть под управлением Active Directory.
Атрибут hreflang
Атрибут hreflang указывает язык документа, на который ведет ссылка. Например:
<a href = "https://codebra.ru/en/lessons-html/dating/1/1" hreflang="en">What is HTML?</a>В этом уроке изучили основные атрибуты ссылок: target, download, rel и hreflang. С атрибутом href вы познакомились ранее. Далее начнёте изучать тему про изображения в HTML.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
