Когда использовать div, а когда семантические элементы [Модуль 8: Семантические элементы HTML5]: Тренажер HTML

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

Семантические элементы HTML5 делают код более понятным и структурированным. Вместо универсального div можно использовать элементы, которые явно указывают на назначение контента: header для шапки, nav для навигации, main для основного содержимого, article для независимых блоков контента, section для логических разделов, aside для боковой информации, footer для подвала страницы. Также есть элементы figure и figcaption для изображений с подписями, time для дат и времени, details и summary для раскрывающихся блоков. В этих заданиях вы научитесь правильно выбирать между обычным div и семантическими элементами в зависимости от содержимого. Семантическая разметка улучшает доступность сайта для людей с ограниченными возможностями и помогает поисковым системам лучше понимать структуру страницы.

Список тем

Шапка сайта

id: 37876_semantic-header-01

Замените общий контейнер на подходящий семантический элемент для шапки сайта с логотипом и заголовком.

CSS

.site-header {
  background: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}

.site-header h1 {
  margin: 0;
  font-size: 24px;
}

                     <input1 class="site-header">
  <h1>Мой сайт</h1>
  <p>Добро пожаловать!</p>
</input2>

HTML

<input1 class="site-header">
  <h1>Мой сайт</h1>
  <p>Добро пожаловать!</p>
</input2>

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

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

Результат

Сообщения

Выполнить

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

Навигационное меню

id: 37876_semantic-nav-02

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

CSS

.menu {
  background: #34495e;
  padding: 10px;
}

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

.menu a {
  color: white;
  text-decoration: none;
}

                     <input1 class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</input2>

HTML

<input1 class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</input2>

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

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

Результат

Сообщения

Выполнить

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

Основное содержимое страницы

id: 37876_semantic-main-03

Обозначьте основной контент страницы правильным семантическим элементом.

CSS

.content {
  max-width: 350px;
  margin: 20px auto;
  padding: 15px;
  background: #ecf0f1;
  border-radius: 5px;
}

.content h2 {
  color: #2c3e50;
  margin-top: 0;
}

                     <input1 class="content">
  <h2>Основная информация</h2>
  <p>Это главное содержимое страницы, которое уникально для данной страницы.</p>
</input2>

HTML

<input1 class="content">
  <h2>Основная информация</h2>
  <p>Это главное содержимое страницы, которое уникально для данной страницы.</p>
</input2>

Элемент main используется для основного содержимого страницы. На странице должен быть только один элемент main, и он не должен находиться внутри header, nav, footer, aside или article.

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

Результат

Сообщения

Выполнить

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

Статья в блоге

id: 37876_semantic-article-04

Оформите пост блога с заголовком и текстом в подходящий семантический контейнер.

CSS

.blog-post {
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}

.blog-post h3 {
  color: #27ae60;
  margin-top: 0;
}

.post-date {
  color: #7f8c8d;
  font-size: 14px;
}

                     <input1 class="blog-post">
  <h3>Новости компании</h3>
  <p class="post-date">15 декабря 2024</p>
  <p>Сегодня мы рады сообщить о запуске нового продукта...</p>
</input2>

HTML

<input1 class="blog-post">
  <h3>Новости компании</h3>
  <p class="post-date">15 декабря 2024</p>
  <p>Сегодня мы рады сообщить о запуске нового продукта...</p>
</input2>

Элемент article представляет независимый, самодостаточный контент, который может быть распространен отдельно от остальной части сайта. Подходит для постов блога, новостей, комментариев.

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

Результат

Сообщения

Выполнить

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

Логический раздел страницы

id: 37876_semantic-section-05

Выделите тематический раздел страницы с услугами компании в правильный семантический элемент.

CSS

.services {
  background: #f8f9fa;
  padding: 20px;
  margin: 15px 0;
}

.services h2 {
  color: #e74c3c;
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 10px;
}

.services ul {
  margin: 15px 0;
}

                     <input1 class="services">
  <h2>Наши услуги</h2>
  <ul>
    <li>Веб-разработка</li>
    <li>Мобильные приложения</li>
    <li>Консультации</li>
  </ul>
</input2>

HTML

<input1 class="services">
  <h2>Наши услуги</h2>
  <ul>
    <li>Веб-разработка</li>
    <li>Мобильные приложения</li>
    <li>Консультации</li>
  </ul>
</input2>

Элемент section представляет тематическую группировку контента, обычно с заголовком. Используется для логического разделения контента на части.

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

Результат

Сообщения

Выполнить

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

Боковая панель

id: 37876_semantic-aside-06

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

CSS

.sidebar {
  background: #95a5a6;
  color: white;
  padding: 15px;
  border-radius: 5px;
}

.sidebar h3 {
  margin-top: 0;
  font-size: 18px;
}

.sidebar p {
  font-size: 14px;
  line-height: 1.5;
}

                     <input1 class="sidebar">
  <h3>Интересный факт</h3>
  <p>HTML5 был опубликован в 2014 году и принес множество новых семантических элементов.</p>
</input2>

HTML

<input1 class="sidebar">
  <h3>Интересный факт</h3>
  <p>HTML5 был опубликован в 2014 году и принес множество новых семантических элементов.</p>
</input2>

Элемент aside представляет контент, косвенно связанный с основным содержимым. Часто используется для боковых панелей, рекламных блоков, дополнительной информации.

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

Результат

Сообщения

Выполнить

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

Подвал сайта

id: 37876_semantic-footer-07

Оформите нижнюю часть страницы с копирайтом в соответствующий семантический элемент.

CSS

.site-footer {
  background: #2c3e50;
  color: #ecf0f1;
  text-align: center;
  padding: 15px;
  margin-top: 20px;
}

.site-footer p {
  margin: 5px 0;
  font-size: 14px;
}

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

Изображение с подписью

id: 37876_semantic-figure-08

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

CSS

.image-block {
  margin: 20px 0;
  text-align: center;
}

.image-block img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.image-block figcaption {
  margin-top: 10px;
  font-style: italic;
  color: #7f8c8d;
  font-size: 14px;
}

                     <input1 class="image-block">
  <img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">
  <input2>Красивый пейзаж на закате</input3>
</input4>

HTML

<input1 class="image-block">
  <img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">
  <input2>Красивый пейзаж на закате</input3>
</input4>

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

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

Результат

Сообщения

Выполнить

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

Дата публикации

id: 37876_semantic-time-09

Оформите дату публикации статьи с использованием семантического элемента для времени.

CSS

.article-header {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.article-header h2 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.publish-date {
  color: #7f8c8d;
  font-size: 14px;
}

time {
  font-weight: 600;
}

                     <div class="article-header">
  <h2>Важное обновление</h2>
  <p class="publish-date">
    Опубликовано: <input1 datetime="2024-12-15">15 декабря 2024</input2>
  </p>
</div>

HTML

<div class="article-header">
  <h2>Важное обновление</h2>
  <p class="publish-date">
    Опубликовано: <input1 datetime="2024-12-15">15 декабря 2024</input2>
  </p>
</div>

Элемент time представляет дату и/или время. Атрибут datetime позволяет указать машиночитаемый формат даты.

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

Результат

Сообщения

Выполнить

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

Базовая структура страницы

id: 37876_semantic-structure-10

Создайте правильную семантическую структуру простой веб-страницы с шапкой, основным контентом и подвалом.

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  background: #3498db;
  color: white;
  padding: 15px;
}

main {
  padding: 20px;
  min-height: 150px;
}

footer {
  background: #34495e;
  color: white;
  padding: 10px;
  text-align: center;
}

                     <input1>
  <h1>Мой сайт</h1>
</input2>

<input3>
  <h2>Добро пожаловать</h2>
  <p>Основное содержимое страницы</p>
</input4>

<input5>
  <p>© 2024</p>
</input6>

HTML

<input1>
  <h1>Мой сайт</h1>
</input2>

<input3>
  <h2>Добро пожаловать</h2>
  <p>Основное содержимое страницы</p>
