Семантические элементы HTML5 (с примерами)

HTML
На чтение 17 мин Просмотров 34 Опубликовано

HTML 4.01 представил элемент div с тегами <div> и </div> для разделения страницы на отдельные разделы. Каждый элемент div имеет уникальное имя, чтобы отличать его от других элементов div на веб-странице.

Например, мы можем использовать элемент div с именем header для области верхнего колонтитула и другой элемент div с именем footer для области нижнего колонтитула.

<div id="header">...</div>
<div id="footer">...</div>

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

Чтобы преодолеть эту проблему при разработке веб-приложений, HTML5 ввел несколько новых семантических элементов со стандартизированными именами, которые значительно преобразовали и улучшили веб-разработку.

Содержание
  1. Что такое семантические элементы?
  2. Семантические элементы в HTML
  3. Семантический каркас веб-страницы
  4. HTML-элемент <header>
  5. HTML-элемент <nav>
  6. HTML-элемент <main>
  7. HTML-элемент <footer>
  8. HTML-элемент <section>
  9. HTML-элемент <article>
  10. HTML-элемент <aside>
  11. HTML-элементы <figure> и <figcaption>
  12. Элементы HTML <details> и <summary>
  13. Преимущества семантических элементов HTML5
  14. Семантические элементы в HTML5

Что такое семантические элементы?

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

Например, мы можем использовать элемент footer для отображения контента внизу (или footer) веб-страницы. Аналогично, мы можем использовать элемент nav для определения области навигации веб-страницы. Оба являются семантическими элементами, поскольку имя каждого тега четко определяет цель элемента.

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

Аналогично, элемент <span> является несемантическим элементом, который используется для встроенного контента. Он также не сообщает никакой информации о типе содержащегося в нем контента.

Семантические элементы также называются структурными элементами или элементами макета в HTML5, поскольку многие из семантических элементов помогают структурировать макет страницы.

Семантические элементы в HTML

Некоторые веб-сайты содержат следующий HTML-код:

<div id="nav">
<div class="header">
<div id="footer">

Разработчики часто используют элементы <div> с определенными атрибутами id для определения различных разделов веб-страницы, таких как навигационные панели, заголовки и нижние колонтитулы. Однако этот подход является допустимым и широко используется на старых веб-сайтах.

Теперь HTML5 поощряет использование семантических элементов, таких как <nav>, <header> и <footer>, для определения различных разделов веб-страницы, поскольку они обеспечивают более четкое значение и улучшают доступность. Использование семантических элементов также помогает сделать структуру HTML-документов более понятной и поддерживаемой.

Список наиболее часто используемых семантических элементов HTML5:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

Семантический каркас веб-страницы

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

Ниже приведен пример базового шаблона веб-страницы с четырьмя семантическими элементами, такими как <header>, <nav>, <main> и <footer>:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Webpage Title</title>
</head>
<body>
    <!--Header element-->
    <header>
        Place header content here, such as a company name and logo.
    </header>

    <!--Nav element-->
    <nav>
       Place navigational links in this area.
    </nav>

    <!--Main element-->
    <main>
        Place the main content of the webpage in this area.
    </main>

    <!--Footer element-->
    <footer>
        Place the footer information in this area.
    </footer>
</body>
</html>

Посмотрите на представленный ниже базовый каркас, который использует четыре семантических элемента HTML5 для определения структуры веб-страницы.

Базовый каркас веб-страницы с использованием четырех семантических элементов HTML5: заголовок, навигация, основной колонтитул, нижний колонтитул

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

Основной элемент определяет основную область контента или основное содержимое страницы, содержащее информацию, такую ​​как заголовки, абзацы текста и изображения. Этот элемент расположен под навигационной областью на сайте.

Наконец, нижний колонтитул будет располагаться под основным контентом и содержать информацию об авторских правах и контактную информацию.

HTML-элемент <header>

Элемент <header> — это контейнер, содержащий информацию заголовка на веб-странице. Он структурно определяет область заголовка веб-страницы. Элемент заголовка начинается с открывающего тега <header> и заканчивается закрывающим тегом </header>. Содержимое, размещенное между этими тегами, отображается на веб-странице как часть элемента заголовка.

Общий синтаксис использования элемента <header> в HTML выглядит следующим образом:

