Статьи и самодостаточный контент (article)

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

Опубликовано 04.04.2025
Просмотры 14
Автор
Рек. время прохождения 3 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы сосредоточимся на одном из ключевых семантических элементов HTML5 — теге `<article>`. Этот тег используется для разметки самодостаточного, независимого контента, который можно распространять отдельно от остального сайта. Представьте себе новостную статью, пост в блоге, сообщение на форуме или комментарий пользователя — всё это идеальные кандидаты для `<article>`. Правильное использование этого тега не только улучшает структуру вашего кода, но и помогает поисковым системам и вспомогательным технологиям (например, скринридерам) лучше понимать ваш контент. Вы научитесь определять, где следует использовать `<article>`, как вкладывать их друг в друга (например, для комментариев к статье) и как сочетать с другими семантическими тегами, такими как `<header>`, `<footer>` и `<time>`, для создания осмысленной и логичной разметки.
Список тем

Создание первой статьи

id: 37869_article-basic-1

Перед вами блок с новостью. Сейчас он обернут в обычный `<div>`. Ваша задача — заменить `div` на более подходящий семантический тег, который предназначен для независимых блоков контента, таких как новостные статьи.

CSS
body { 
  background-color: #f0f2f5; 
  font-family: sans-serif; 
}
.news-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.news-item h2 {
  margin-top: 0;
  font-size: 1.2em;
  color: #1d2129;
}
.news-item p {
  color: #606770;
}
HTML
<input1 class="news-item">
  <h2>Новый рекорд в скорости обработки данных</h2>
  <p>Ученые объявили о прорыве в квантовых вычислениях, что может кардинально изменить мир технологий.</p>
</input1>
Для самодостаточного контента, который может существовать независимо от остальной части страницы (например, пост в блоге или новость), используется тег `<article>`. Замените открывающий и закрывающий теги `<div>` на `<article>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Разметка нескольких статей

id: 37869_article-multiple-2

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

CSS
body { 
  background-color: #f0f2f5; 
  font-family: sans-serif; 
}
.post {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin: 10px;
}
.post h2 {
  margin: 0 0 10px 0;
  font-size: 1.1em;
}
.post p {
  margin: 0;
}
HTML
<!-- Первый пост -->
<input1 class="post">
  <h2>Советы по изучению JavaScript</h2>
  <p>Начинайте с основ, практикуйтесь каждый день и не бойтесь делать ошибки. Это ключ к успеху.</p>
</input1>

<!-- Второй пост -->
<input2 class="post">
  <h2>Обзор нового фреймворка</h2>
  <p>Вышел новый UI фреймворк, который обещает высокую производительность и легкость в использовании.</p>
</input2>
Каждый пост в ленте является самодостаточным и может быть прочитан отдельно. Оберните каждый из них в собственный тег `<article>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Статья с шапкой и подвалом

id: 37869_article-header-footer-3

Хорошая статья часто имеет шапку (заголовок, автор, дата) и подвал (теги, категории). Добавьте соответствующие семантические теги для шапки и подвала внутри статьи.

Добавление даты публикации

id: 37869_article-time-4

Дата и время — важная информация для статьи. Используйте семантический тег `<time>` для разметки даты публикации. Также добавьте атрибут, который содержит дату в машиночитаемом формате.

CSS
body { font-family: sans-serif; }
article {
  border: 1px solid #ccc;
  padding: 15px;
  margin: 10px;
}
.meta-info {
  color: gray;
  font-size: 0.9em;
}
HTML
<article>
  <h2>Исследование космоса</h2>
  <p>Новые данные с телескопа "Джеймс Уэбб"...</p>
  <div class="meta-info">
    Опубликовано: <input1 input2="2023-10-26">26 октября 2023</input1>
  </div>
</article>
Оберните дату в тег `<time>`. Чтобы сделать дату понятной для машин (поисковиков, календарей), добавьте атрибут `datetime` со значением в формате ГГГГ-ММ-ДД.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Вложенные статьи: комментарии

id: 37869_article-nested-5

Комментарии к посту в блоге сами по себе являются самодостаточными единицами контента. Ваша задача — разметить каждый комментарий как вложенную статью внутри основной статьи.

CSS
body { font-family: sans-serif; }
.main-post { 
  background: #fff; 
  border: 1px solid #ccc; 
  padding: 15px; 
  margin-bottom: 20px; 
}
.comments-section { 
  margin-left: 20px; 
}
.comment { 
  background: #f9f9f9; 
  border: 1px solid #eee; 
  padding: 10px; 
  margin-top: 10px; 
}
.comment p { margin: 5px 0 0 0; }
HTML
<article class="main-post">
  <h2>Мое путешествие на Алтай</h2>
  <p>Горы были восхитительны...</p>

  <section class="comments-section">
    <h3>Комментарии:</h3>
    <input1 class="comment">
      <h4>Мария</h4>
      <p>Отличный рассказ! Тоже хочу туда поехать.</p>
    </input1>
    <input2 class="comment">
      <h4>Иван</h4>
      <p>Спасибо за фотографии, очень красиво!</p>
    </input2>
  </section>
</article>
Теги `<article>` можно вкладывать друг в друга. Основной пост — это родительский `<article>`, а каждый комментарий к нему — это дочерний `<article>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Различие между <article> и <section>

id: 37869_article-vs-section-6

Часто путают теги `<article>` и `<section>`. В этом задании у вас есть одна большая статья (руководство), которая разделена на логические части: введение, основная часть и заключение. Используйте правильный тег для группировки этих частей внутри статьи.

CSS
body { font-family: sans-serif; }
article { 
  border: 1px solid #007bff; 
  padding: 15px; 
  background: #f8f9fa; 
}
section { 
  border-left: 3px solid #17a2b8; 
  padding-left: 15px; 
  margin-top: 20px; 
}
h1, h2 { color: #333; }
HTML
<article>
  <h1>Полное руководство по CSS Grid</h1>
  <p>Это руководство поможет вам освоить все тонкости CSS Grid Layout.</p>

  <input1>
    <h2>Введение в Grid</h2>
    <p>CSS Grid - это двумерная система сеток...</p>
  </input1>

  <input2>
    <h2>Основные свойства</h2>
    <p>Рассмотрим такие свойства как grid-template-columns, grid-template-rows...</p>
  </input2>

</article>
Тег `<article>` используется для всего независимого материала (в данном случае, для всего руководства). Тег `<section>` используется для разделения этого материала на логические группы. Вам нужно обернуть введение и основную часть в теги `<section>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Карточка товара как статья

id: 37869_article-product-card-7

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

CSS
body { font-family: sans-serif; background: #f4f4f4; }
.product-card { 
  width: 250px;
  border: 1px solid #ddd; 
  background: #fff; 
  padding: 15px; 
  margin: 15px auto; 
  text-align: center; 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.product-card img { 
  max-width: 100%; 
  height: auto; 
  margin-bottom: 10px;
}
.product-card .price { 
  font-weight: bold; 
  color: #28a745; 
  font-size: 1.2em;
}
HTML
<input1 class="product-card">
  <img src="https://naytikurs.ru/img/7.png" alt="Смарт-часы">
  <h3>Смарт-часы "Pulse"</h3>
  <p class="price">15 000 руб.</p>
  <button>В корзину</button>
</input1>
Поскольку карточка товара представляет собой законченный, независимый фрагмент контента, для её разметки идеально подходит тег `<article>`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру