Заголовки ссылок (title) [Модуль 3: Ссылки и навигация]: Тренажер HTML

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

Атрибут `title` — это важный инструмент для улучшения пользовательского опыта и доступности вашего сайта. Он позволяет добавить к ссылке дополнительную информацию, которая появляется в виде всплывающей подсказки при наведении курсора. Это особенно полезно, когда текст самой ссылки недостаточно информативен, например, «Читать далее» или «Подробнее». В таких случаях `title` может уточнить, куда именно ведет ссылка: «Читать далее: 10 советов по CSS». Также этот атрибут активно используется скринридерами, предоставляя дополнительный контекст для людей с ограниченными возможностями. В этой серии заданий вы отработаете навык добавления и правильного использования атрибута `title` для ссылок, от самых простых случаев до более комплексных.

Список тем

Добавление атрибута title

id: 37804_html-links-title-1

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

CSS

a {
  color: #007bff;
  font-family: sans-serif;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 2px dotted #007bff;
  padding-bottom: 2px;
}
a:hover {
  color: #0056b3;
}

                     <a href="#" input1="Это моя первая подсказка!">
  Наведи на меня
</a>

HTML

<a href="#" input1="Это моя первая подсказка!">
  Наведи на меня
</a>

Для создания всплывающей подсказки используется атрибут `title`. Его нужно добавить в открывающий тег `<a>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Заполнение значения для title

id: 37804_html-links-title-2

У этой ссылки уже есть атрибут для подсказки, но его значение пустое. Заполните его, чтобы при наведении появлялся текст: 'Узнать больше о языке разметки HTML'.

CSS

a {
  display: inline-block;
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  font-family: sans-serif;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}
a:hover {
  background-color: #218838;
}

                     <a href="#" title="input1">
  Что такое HTML?
</a>

HTML

<a href="#" title="input1">
  Что такое HTML?
</a>

Просто впишите требуемый текст в кавычки атрибута `title`. Текст должен точно соответствовать заданию.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Атрибут и значение вместе

id: 37804_html-links-title-3

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

CSS

a {
  color: #dc3545;
  font-family: sans-serif;
  font-size: 18px;
  font-weight: bold;
}
a:hover {
  text-decoration: none;
}

                     <a href="#" input1="input2">
  Фотографии
</a>

HTML

<a href="#" input1="input2">
  Фотографии
</a>

Сначала напишите имя атрибута — `title`. Затем поставьте знак `=` и в кавычках укажите нужный текст.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подсказки для навигационного меню

id: 37804_html-links-title-4

Перед вами простое меню сайта. Добавьте информативные подсказки к ссылкам, чтобы пользователям было проще ориентироваться. Для ссылки 'Главная' используйте подсказку 'Перейти на главную страницу', а для 'Контакты' — 'Наши контактные данные'.

CSS

ul {
  list-style-type: none;
  padding: 0;
  font-family: sans-serif;
}
li {
  margin-bottom: 10px;
}
a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
}
a:hover {
  color: #007bff;
}

                     <ul>
  <li>
    <a href="#" input1="Перейти на главную страницу">
      Главная
    </a>
  </li>
  <li>
    <a href="#" title="input2">
      Контакты
    </a>
  </li>
</ul>

HTML

<ul>
  <li>
    <a href="#" input1="Перейти на главную страницу">
      Главная
    </a>
  </li>
  <li>
    <a href="#" title="input2">
      Контакты
    </a>
  </li>
</ul>

Для каждой ссылки в списке (`<li>`) найдите тег `<a>` и добавьте в него атрибут `title` с соответствующим текстом из задания.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Подсказка для ссылки-изображения

id: 37804_html-links-title-5

Часто в качестве ссылки используют не текст, а изображение. Добавьте к ссылке, оборачивающей картинку, всплывающую подсказку с текстом 'Увеличить фото заката'.

CSS

img {
  max-width: 100%;
  height: auto;
  border: 2px solid #ddd;
  border-radius: 8px;
  display: block;
}
a:hover img {
  border-color: #007bff;
}

                     <a href="#" input1="input2">
  <img src="https://naytikurs.ru/img/5.png" alt="Закат на море">
</a>

HTML

<a href="#" input1="input2">
  <img src="https://naytikurs.ru/img/5.png" alt="Закат на море">
</a>

Атрибут `title` нужно добавлять именно к тегу `<a>`, а не к `<img>`. Таким образом, вся область картинки станет интерактивной и будет показывать подсказку при наведении.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Исправление ошибки: неверный атрибут

id: 37804_html-links-title-6

В этом коде была допущена ошибка: для создания подсказки использовали атрибут `alt`, который предназначен для другого. Замените неверный атрибут на правильный, чтобы подсказка заработала.

CSS

a {
  color: #17a2b8;
  font-family: sans-serif;
  font-size: 18px;
}

                     <a href="#" input1="Эта подсказка должна работать!">
  Ссылка с ошибкой
</a>

HTML

<a href="#" input1="Эта подсказка должна работать!">
  Ссылка с ошибкой
</a>

Атрибут `alt` используется для предоставления альтернативного текста для изображений. Для создания всплывающих подсказок у любых элементов, включая ссылки, используется атрибут `title`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Информативная подсказка для кнопки 'Подробнее'

id: 37804_html-links-title-7

Перед вами карточка товара. Ссылка 'Подробнее' не очень информативна сама по себе. Добавьте ей атрибут `title` с текстом 'Перейти на страницу с описанием смартфона', чтобы улучшить юзабилити.

CSS

.card {
  font-family: sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card img {
  max-width: 100%;
  border-radius: 4px;
}
.card h3 {
  margin-top: 10px;
  margin-bottom: 5px;
}
.card a {
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
  color: #007bff;
}

                     <div class="card">
  <img src="https://naytikurs.ru/img/8.png" alt="Смартфон">
  <h3>Новый смартфон 2024</h3>
  <a href="#" input1="input2">
    Подробнее...
  </a>
</div>

HTML

<div class="card">
  <img src="https://naytikurs.ru/img/8.png" alt="Смартфон">
  <h3>Новый смартфон 2024</h3>
  <a href="#" input1="input2">
    Подробнее...
  </a>
</div>

Ссылки с общим текстом ('далее', 'подробнее', 'узнать') — главные кандидаты на добавление атрибута `title`. Уточните в подсказке, куда именно попадет пользователь, перейдя по ссылке.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку