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