Главная страница » HTML » 39. Семантический WEB

39. Семантический WEB

Что такое Семантический Web?

Семантический Web — это использование HTML-элементов, которые описывают смысл и структуру содержимого страницы, а не только его визуальное оформление. Это делает контент более понятным для поисковых систем, вспомогательных технологий и других систем.

Основные Семантические Элементы HTML5

<header>: Определяет вводный раздел или заголовок документа.

				
					<header>
  <h1>Заголовок сайта</h1>
</header>

<nav>: Содержит навигационные ссылки.

				
					<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
  </ul>
</nav>

<main>: Определяет основной контент страницы.

				
					<main>
  <h2>Основной контент</h2>
  <p>Здесь основной текст.</p>
</main>

<section>: Разделяет контент на логические блоки.

				
					<section>
  <h2>Раздел</h2>
  <p>Текст раздела.</p>
</section>

<article>: Определяет самостоятельный контент, такой как блог-пост или новость.

				
					<article>
  <h2>Статья</h2>
  <p>Содержание статьи.</p>
</article>

<aside>: Содержит дополнительную информацию или боковые панели.

				
					<aside>
  <h3>Дополнительные ссылки</h3>
  <p>Дополнительная информация.</p>
</aside>

<footer>: Определяет нижний раздел документа, обычно с информацией о копирайте.

				
					<footer>
  <p>&copy; 2024 Ваш сайт</p>
</footer>

Преимущества

Улучшение SEO: Поисковые системы лучше понимают структуру и содержание страницы.
Доступность: Помогает вспомогательным технологиям интерпретировать содержимое.
Читаемость кода: Код становится более структурированным и понятным.

Заключение

Семантический Web помогает создать более структурированные и доступные веб-страницы, используя HTML-элементы, которые описывают содержание и его роль. Это улучшает SEO, доступность и поддерживаемость кода. Правильное использование семантических элементов помогает создать более понятные и логичные веб-документы.

Тестовое задание

Создайте HTML-документ, используя следующие семантические элементы:

<header> с заголовком и навигационным меню.
<main> с двумя секциями (<section>) и одной статьей (<article>).
<aside> с дополнительной информацией или ссылками.
<footer> с информацией о копирайте.

				
					<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Семантический HTML пример</title>
</head>
<body>
  <header>
    <h1>Мой семантический сайт</h1>
    <nav>
      <ul>
        <li><a href="#">Домой</a></li>
        <li><a href="#">Услуги</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>О компании</h2>
      <p>Мы предоставляем передовые решения в области технологий.</p>
    </section>
    <article>
      <h2>Новости компании</h2>
      <p>В этом разделе мы делимся последними новостями и обновлениями.</p>
    </article>
    <aside>
      <h3>Полезные ссылки</h3>
      <ul>
        <li><a href="#">Ресурс 1</a></li>
        <li><a href="#">Ресурс 2</a></li>
      </ul>
    </aside>
  </main>
  <footer>
    <p>&copy; 2024 Моя компания. Все права защищены.</p>
  </footer>
</body>
</html>

Проверьте свою работу на наличие ошибок и убедитесь, что страница корректно отображается в браузере.