<header>Header content</header>

В зависимости от потребностей мы часто размещаем в элементе заголовка название или логотип компании, вводный контент, набор навигационных ссылок или один или несколько элементов заголовка (<h1> – <h6>).

Элемент заголовка обычно располагается сразу после открывающего тега <body>. HTML-документ может иметь несколько элементов <header> для представления заголовков отдельных разделов или всей страницы. Однако мы не можем поместить тег <header> в <footer>, <address> или другой элемент <header>.

Пример 1:

<!DOCTYPE html>
<html>
<body>
   <header>
      <h1>My First Website</h1>
        <nav>
          <ul>
             <li><a href="#home">Home</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#services">Services</a></li>
             <li><a href="#contact">Contact</a></li>
         </ul>
      </nav>
   </header>
</body>
</html>

HTML-элемент <nav>

Элемент nav — это семантический элемент в HTML, который структурно определяет навигационную область веб-страницы. Он начинается с открывающего тега <nav> и заканчивается закрывающим тегом </nav>. Общий синтаксис для определения элемента <nav> выглядит следующим образом:

<nav>Nav Content Area</nav>

Элемент nav содержит набор навигационных гиперссылок на другие веб-страницы на веб-сайте, чтобы посетители могли перемещаться по веб-сайту. Обычно он размещается сразу после закрывающего тега </header>. Однако это не строгое правило. Расположение элемента <nav> может варьироваться в зависимости от конкретного дизайна и структуры веб-сайта.

Пример 2:

<!DOCTYPE html>
<html>
<body>
  <!--Nav element-->
  <nav>
     <a href="#html">HTML</a> |
     <a href="#css">CSS</a> |
     <a href="#js">JavaScript</a> |
     <a href="#jquery">jQuery</a>
  </nav>
</body>
</html>

HTML-элемент <main>

Основной элемент — это семантический элемент в HTML5, который структурно определяет основную область контента или первичную область контента веб-страницы. Он начинается с открывающего тега <main> и заканчивается закрывающим тегом </main>. Общий синтаксис для определения элемента <main> в документе HTML выглядит следующим образом:

<main>Main Content Area</main>

Каждая страница содержит только один основной элемент, поскольку его содержимое должно быть уникальным для каждой веб-страницы. Все современные веб-браузеры поддерживают основной элемент.

Элемент footer — это семантический элемент, который структурно определяет нижнюю или нижнюю область веб-страницы. Он начинается с открывающего тега <footer> и заканчивается закрывающим тегом </footer>. Общий синтаксис для определения элемента footer в HTML выглядит следующим образом:

<footer>Footer Content Area</footer>

HTML-документ может иметь несколько элементов <footer>. Обычный контент, находящийся в области нижнего колонтитула веб-страницы, включает:

  • информация об авторских правах
  • контактная информация
  • информация об авторстве
  • карта сайта
  • ссылки на страницы для связанных документов
  • вернуться к началу ссылок

Пример 3:

<!DOCTYPE html>
<html>
<body>
   <footer>
      <p>Copyright © 2024 My website. All rights reserved.</p>
   </footer>
</body>
</html>

HTML-элемент <section>

Элемент <section> — это семантический элемент в HTML5, который определяет область раздела в документе или веб-странице. Он содержит определенную группировку контента, обычно с заголовком на веб-странице. Элемент section начинается с открывающего тега <section> и заканчивается закрывающим тегом </section>. Общий синтаксис для определения элемента section выглядит следующим образом:

<section>Content Area</section>

Элемент section обычно используется для разделения содержимого на различные разделы документа. Например, если мы пишем статью о здоровом образе жизни, мы можем разделить ее на различные разделы с помощью элемента <section>, которые будут охватывать диету, упражнения, сон и т. д.

Пример 4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Healthy Living Guide</title>
</head>
<body>
   <header>
      <h1>Simple Guide to Healthy Living</h1>
   </header>

   <main>
      <section id="healthy-living">
         <h2>Introduction to Healthy Living</h2>
         <p>Healthy living means maintaining a balanced lifestyle that includes proper diet, regular exercise, and sufficient sleep.</p>
      </section>
      <section id="diet">
         <h3>Healthy Diet</h3>
         <p>A balanced diet provides essential nutrients and energy. It's important to eat a variety of foods to stay healthy.</p>
      </section>

      <section id="exercise">
         <h3>Regular Exercise</h3>
         <p>Regular physical exercise is important for the physical and mental health of almost everyone, including older adults. It helps to maintain weight, strengthen muscles, and improve heart health.</p>
      </section>

      <section id="sleep">
         <h3>Importance of Sleep</h3>
         <p>Getting enough sleep is essential for maintaining good health. Quality sleep plays a vital role in healing and repair of your heart and blood vessels, supporting good brain function, and maintaining emotional balance. Adults should sleep for 7-9 hours per night.</p>
      </section>
      </section>
   </main>
   
   <footer>
      <p>Contact us at [email protected] for more information on living a healthy life.</p>
   </footer>
</body>
</html>

HTML-элемент <article>

Семантический элемент <article> в HTML5 используется для определения независимого, самодостаточного контента в документе, странице или на сайте. Он начинается с открывающего тега <article> и заканчивается закрывающим тегом </article>. Общий синтаксис использования элемента <article> в документе выглядит следующим образом:

<article>Content Area</article>

<article> может содержать различные типы контента, включая текст, изображения, ссылки и другие медиа, а также заголовки, нижние колонтитулы и разделы. Содержимое, найденное в элементе <article>, может включать сообщение на форуме, сообщение в блоге, комментарии пользователей, газетную статью или любой другой независимый элемент контента.

Содержимое элемента <article> должно иметь смысл само по себе и его можно распространять независимо от остальной части сайта.

Пример 5:

<!DOCTYPE html>
<html>
<body>
   <h1>Most Popular Browsers</h1>
   <article>
      <h2>Google Chrome</h2>
      <p>Google Chrome is a web browser developed by Google, released in 2008. It is the world's most popular web browser today!</p>
   </article>

   <article>
     <h2>Mozilla Firefox</h2>
     <p>Mozilla Firefox is an open-source web browser developed by Mozilla. It has been the second most popular web browser since January, 2018.</p>
   </article>

   <article>
     <h2>Microsoft Edge</h2>
     <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. It replaced the Internet Explorer.</p>
   </article>
</body>
</html>

В этом примере мы использовали три элемента <article> с независимым, самодостаточным содержимым.

Пример 6:

<article>
  <header>
     <h1>How to Cook a Perfect Egg</h1>
     <p>Posted by Jane Doe on July 1, 2024</p>
  </header>
     <p>This guide will teach you various techniques for cooking eggs...</p>
  <footer>
     <p>Comments (0)</p>
  </footer>
</article>

HTML-элемент <aside>

Элемент <aside> — это семантический элемент в HTML5, который определяет область aside веб-страницы или документа. Обычно отображается как боковая панель. Элемент <aside> начинается с открывающего тега <aside> и заканчивается закрывающим тегом </aside>.

Содержимое, находящееся внутри тега <aside>, должно быть косвенно связано с окружающим содержимым. Разработчики часто используют этот элемент для боковых панелей, рекламы, информационных блоков, биографий или других дополнений к основному содержимому.

Пример 7:

<!DOCTYPE html>
<html>
<head>
<style>
    aside {
       width: 40%;
       padding-left: 15px;
       margin-left: 15px;
       float: right;
       font-style: italic;
       background-color: lightgray;
    }
</style>
</head>
<body>
   <p>A typical use of aside element is a sidebar containing links related to the articles of a blog post.</p>
   <aside>
      <h3>Related Posts</h3>
      <ul>
        <li><a href="#">Understanding Web Standards</a></li>
        <li><a href="#">HTML5 Semantic Elements</a></li>
        <li><a href="#">Semantic Wireframe</a></li>
      </ul>
   </aside>
</body>
</html>

Вывод:

Пример использования семантического элемента aside в HTML5.

HTML-элементы <figure> и <figcaption>

Элементы <figure> и <figcaption> — это семантические элементы в HTML5, используемые для включения мультимедийного контента, такого как изображения, диаграммы, фотографии, фрагменты кода и т. д., вместе с соответствующими подписями.

Элемент <figure> используется для определения автономного содержимого, такого как иллюстрации, диаграммы, фотографии, листинги кодов и т. д. С другой стороны, элемент <figcaption> используется для определения подписи внутри элемента <figure>.

