Menu
Coddy logo textTech

Секции и статьи

Часть раздела Fundamentals путешествия по HTML на Coddy. Урок 28 из 60.

В HTML теги <section> и <article> используются для организации содержимого в логические части.

Тег <section> определяет раздел в документе, например главы, заголовки, нижние колонтитулы или любые другие разделы документа. Это способ сгруппировать связанное содержимое. Например, вы можете использовать <section>, чтобы разделить страницу на введение, содержимое и контактную информацию.

Вот как можно использовать тег <section>:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

Тег <article> задаёт независимое, самодостаточное содержимое. Оно должно иметь смысл само по себе, и его должно быть возможно читать независимо от остальной части веб-сайта. Примеры использования элемента <article>: сообщение на форуме, запись в блоге, новостная статья или комментарий.

Вот как можно использовать тег <article>:

<article>
	<h2>Article Title</h2>
	<p>Article content goes here.</p>
</article>
challenge icon

Задание

Легко

Создай HTML-документ, который использует теги <section> и <article> для структурирования веб-страницы. Включи следующие разделы:

  1. Раздел <main> для размещения основного содержимого страницы.
  2. Внутри <main> создай <section> с заголовком (<h2>), содержащим текст "Upcoming Events".
  3. Внутри <section> создай два элемента <article>.
  4. Каждый элемент <article> должен содержать заголовок (<h3>) и абзац (<p>) с произвольным текстом. Используй "Event 1" и "Event 2" для заголовков, а "Event 1 details..." и "Event 2 details..." — для абзацев.
ТРЕБУЕМЫЙ ФОРМАТ ВЫВОДА: [Твоё переведённое содержимое здесь]

Попробуйте сами

<!DOCTYPE html>
<html>
    <body>
        <!-- Напишите код здесь -->
    </body>
</html>
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Fundamentals

Потренируйтесь самостоятельно: Песочница Web