Ссылки HTML

Сложно представить структуру сайта, в котором нет ссылок на другие страницы. Ведь это – основной способ перемещения внутри сайта! Ссылки HTML важны и необходимы. Они также могут вести на отдельные блоки внутри лендингов – сайтов, представленных одной страницей. 

Дополнительные параметры также позволяют сделать переход по ссылке безопасной и настроить переходы с использованием дополнительных вкладок браузера. Технические аспекты так же важны, как и графические, а потом при изучении верстки сайта очень важно понимать все особенности настроек тегов.

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

Но тег HREF имеет несколько дополнительных параметров, о которых стоит поговорить отдельно:

1. Базовая структура ссылки

<a href="https://example.com&quot;&gt;Текст ссылки</a>

• href: Основной атрибут, задающий URL (Uniform Resource Locator), на который ведет ссылка. Может быть абсолютным или относительным.

Пример:

• Абсолютный URL:

<a href="https://www.google.com&quot;&gt;Перейти на Google</a> - Открывает сайт Google.

• Относительный URL:

<a href="/about">О нас</a> - Указывает на страницу /about на текущем домене.

2. Текст ссылки

Между открывающим и закрывающим тегами <a> находится текст, который пользователь видит и по которому кликает. Это может быть не только текст, но и другие элементы.

Пример с изображением:

<a href="https://example.com&quot;&gt;

  <img src="image.jpg" alt="Картинка-ссылка">

</a>

Картинка станет кликабельной.

3. Атрибуты ссылки

Элемент <a> поддерживает множество атрибутов, которые задают дополнительные параметры для ссылки.

3.1. target

Указывает, где открывать ссылку.

• _self (по умолчанию): Открывает ссылку в текущем окне/вкладке.

• _blank: Открывает ссылку в новой вкладке.

• _parent: Открывает ссылку в родительском окне (если есть iframe).

• _top: Открывает ссылку в полном окне, отменяя вложенность iframe.

Пример:

<a href="https://example.com&quot; target="_blank">Открыть в новой вкладке</a>

3.2. rel

Определяет отношение текущей страницы к целевой ссылке. Важный атрибут для SEO и безопасности.

• nofollow: Указывает поисковикам не учитывать эту ссылку.

• noopener и noreferrer: Предотвращают передачу реферера и защиту от атак через window.opener.

Пример:

<a href="https://example.com&quot; target="_blank" rel="noopener noreferrer">

  Безопасная внешняя ссылка

</a>

3.3. title

Добавляет всплывающую подсказку при наведении курсора на ссылку.

Пример:

<a href="https://example.com&quot; title="</span><span style="font-size:14.0pt;color:black">Перейти на Example">Example</a>

3.4. download

Указывает, что по ссылке должен загружаться файл вместо его открытия в браузере. Можно задать имя для скачиваемого файла.

Пример:

<a href="file.pdf" download="document.pdf">Скачать PDF</a>

3.5. type

Указывает MIME-тип ресурса, на который ведет ссылка (например, text/html, application/pdf).

Пример:

<a href="document.pdf" type="application/pdf">Скачать PDF</a>

4. Якорные ссылки

Ссылки могут вести не только на другие страницы, но и на конкретные части текущей страницы. Для этого используется id элемента.

Пример:

<!-- Цель -->

<h2 id="section1">Раздел 1</h2>

<!-- Ссылка -->

<a href="#section1">Перейти к Разделу 1</a>

5. Ссылки с JavaScript

Можно привязать JavaScript к ссылке через атрибут href или обработчик событий onclick.

Пример:

<a href="#" onclick="alert('Привет!'); return false;">Кликни меня</a>

Здесь return false предотвращает стандартное поведение ссылки.

6. Стилизация ссылок

Ссылки можно стилизовать с помощью CSS:

a {

  color: blue; /* Цвет текста */

  text-decoration: none; /* Убирает подчеркивание */

}

a:hover {

  color: red; /* Цвет при наведении */

}

Пример:

<a href="https://example.com&quot; style="color: green; text-decoration: underline;">

  Зелёная подчеркнутая ссылка

</a>

7. Динамические ссылки

Ссылки могут быть генерируемыми на стороне сервера или клиента (например, через JavaScript).

Пример на JavaScript:

<a href="#" id="dynamicLink">Динамическая ссылка</a>

<script>

  document.getElementById('dynamicLink').href = 'https://example.com&#39;;

</script>

8. Ссылки на почту или телефон

Для создания ссылки, открывающей почтовый клиент или телефонный вызов, используются специальные схемы.

Почта:

<a href="mailto:example@example.com">Написать письмо</a>

Телефон:

<a href="tel:+1234567890">Позвонить</a>

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

А теперь стоит ответить на некоторые вопросы по теме, чтобы быть уверенным, что задания ЕГЭ решатся элементарно. Будьте внимательны и при подготовке к ЕГЭ – некоторые задания бывают очень заковыристыми!

Вопрос 1

Какой атрибут элемента <a> используется для указания адреса ссылки?

1. src

2. href 

3. rel

4. target

Вопрос 2

Какой атрибут позволяет открыть ссылку в новой вкладке?

1. rel="noopener"

2. target="_self"

3. target="_blank" 

4. type="text/html"

Вопрос 3

Что делает атрибут download в элементе <a>?

1. Открывает файл в новом окне.

2. Указывает, что файл должен быть скачан пользователем. 

3. Запрещает переход по ссылке.

4. Изменяет цвет ссылки при наведении.

Вопрос 4

Какой из вариантов схем используется для создания ссылки на телефонный номер?

1. mailto:

2. ftp:

3. http:

4. tel: 

Вопрос 5

Какой атрибут используется для добавления всплывающей подсказки к ссылке?

1. title 

2. alt

3. tooltip

4. aria-label

Вопрос 6

Какой атрибут предотвращает передачу реферера и защищает от атак через window.opener?

1. target="_blank"

2. rel="noopener noreferrer"

3. type="application/pdf"

4. href="#"

Вопрос 7

Каким будет результат следующего кода?

<a href="#section1">Перейти к Разделу 1</a>

<h2 id="section1">Раздел 1</h2>

1. Ничего не произойдет.

2. Ссылка переведет пользователя к заголовку с id="section1". 

3. Ссылка откроет новую страницу.

4. Ссылка загрузит файл с именем section1.