Подвал сайта (footer) [Модуль 8: Семантические элементы HTML5]: Тренажер HTML

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

Подвал сайта, или футер, — это не просто 'дно' страницы. Это важная семантическая область, где обычно размещают полезную информацию: контакты, сведения об авторских правах, ссылки на важные разделы (например, 'Условия использования' или 'Карта сайта') и иконки социальных сетей. Использование правильного тега семантического тега <footer> помогает поисковым системам лучше понять структуру вашей страницы, а вспомогательным технологиям — правильно её озвучить. В этих заданиях мы попрактикуемся в создании правильной и функциональной разметки для подвала сайта, используя различные семантические элементы HTML5.

Список тем

Основной тег подвала

id: 37868_html-footer-task-1

Создайте базовую структуру подвала сайта. Оберните предоставленный текст в семантический тег, который специально предназначен для определения подвала (футера) документа или раздела.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

                     <input1 class="site-footer">
  <p>© 2024 Моя Компания</p>
</input1>

HTML

<input1 class="site-footer">
  <p>© 2024 Моя Компания</p>
</input1>

Для обозначения 'подвала' или 'футера' сайта в HTML5 используется тег `<footer>`. Просто оберните им существующий контент.

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

Результат

Сообщения

Выполнить

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

Символ авторского права

id: 37868_html-footer-task-2

Добавьте в текст с информацией об авторских правах специальный HTML-символ 'копирайт'. Это стандартная практика для указания прав на контент.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

                     <footer class="site-footer">
  <p>input1 2024 Моя Компания. Все права защищены.</p>
</footer>

HTML

<footer class="site-footer">
  <p>input1 2024 Моя Компания. Все права защищены.</p>
</footer>

Для отображения символа © используется специальная HTML-сущность. Она начинается с амперсанда `&` и заканчивается точкой с запятой `;`. Попробуйте использовать `©`.

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

Результат

Сообщения

Выполнить

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

Размещение контактной информации

id: 37868_html-footer-task-3

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

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer address {
  font-style: normal;
  line-height: 1.6;
}
.site-footer p {
  margin: 5px 0;
  font-size: 14px;
  color: #ccc;
}

                     <footer class="site-footer">
  <input1>
    <p>г. Москва, ул. Веб-Разработки, д. 5</p>
    <p>info@example.com</p>
  </input1>
</footer>

HTML

<footer class="site-footer">
  <input1>
    <p>г. Москва, ул. Веб-Разработки, д. 5</p>
    <p>info@example.com</p>
  </input1>
</footer>

Для контактной информации в HTML5 предназначен тег `<address>`. Он используется для указания адресов, email, номеров телефонов и ссылок на веб-сайты.

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

Результат

Сообщения

Выполнить

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

Создание ссылки для email

id: 37868_html-footer-task-4

Превратите текстовый email-адрес в кликабельную ссылку, которая будет открывать почтовый клиент пользователя. Для этого нужно использовать специальную схему в атрибуте `href`.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer address {
  font-style: normal;
}
.site-footer a {
  color: #7bdef3;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

                     <footer class="site-footer">
  <address>
    <p>Email: <a href="input1:info@example.com">info@example.com</a></p>
  </address>
</footer>

HTML

<footer class="site-footer">
  <address>
    <p>Email: <a href="input1:info@example.com">info@example.com</a></p>
  </address>
</footer>

Чтобы создать ссылку на email, используйте схему `mailto:` перед адресом электронной почты в атрибуте `href`. Например: `href="mailto:user@example.com"`.

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

Результат

Сообщения

Выполнить

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

Создание кликабельного номера телефона

id: 37868_html-footer-task-5

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

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer address {
  font-style: normal;
}
.site-footer a {
  color: #7bdef3;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

                     <footer class="site-footer">
  <address>
    <p>Телефон: <a href="input1:+78001111111">8 (800) 111-11-11</a></p>
  </address>
</footer>

HTML

<footer class="site-footer">
  <address>
    <p>Телефон: <a href="input1:+78001111111">8 (800) 111-11-11</a></p>
  </address>
</footer>

Для создания ссылки на номер телефона используется схема `tel:`. В атрибуте `href` номер телефона указывается в международном формате без пробелов и дефисов, например: `href="tel:+71234567890"`.

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

Результат

Сообщения

Выполнить

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

Навигация в подвале

id: 37868_html-footer-task-6

Часто в подвале размещают важные ссылки. Оберните список ссылок в семантический тег, который предназначен для навигационных блоков на сайте.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: #7bdef3;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}

                     <footer class="site-footer">
  <input1 class="footer-nav">
    <ul>
      <li><a href="/terms">Условия</a></li>
      <li><a href="/privacy">Политика</a></li>
      <li><a href="/sitemap">Карта сайта</a></li>
    </ul>
  </input1>
</footer>

HTML

<footer class="site-footer">
  <input1 class="footer-nav">
    <ul>
      <li><a href="/terms">Условия</a></li>
      <li><a href="/privacy">Политика</a></li>
      <li><a href="/sitemap">Карта сайта</a></li>
    </ul>
  </input1>
</footer>

Для навигационных меню, будь то в шапке или подвале сайта, используется тег `<nav>`. Он сообщает браузеру, что этот блок содержит навигационные ссылки.

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

Результат

Сообщения

Выполнить

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

Список ссылок в навигации

id: 37868_html-footer-task-7

Правильно структурируйте навигационные ссылки в подвале. Используйте теги для создания маркированного списка и для каждого его элемента.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: #7bdef3;
  text-decoration: none;
}
.footer-nav a:hover {
  text-decoration: underline;
}

                     <footer class="site-footer">
  <nav class="footer-nav">
    <input1>
      <input2><a href="/about">О нас</a></input2>
      <input2><a href="/services">Услуги</a></input2>
      <input2><a href="/blog">Блог</a></input2>
    </input1>
  </nav>
</footer>

HTML

<footer class="site-footer">
  <nav class="footer-nav">
    <input1>
      <input2><a href="/about">О нас</a></input2>
      <input2><a href="/services">Услуги</a></input2>
      <input2><a href="/blog">Блог</a></input2>
    </input1>
  </nav>
</footer>

Для создания списков используется тег `<ul>` (неупорядоченный список). Каждый элемент внутри этого списка должен быть обернут в тег `<li>` (элемент списка).

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

Результат

Сообщения

Выполнить

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

Семантическое указание даты и атрибут

id: 37868_html-footer-task-8

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

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.site-footer p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
}

                     <footer class="site-footer">
  <p>Последнее обновление: <input1 input2="2024-05-21">21 мая 2024</input1></p>