Пример 8: Изображение с подписью

Это одно из наиболее распространенных применений элементов <figure> и <figcaption> для соединения изображения с подписью.

<figure>
    <img src="path_to_image.jpg" alt="Descriptive text of the image">
    <figcaption>This is a caption describing the context of the image.</figcaption>
</figure>

Другое применение элементов <figure> и <figcaption> — это обёртывание фрагмента кода для технического контента.

Пример 9:

<figure>
   <figcaption>Example JavaScript function to add two numbers:</figcaption>
   <pre><code>
       function addNumbers(a, b) {
          return a+b;
       }
       console.log(addNumbers(5, 3)); // Outputs: 8
    </code></pre>
</figure>

Вы можете разместить его как первый или как последний дочерний элемент внутри элемента <figure>.

Пример 10:

<h2>Caption below the content (more common usage)</h2>
<figure>
    <img src="path/to/image.jpg" alt="Descriptive text of the image">
    <figcaption>Caption describing the above image.</figcaption>
</figure>

Пример 11:

<h2>Caption above the content</h2>
<figure>
    <figcaption>Caption describing the below image.</figcaption>
    <img src="path/to/image.jpg" alt="Descriptive text of the image">
</figure>

Элементы HTML <details> и <summary>

<summary> и <details> — это семантические элементы в HTML5, которые работают вместе для создания интерактивных разделов на веб-странице, которые пользователи могут разворачивать или сворачивать. Вам не нужно использовать JavaScript для переключения вида содержимого внутри <details>.

Такое сочетание семантических элементов обычно используется для часто задаваемых вопросов, раскрывающихся описаний или в любой ситуации, когда изначально требуется скрыть детали и позволить пользователю просмотреть их при необходимости.

<details>: Этот элемент является родительским контейнером, используемым для обертывания содержимого, которое должно быть сворачиваемым. По умолчанию содержимое, находящееся внутри тега <details>, не отображается, пока пользователь не развернет содержимое.

<summary>: Этот элемент действует как кликабельный заголовок для контента <details>. Он предоставляет сводку, на которую пользователи могут нажать, чтобы переключить скрытые внутри «детали».

Если элемент <summary> используется внутри элемента <details>, нажатие на элемент <summary> отобразит скрытое содержимое внутри <details>.

Пример 12:

<!DOCTYPE html>
<html>
<body>
  <details>
      <summary>Click here to learn more about HTML5</summary>
      HTML5 is the latest major revision of the HTML standard. It includes several new elements and attributes that enhance the functionality of websites.
  </details>
</body>
</html>

Выход:

Пример использования элементов <details> и <summary> в HTML5

Преимущества семантических элементов HTML5

Семантические элементы HTML5 обеспечивают ряд следующих преимуществ:

  • Семантические элементы помогают лучше понимать структуру страницы для экранных ридеров и вспомогательных технологий. Они делают веб-контент более доступным для пользователей с ограниченными возможностями.
  • Они улучшают SEO, поскольку поисковые системы могут лучше понимать и индексировать контент, что повышает видимость страницы.
  • Использование семантических элементов, предоставляемых HTML5, делает код более читабельным и простым в управлении.
  • Все современные веб-браузеры широко поддерживают семантические элементы.

Семантические элементы в HTML5

Здесь мы перечислили некоторые из наиболее часто используемых семантических элементов в HTML. Это:

ЯрлыкОписание
<article>Определяет независимый, самодостаточный контент.
<aside>Определяет боковую область веб-страницы, обычно используемую в качестве боковой панели.
<details>Определяет дополнительную информацию или сведения, которые пользователь может просматривать или скрывать.
<figcaption>Определяет подпись для элемента <figure>.
<figure>Определяет самостоятельный контент, такой как иллюстрации, диаграммы, фотографии, листинги кодов и т. д.
<footer>Создает область или раздел нижнего колонтитула в документе.
<header>Создает раздел заголовка внутри HTML-документа.
<main>Определяет основную область содержимого HTML-документа.
<mark>Указывает помеченный/выделенный текст.
<nav>Определяет набор навигационных ссылок.
<section>Создает область раздела в HTML-документе.
<summary>Задает видимый заголовок для элемента <details>.
<time>Определяет дату/время.
Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector