Семантические теги
Часть раздела Fundamentals путешествия по HTML на Coddy — урок 27 из 60.
Семантические теги в HTML помогают определить значение контента, делая код более понятным как для разработчиков, так и для браузеров. В отличие от <div> и <span>, они дают контекст вложенному содержимому.
Общие семантические теги:
<header>– Вводный контент, обычно в верхней части.<nav>– Содержит навигационные ссылки.
<main>– Основное содержимое страницы.<article>– Самостоятельный фрагмент, например, пост в блоге.
<section>– Группирует связанный контент, часто с заголовком.<footer>– Нижний раздел с такой информацией, как авторские права или контактные данные.
<header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Заголовок статьи</h2>
<p>Здесь будет содержание статьи.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Эта структура обеспечивает четкую и осмысленную разметку для контента.
Задание
ЛегкоСоздайте страницу отзывов о фильмах, используя семантический HTML. Она должна включать:
1. <header> с:
<h1>"Movie Reviews"<nav>со ссылками: "Home", "Reviews", “Top Picks”
2. <main> с:
<article>для отзыва, который содержит:<h2>с названием фильма<p>с кратким отзывом
3. <footer> с:
<p>"Copyright 2023 Movie Reviews"
Шпаргалка
Семантические теги в HTML помогают определить значение контента, делая код более понятным как для разработчиков, так и для браузеров. В отличие от <div> и <span>, они придают контекст заключенному в них содержимому.
Распространенные семантические теги:
<header>– Вводный контент, обычно располагается вверху.<nav>– Содержит навигационные ссылки.<main>– Основное содержимое страницы.<article>– Самостоятельный фрагмент контента, например, пост в блоге.<section>– Группирует связанный контент, часто с заголовком.<footer>– Нижний раздел с такой информацией, как авторские права или контактные данные.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>Попробуйте сами
<!DOCTYPE html>
<html>
<body>
<!-- Напишите код здесь -->
</body>
</html>
Проверьте себяВ этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Fundamentals
1Основы HTML
Что такое HTML?Базовая структура HTMLТеги и элементыВложенность и закрывающие тегиКомментарии в HTML7Страница личного профиля
Обзор проектаСекция Header
Фото профиляСекция «Обо мне»Ссылки на социальные сети2Текст и форматирование
ЗаголовкиАбзацыПереносы строкЖирный и курсивный текстСнова жирный и курсивныйПовторение — форматирование8Формы и поля ввода, часть 1
Основы формТекстовые поля вводаАтрибуты полей вводаПоле для пароляМетки для полей вводаПовторение — основы форм11Страница регистрации на мероприятие
Обзор проектаСекция HeaderСекция деталей мероприятияФорма регистрацииСекция Footer9Формы и элементы ввода. Часть 2
РадиокнопкиЧекбоксыВыпадающие спискиКнопкиКнопки в формахПовторение — Формы №1Повторение — Формы №2