</input4>

<input5>
  <p>© 2024</p>
</input6>

Типичная структура страницы включает header для шапки, main для основного содержимого и footer для подвала. Эти элементы помогают создать логичную структуру документа.

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

Результат

Сообщения

Выполнить

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

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

id: 37876_semantic-nested-11

Организуйте блог с несколькими статьями внутри тематической секции.

CSS

.blog-section {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 5px;
}

.blog-section h2 {
  color: #e67e22;
  margin-top: 0;
}

article {
  background: white;
  padding: 10px;
  margin: 10px 0;
  border-left: 3px solid #e67e22;
}

article h3 {
  margin-top: 0;
  color: #2c3e50;
}

                     <input1 class="blog-section">
  <h2>Последние новости</h2>
  
  <input2>
    <h3>Первая новость</h3>
    <p>Текст первой новости...</p>
  </input3>
  
  <input4>
    <h3>Вторая новость</h3>
    <p>Текст второй новости...</p>
  </input5>
</input6>

HTML

<input1 class="blog-section">
  <h2>Последние новости</h2>
  
  <input2>
    <h3>Первая новость</h3>
    <p>Текст первой новости...</p>
  </input3>
  
  <input4>
    <h3>Вторая новость</h3>
    <p>Текст второй новости...</p>
  </input5>
</input6>

Section может содержать несколько элементов article. Это логично, когда у вас есть раздел с несколькими независимыми статьями или постами.

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

Результат

Сообщения

Выполнить

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

Раскрывающийся блок

id: 37876_semantic-details-12

Создайте интерактивный раскрывающийся блок с дополнительной информацией.

CSS

details {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin: 15px 0;
  background: #f9f9f9;
}

summary {
  font-weight: bold;
  cursor: pointer;
  color: #16a085;
  padding: 5px;
}

summary:hover {
  color: #1abc9c;
}

details[open] {
  background: #fff;
}

details p {
  margin: 10px 0 0 0;
  padding: 10px;
  background: #ecf0f1;
  border-radius: 3px;
}

                     <input1>
  <input2>Нажмите для подробностей</input3>
  <p>Здесь скрытая информация, которая появляется при раскрытии блока. Это удобно для FAQ и дополнительных сведений.</p>
</input4>

HTML

<input1>
  <input2>Нажмите для подробностей</input3>
  <p>Здесь скрытая информация, которая появляется при раскрытии блока. Это удобно для FAQ и дополнительных сведений.</p>
</input4>

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

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

Результат

Сообщения

Выполнить

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

Комплексная структура с навигацией

id: 37876_semantic-complex-13

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

CSS

header {
  background: #2980b9;
  color: white;
  padding: 10px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  gap: 15px;
}

nav a {
  color: white;
  text-decoration: none;
}

main {
  display: flex;
  gap: 15px;
  padding: 15px;
}

article {
  flex: 1;
  background: #ecf0f1;
  padding: 15px;
  border-radius: 5px;
}

aside {
  width: 120px;
  background: #bdc3c7;
  padding: 10px;
  border-radius: 5px;
}

h1, h2, h3 {
  margin-top: 0;
}

                     <input1>
  <h1>Сайт</h1>
  <input2>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Блог</a></li>
    </ul>
  </input3>
</input4>

<input5>
  <input6>
    <h2>Статья дня</h2>
    <p>Основной текст статьи...</p>
  </input7>
  
  <input8>
    <h3>Реклама</h3>
    <p>Акция!</p>
  </input9>
</input10>

HTML

<input1>
  <h1>Сайт</h1>
  <input2>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Блог</a></li>
    </ul>
  </input3>
</input4>

<input5>
  <input6>
    <h2>Статья дня</h2>
    <p>Основной текст статьи...</p>
  </input7>
  
  <input8>
    <h3>Реклама</h3>
    <p>Акция!</p>
  </input9>
</input10>

В header может находиться nav. Main содержит основной контент и может включать article и aside. Это создает логичную и доступную структуру страницы.

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

Результат

Сообщения

Выполнить

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