Семантические элементы HTML позволяют лучше структурировать контент на веб-странице, делая его более понятным как для разработчиков, так и для поисковых систем и вспомогательных технологий. В этом уроке мы рассмотрим, что такое семантические элементы, почему они важны и какие семантические элементы предоставляет HTML5.
Семантические элементы HTML четко определяют их содержимое. Например, элемент <article> указывает, что его содержимое является самостоятельной частью документа, такую как статья. Это отличается от несемантических элементов, таких как <div>, которые не несут информации о содержимом.
<header>Элемент <header> используется для определения верхней части документа или секции. Обычно содержит заголовок, навигацию и другие вводные элементы.
<header>
<h1>Мой сайт</h1>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<nav>Элемент <nav> предназначен для секции с навигационными ссылками.
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
<main>Элемент <main> обозначает основное содержимое документа. Должен быть уникальным и содержать основной контент страницы.
<main>
<h1>Добро пожаловать на мой сайт</h1>
<p>Это основное содержимое страницы.</p>
</main>
<section>Элемент <section> используется для разделения контента на тематические секции. Каждая секция должна иметь заголовок.
<section>
<h2>О нас</h2>
<p>Мы — ведущая компания в нашей отрасли.</p>
</section>
<article>Элемент <article> предназначен для независимого, самодостаточного контента, такого как статья или блог-пост.
<article>
<h2>Заголовок статьи</h2>
<p>Это содержание статьи.</p>
</article>
<aside>Элемент <aside> используется для контента, который косвенно связан с основным содержимым, например, боковая панель с дополнительной информацией.
<aside>
<h2>Новости</h2>
<p>Последние обновления и новости.</p>
</aside>
<footer>Элемент <footer> определяет нижнюю часть документа или секции. Обычно содержит информацию об авторских правах, контакты и ссылки на дополнительные ресурсы.
<footer>
<p>© 2024 Мой сайт. Все права защищены.</p>
</footer>
<figure> и <figcaption>Элемент <figure> используется для обозначения автономного содержимого, например, изображений, диаграмм или иллюстраций. Элемент <figcaption> предоставляет подпись к этому содержимому.
<figure>
<img decoding="async" src="image.jpg" alt="Описание изображения">
<figcaption>Это изображение.</figcaption>
</figure>
<mark>Элемент <mark> выделяет текст, который имеет особое значение или важность в контексте.
<p>Обратите внимание на <mark>важную информацию</mark>.</p>
<time>Элемент <time> используется для обозначения даты или времени.
<p>Событие состоится <time datetime="2024-08-05">5 августа 2024 года</time>.</p>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример семантических элементов</title>
</head>
<body>
<header>
<h1>Мой сайт</h1>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Добро пожаловать</h2>
<p>Мы рады приветствовать вас на нашем сайте.</p>
</section>
<article>
<h2>Последние новости</h2>
<p>Здесь вы найдете самые свежие новости.</p>
</article>
<aside>
<h2>Боковая панель</h2>
<p>Дополнительная информация и ссылки.</p>
</aside>
</main>
<footer>
<p>© 2024 Мой сайт. Все права защищены.</p>
</footer>
</body>
</html>
В этом уроке мы изучили семантические элементы HTML и их важность для создания структурированных, доступных и SEO-оптимизированных веб-страниц. Применение семантических элементов улучшает читаемость кода и взаимодействие с пользователем.
Создайте веб-страницу, используя семантические элементы, которые вы изучили в этом уроке. Страница должна включать:
<header> с заголовком и навигацией.<main> с двумя <section>, содержащими заголовки и абзацы.<article> с заголовком и содержимым.<aside> с дополнительной информацией.<footer> с информацией об авторских правах.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Тестовое задание: Семантические элементы</title>
</head>
<body>
<header>
<h1>Название сайта</h1>
<nav>
<ul>
<li><a href="#home">Главная</a></li>
<li><a href="#about">О нас</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Первый раздел</h2>
<p>Описание первого раздела.</p>
</section>
<section>
<h2>Второй раздел</h2>
<p>Описание второго раздела.</p>
</section>
<article>
<h2>Статья</h2>
<p>Содержание статьи.</p>
</article>
<aside>
<h2>Дополнительная информация</h2>
<p>Полезные ссылки и ресурсы.</p>
</aside>
</main>
<footer>
<p>© 2024 Название сайта. Все права защищены.</p>
</footer>
</body>
</html>
Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.
Наша цель и главная задача сделать качественное образование в вашем браузере
Телефон: +375 33 910-08-92
Email: info@codefor.tech
Адрес: г. Барановичи, ул. Пирогова, д. 7
© 2024-2025 Все права защищены. CodeFor.
