Руководство по написанию семантического HTML
Семантический HTMLи задавались вопросом, что он означает. Проще говоря, Семантический HTML означает использование разметки HTML для передачи смысла содержимого веб-страницы, а не только её внешнего вида.
Такой подход имеет несколько преимуществ. Во-первых, он помогает поисковым системам и другим технологиям понять структуру и назначение контента на вашем сайте. Во-вторых, он делает ваш контент более доступным для людей, использующих вспомогательные технологии для навигации в Интернете. И, в-третьих, благодаря этому код легче читать и поддерживать, поскольку назначение каждого элемента понятно.
В этой статье мы рассмотрим некоторые из наиболее распространённых семантических тегов HTML и способы их эффективного использования.
<header>
Тег <header>
используется для разметки верхней части веб-страницы, которая обычно включает основной заголовок или логотип, навигационные ссылки и другие элементы, общие для всех страниц сайта. Используя тег <header>
, вы можете создать чёткое разделение между заголовком и основным содержанием страницы, облегчая пользователям понимание и навигацию по вашему сайту.
<!-- Не семантический заголовок -->
<div class="header">
<h1>My Site</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</div>
<!-- Семантический заголовок -->
<header>
<h1>My Site</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>
, вы можете указать пользователям и поисковым системам, что этот раздел вашего сайта специально предназначен для навигации.
<!-- Не семантическая навигация -->
<div class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<!-- Семантическая навигация -->
<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>
, вы можете дать понять как пользователям, так и поисковым системам, какая часть вашей страницы содержит основное содержание.
<!-- Не семантический основной контент -->
<div class="main-content">
<h2>About Us</h2>
<p>Welcome to our website. We are a company that specializes in widgets.</p>
</div>
<!-- Семантический основной контент -->
<main>
<h2>About Us</h2>
<p>Welcome to our website. We are a company that specializes in widgets.</p>
</main>
<article>
Тег <article>
используется для представления отдельного фрагмента контента, например, сообщения в блоге, новостной статьи или обзора продукта. Содержание внутри тега <article>
должно быть самостоятельным и содержательным и может включать заголовки, абзацы, изображения и другие виды контента.
<!-- Не семантическая статья -->
<div class="article">
<h2>How to Make a Widget</h2>
<p>Widgets are great. Here's how to make one.</p>
</div>
<!-- Семантическая статья -->
<article>
<h2>How to Make a Widget</h2>
<p>Widgets are great. Here's how to make one.</p>
</article>
<aside>
Тег <aside>
используется для разметки содержимого, которое связано с основным содержанием веб-страницы, но не является его неотъемлемой частью. Это может быть дополнительная информация, реклама или связанные статьи.
<div>
<article>
<h2>Article Title</h2>
<p>Article content goes here</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
</div>
<section>
Тег <section>
используется для разметки разделов веб-страницы, тематически сгруппированных вместе. Это могут быть такие разделы, как главы или секции длинной статьи или различные части страницы товара.
<section>
<h2>Заголовок раздела</h2>
<p>Содержание раздела находится здесь</p>
</section>
<footer>
Тег <footer>
используется для разметки нижней части веб-страницы, которая может содержать такие вещи, как информация об авторских правах, контактные данные или ссылки на профили социальных сетей.
<!-- Не семантический футер -->
<div class="footer">
<p>© 2021 My Site</p>
</div>
<!-- Семантический футер -->
<footer>
<p>© 2021 My Site</p>
</footer>
<details>
и <summary>
Теги <details>
и <summary>
используются для разметки сворачиваемого раздела содержимого. Тег <summary>
используется для разметки заголовка раздела, а тег <details>
- для разметки самого содержимого.
<details>
<summary>Нажмите, чтобы развернуть</summary>
<p>Содержание здесь</p>
</details>
<figure>
и <figcaption>
Теги <figure>
и <figcaption>
используются для разметки самостоятельной части содержимого, на которую ссылается основное содержимое веб-страницы. Тег <figure>
используется для разметки самого содержимого, а тег <figcaption>
- для разметки подписи или описания к содержимому.
<figure>
<img src="image.jpg" alt="Описание изображения" />
<figcaption>Подпись к изображению</figcaption>
</figure>
<mark>
Тег <mark>
используется для пометки текста, который был выделен по какой-либо причине. Это могут быть результаты поиска или текст, выделенный пользователем.
<p>Здесь приводится <mark>выделенный</mark> текст.</p>
<time>
Тэг <time>
используется для обозначения даты или времени. Используя тег <time>
, вы можете облегчить поисковым системам и другим технологиям понимание смысла содержимого вашей страницы.
<p>Событие состоится <time datetime="2021-01-01">1 января 2021 года</time>.</p>
<progress>
Тег <progress>
используется для разметки индикатора выполнения. Используя тег <progress>
, вы можете облегчить пользователям понимание хода выполнения задачи.
<progress value="50" max="100"></progress>
Как насчёт <div>
и <span>
Теги <div>
и <span>
не являются семантическими тегами. Они используются для разметки общих областей содержимого и не несут никакой конкретной смысловой нагрузки. Вы должны использовать эти теги только в том случае, если у вас нет другого выбора.
Заключение
В этой статье вы узнали о семантических тегах HTML и о том, как их можно использовать для того, чтобы сделать ваши веб-страницы более доступными и понятными. Вы также узнали о некоторых наиболее часто используемых семантических тегах, включая <header>
, <nav>
, <main>
, <article>
, <aside>
, <section>
, <footer>
, <details>
, <summary>
, <figure>
, <figcaption>
, <mark>
, <time>
и <progress>
. Надеюсь, эта статья была полезной. Спасибо за прочтение!