Семантические теги HTML
Дата последнего обновления статьи:
Семантический HTML тег — это элемент HTML, который имеет четкое значение и предназначение, что позволяет браузерам и поисковым системам лучше понимать структуру и содержание веб-страницы. Семантические теги помогают улучшить доступность контента для пользователей и делают его более понятным для поисковых систем, что в свою очередь способствует лучшему SEO.
Примеры семантических тегов
- <header>: Определяет верхнюю часть страницы или раздела.
<header> <h1>Заголовок сайта</h1> ... </header> - <nav>: Определяет навигационные ссылки.
<nav> <ul> <li><a href="#home">Главная</a></li> <li><a href="#services">Услуги</a></li> </ul> </nav> - <main>: Содержит основной контент, который не повторяется на других страницах.
<main> <section id="home"> ... </section> <section id="about"> ... </section> </main> - <section>: Используется для разделения контента на логические блоки.
<section id="about"> <h2>О нас</h2> <p>Содержимое раздела "О нас"...</p> </section> - <article>: Определяет независимый, самодостаточный контент.
<article> <h2>Заголовок статьи</h2> <p>Содержимое статьи...</p> </article> - <aside>: Определяет контент, который не является основным.
<aside> <h3>Полезные ссылки</h3> <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </aside> - <footer>: Определяет нижнюю часть страницы или раздела.
<footer> <p>© 2025 Моя компания. Все права защищены.</p> </footer>
Практическое задание
Создайте простую веб-страницу, используя семантические HTML теги:
- Заголовок страницы, который будет находиться в теге <header>.
- Основной контент, который будет заключён в тег <main>.
- Контент должен быть разделён на несколько секций с использованием тегов <section>.
- Один или несколько тегов <article>, содержащих текст.
- Боковую панель с дополнительной информацией, используя тег <aside>.
- Навигационное меню, используя тег <nav>.
- Нижний колонтитул с информацией о авторских правах, используя тег <footer>.
Следующий пример можно взять за основу:
<!DOCTYPE html> <!-- Определяет тип документа как HTML5 -->
<html lang="ru"> <!-- Начало HTML-документа с указанием языка (русский) -->
<head> <!-- Содержит метаданные, которые не видны пользователю -->
<meta charset="UTF-8"> <!-- Устанавливает кодировку документа на UTF-8 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Устанавливает параметры отображения для мобильных устройств -->
<title>Пример семантического HTML</title> <!-- Заголовок страницы, отображаемый во вкладке браузера -->
<link rel="stylesheet" href="styles.css"> <!-- Подключение внешнего CSS-файла для стилизации страницы -->
</head>
<body> <!-- Содержит отображаемые элементы html-документа -->
<header> <!-- Шапка страницы, обычно содержит название и навигацию -->
<h1>Добро пожаловать на наш сайт!</h1> <!-- Основной заголовок страницы -->
<nav> <!-- Секция навигации, содержащая ссылки на другие разделы сайта -->
<ul> <!-- Ненумерованный список навигационных ссылок -->
<li><a href="#home">Главная</a></li> <!-- Ссылка на раздел "Главная" -->
<li><a href="#about">О нас</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</header>
<main> <!-- Содержит основной контент страницы, который не повторяется на других страницах сайта -->
<section id="home"> <!-- Раздел "Главная" с уникальным идентификатором -->
<h2>Главная</h2> <!-- Заголовок второго уровня для раздела "Главная" -->
<p>Это пример документа с семантическими тегами HTML.</p> <!-- Параграф с текстом -->
</section>
<section id="about">
<h2>О нас</h2>
<p>Мы предоставляем лучшие услуги для наших клиентов.</p>
</section>
<section id="services">
<h2>Наши услуги</h2>
<article> <!-- Статья, представляющая отдельную услугу -->
<h3>Услуга 1</h3> <!-- Заголовок третьего уровня для первой услуги -->
<p>Описание услуги 1.</p>
</article>
<article>
<h3>Услуга 2</h3>
<p>Описание услуги 2.</p>
</article>
</section>
<aside> <!-- Боковая панель с дополнительной информацией -->
<h3>Полезные ссылки</h3>
<ol> <!-- Нумерованный список полезных ссылок -->
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ol>
</aside>
</main>
<footer> <!-- Нижний колонтитул страницы, содержащий полезную информацию сайта -->
<p>© 2023 Компания. Все права защищены.</p> <!-- Параграф с авторскими правами -->
<p><a href="#contact">Связаться с нами</a></p> <!-- Ссылка на раздел "Контакты" -->
</footer>
</body>
</html>Заключение
Понимание тегов и их правильное использование поможет вам создавать более эффективные и доступные веб-приложения.