</footer>

HTML

<footer class="site-footer">
  <p>Последнее обновление: <input1 input2="2024-05-21">21 мая 2024</input1></p>
</footer>

Для обозначения даты и времени используется тег `<time>`. Чтобы сделать дату понятной для машин (например, для поисковых систем), добавьте атрибут `datetime` со значением в формате `YYYY-MM-DD`.

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

Результат

Сообщения

Выполнить

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

Ссылки на социальные сети

id: 37868_html-footer-task-9

Добавьте иконку социальной сети в виде изображения. Укажите путь к изображению и добавьте альтернативный текст, который опишет картинку, если она не загрузится.

CSS

.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.social-links ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.social-links img {
  width: 24px;
  height: 24px;
}

                     <footer class="site-footer social-links">
  <ul>
    <li><a href="#"><img input1="https://naytikurs.ru/img/11s.svg" input2="Логотип ВКонтакте"></a></li>
    <li><a href="#"><img src="https://naytikurs.ru/img/12s.svg" alt="Логотип Telegram"></a></li>
  </ul>
</footer>

HTML

<footer class="site-footer social-links">
  <ul>
    <li><a href="#"><img input1="https://naytikurs.ru/img/11s.svg" input2="Логотип ВКонтакте"></a></li>
    <li><a href="#"><img src="https://naytikurs.ru/img/12s.svg" alt="Логотип Telegram"></a></li>
  </ul>
</footer>

Для вставки изображения используется тег `<img>`. Путь к файлу указывается в атрибуте `src`. Альтернативный текст, важный для доступности, задается в атрибуте `alt`.

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

Результат

Сообщения

Выполнить

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

Комплексная структура подвала

id: 37868_html-footer-task-10

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

CSS

body { font-family: Arial, sans-serif; }
.site-footer {
  background-color: #333;
  color: #fff;
  padding: 20px 15px;
}
.footer-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}
.footer-section h4 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; justify-content: center; gap: 15px; }
.site-footer a { color: #7bdef3; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer address { font-style: normal; }
.site-footer p { margin: 5px 0; font-size: 14px; color: #ccc; }

                     <input1 class="site-footer footer-container">
  <div class="footer-section">
    <h4>Навигация</h4>
    <input2 class="footer-nav">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Условия</a></li>
      </ul>
    </input2>
  </div>
  <div class="footer-section">
    <h4>Контакты</h4>
    <input3>
      <p>Email: <a href="mailto:support@example.com">support@example.com</a></p>
    </input3>
  </div>
  <p>© 2024 Все права защищены.</p>
</input1>

HTML

<input1 class="site-footer footer-container">
  <div class="footer-section">
    <h4>Навигация</h4>
    <input2 class="footer-nav">
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Условия</a></li>
      </ul>
    </input2>
  </div>
  <div class="footer-section">
    <h4>Контакты</h4>
    <input3>
      <p>Email: <a href="mailto:support@example.com">support@example.com</a></p>
    </input3>
  </div>
  <p>© 2024 Все права защищены.</p>
</input1>

Используйте `<footer>` как основной контейнер. Внутри него разместите блок навигации в теге `<nav>` и контактную информацию в теге `<address>`.

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

Результат

Сообщения

Выполнить

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