Секции и статьи
Часть раздела Основы путешествия по 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>Задание
ЛегкоСоздай HTML-документ, в котором используются теги <section> и <article> для структурирования веб-страницы. Добавь следующие разделы:
- Раздел
<main>для основного содержимого страницы. - Внутри
<main>создай<section>с заголовком (<h2>) «Upcoming Events». - Внутри
<section>создай два элемента<article>. - В каждом элементе
<article>должны быть заголовок (<h3>) и абзац (<p>) с произвольным текстом. Для заголовков используй "Event 1" и "Event 2", а для абзацев — "Event 1 details..." и "Event 2 details...".
Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Основы
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция Header9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2Потренируйтесь самостоятельно: Песочница Web