HTML5 Семантическая вёрстка
Всю жизнь человек старается делать все согласно здравой логики. Если он видит красную стену, он так и скажет: “я вижу красную стену”. Никто не будет говорить вместо этого о “розовом потолке”, если его там тоже не будет. Видишь что-то и называешь это своим именем, - это семантика. Существует даже целая наука в лингвистике, которая это изучает.
Но не только подобное есть в языковедении. В веб-разработке тоже присутствует понятие “семантической верстки”. И вот с теперь, мы поговорим об этом более подробно.
Для начала правильно будет ответить на вопрос:
"Зачем нужна семантическая разметка страниц?"
Это поможет поисковому роботу проанализировать страницу сайта, повысит приоритет выдачи страницы и подготовит ее расширенное описание для отображения в результатах поиска. Также, для людей с ограниченными возможностями создается специальный софт, который ориентирован на семантическую разметку.
HTML5 и семантика. Что нового?
Даже сегодня еще можно встретить множество страниц с таким HTML-кодом:
“<div id = "nav"> <div class = "header"> <div id = "footer">”. Он используется для обозначения навигации хедера и футера.
<html>
<html>
<head>
<title>...</title>
</head>
<body>
<div id="header">... </div>
<div id="main-content"> ...</div>
<div id="footer"> ... </div>
</body>
</html>
HTML5 для тех же целей предлагает нам новые семантические элементы: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.
И даже сегодня при, уже казалось бы, “развязанных руках” у разработчиков, SEO специалисты не могут получить 100% семантически валидной верстки. В основном правильно используют <footer>, <header>, <nav>, реже или неправильно используют <aside> <main> <section>. Остальные элементы если не совсем редко, то вообще не используют.
Пример правильной семантической разметки HTML5:
<html>
<head>
<title>...</title>
</head>
<body>
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer> ... </footer>
</body>
</html>
Тег <nav>
|
<nav> </nav> |
Используется для уточнения набора ссылок навигации по сайту.
ВАЖНО! Не все наборы ссылок нужно оборачивать тегом <nav>. Если такие элементы как, к примеру <footer> и <header> справляются с положенными на них задачами в единичном экземпляре, то <nav> можно использовать больше одного раза на страницу. Можно размещать в <header>, но зачастую выносят после него.
|
<body>
<article>
<aside>...</aside>
</article> |
|
|
Основной контент
<main>
<h1>...</h1>
<p>...</p>
<section>
<h2>...</h2>
<p>...</p>
</section>
<section>
<h2>...</h2>
<p>...</p>
</section>
<section>
<h2>...</h2>
<p>...</p>
</section>
</main>
Элемент <article> представляет из себя независимую или самостоятельную контентную композицию многоразового использования. Он может быть, к примеру, постом на форуме, записью в блоге, газетной статьей, отзывом пользователя или отдельным виджетом. Разрешается делать вложения один <article> в другой. Однако, в таком случае нужно, чтобы дочерние элементы несли в себе контент, который семантически связан с родителем. Например, цепочка комментариев.
Когда основное наполнение страницы является самостоятельным элементом (например виджет), то его можно “обернуть” в <article>. Но в большинстве случаев это будет технически лишним.
Элемент <section> является ничем иным как блоком страницы или тематической группой контента обычно с заголовком <h> группы.
Когда вам нужен элемент только для стилизации или сценария скрипта, то рекомендуется использовать <div> вместо <section>.
Элемент <aide> является дополнительным не самостоятельным разделом страницы который по смыслу привязан к основному контенту. К примеру можно использовать как выносную цитату, боковые панели для рекламы, фильтров и сортировок товаров или организации навигации. Нецелесообразно использовать элемент как основной контент. Элемент <main> можно использовать как основной контейнер для контента страницы. Хотя ограничений, что касаются количества даных элементов на странице нет, разработчики рекомендуют использовать его в одиночном количестве.
<details> - выпадающее меню или дополнительные детали которые юзер может скрыть или показать.
<summary> используется как видимый заголовок элемента <details> по клику на который можно показать/спрятать его.
|
<details> |
<figure> и <figcaption>
|
<figure> |
Таким образом, элементы могут использоваться для подписи картинок, диаграмм, таблиц итд.
<mark> используется для выделения важного текста.
Тег <time> выделяет дату / время читаемую человеком. Также может использоваться с атрибутом datetime для уточнения времени машинно-читабельным способом. Например, клиент-программа сможет добавить напоминание или записать дату рождения в календарь пользователя автоматически. А поисковые системы смогут выдавать более глубокие результаты поиска.
|
<p>We open at <time>10:00</time> every morning.</p> |
Подводя итог под написанным выше, можно констатировать, что все элементы важны по-своему. Их нужно знать и использовать в соответствии с предназначением. Огромное количество умов по всему миру специально придумывают новые теги и варианты их использования, чтоб и разработчики и пользователи получили более качественный продукт. Однако, в погоне за новыми технологиями, не стоит забывать о своеобразности браузеров! Некоторые из них “не знают” новых (а иногда - и старых) тегов и выводят информацию не корректно.
Похожие статьи
Стремительное развитие технологий в сфере IT происходит во всех направлениях. За всем уследить практически невозможно, особенно если вы Full Stack Developer. Но и специалисты более узкого профиля не всегда успевают своевременно разбираться в обновлениях инструментов. Эта статья будет полезна всем, кто занимается “фронтом” и еще не добрался до 4-й версии таск-менеджера Gulp 4.
Использование слайдеров при создании сайтов не только "придает жизни" статичным интернет-страницам, но и выполняет важную функцию визуализации разной полезной информации для пользователей. Пользоваться слайдерами нужно, а как именно — читайте в нашей статье.
CSS - это легко. Можете сами попробовать. Главное, прочитайте нашу новую статью.
Записаться на консультацию
Мы свяжемся с вами в течении 10 минут