Семантическая верстка это: Что такое семантическая вёрстка и зачем она нужна

Posted:

Дек 28, 2022

Comments:

Семантическая верстка это: Что такое семантическая вёрстка и зачем она нужна — журнал «Доктайп»

Содержание

Что такое семантическая вёрстка и зачем она нужна — журнал «Доктайп»

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном div и span) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Почему семантика важна

Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.

Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей работать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.

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

Классический пример — расписание поезда «Сапсан» в выдаче Google.

Разработчики tutu.ru сверстали таблицу тегом table вместо div и их сниппет оказался в выдаче Google по важному коммерческому запросу.

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и span. В спецификации для каждого семантического элемента описана его роль.

Ну и представьте, насколько проще читать <nav></nav> вместо <div></div>. Или вот такой код. Смотрите и сразу понятно, что тут и зачем.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Заголовок страницы</title>
  </head>
  <body>
    <header>
      <!— Шапка сайта —>
    </header>
    <main>
      <!— Основное содержимое страницы —>
    </main>
    <footer>
      <!— Подвал сайта —>
    </footer>
  </body>
</html>

Основные семантические теги HTML

Среди «старых» тегов из ранних версий HTML тоже есть семантические — например, тег <p>, который обозначает параграф. При этом теги <i> или <b> не семантические, потому что они не добавляют смысла выделенному тексту, а просто определяют его внешний вид.

Но в актуальной версии стандарта HTML Living Standard есть семантические теги почти для всех основных частей сайта, и лучше пользоваться ими. Вот несколько примеров семантических тегов.

<article>

Значение: независимая, отделяемая смысловая единица, например комментарий, твит, статья, виджет ВК и так далее.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <section> и <div>.

<section>

Значение: смысловой раздел документа. Неотделяемый, в отличие от <article>.
Особенности: желателен заголовок внутри.
Типовые ошибки: путают с тегами <article> и <div>.

<aside>

Значение: побочный, косвенный для страницы контент.
Особенности: может иметь свой заголовок. Может встречаться несколько раз на странице.
Типовые ошибки: считать <aside> тегом для «боковой панели» и размечать этим тегом основной контент, который связан с окружающими его элементами.

<nav>

Значение: навигационный раздел со ссылками на другие страницы или другие части страниц.
Особенности: используется для основной навигации, а не для всех групп ссылок. Основной является навигация или нет — на усмотрение верстальщика. Например, меню в подвале сайта можно не оборачивать в <nav>. В подвале обычно появляется краткий список ссылок (например, ссылка на главную, копирайт и условия) — это не является основной навигацией, семантически для такой информации предназначен <footer> сам по себе.
Типовые ошибки: многие считают, что в <nav> может быть только список навигационных ссылок, но согласно спецификации там может быть навигация в любой форме.

<header>

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

<main>

Значение: основное, не повторяющееся на других страницах, содержание страницы.
Особенности: должен быть один на странице, исходя из определения.
Типовые ошибки: включать в этот тег то, что повторяется на других страницах (навигацию, копирайты и так далее).

<footer>

Значение: заключительная часть смыслового раздела или всего сайта, обычно содержит информацию об авторах, список литературы, копирайт и так далее. Чаще всего повторяется на всех страницах сайта.
Особенности: этих элементов может быть несколько на странице. Тег <footer> не обязан находиться в конце раздела.
Типовые ошибки: использовать только как подвал сайта.

Как разметить страницу с точки зрения семантики

Процесс разметки можно разделить на несколько шагов с разной степенью детализации.

Крупные смысловые блоки на каждой странице сайта. Теги: <header>, <main>, <footer>.
Крупные смысловые разделы в блоках. Теги: <nav>, <section>, <article>, <aside>.
Заголовок всего документа и заголовки смысловых разделов. Теги: <h2>-<h6>.
Мелкие элементы в смысловых разделах. Списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

Более подробно методика создания семантической разметки описана в навыке «Создание семантической разметки по макету» и профессиональных курсах HTML Academy.

Сомневаюсь, какие теги использовать

Есть простые правила для выбора нужных тегов.

Получилось найти самый подходящий смысловой тег — использовать его.
Для потоковых контейнеров — <div>.
Для мелких фразовых элементов (слово или фраза) — <span>.

Правило для определения <article>, <section> и <div>:

Можете дать имя разделу и вынести этот раздел на другой сайт? — <article>
Можете дать имя разделу, но вынести на другой сайт не можете? — <section>
Не можете дать имя? Получается что-то наподобие «новости и фотогалерея» или «правая колонка»? — <div>

Как точно не нужно делать

Не используйте семантические теги для красоты. Для этого есть CSS.

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

Здесь сразу несколько ошибок:

Тег <blockquote> должен использоваться для выделения в тексте цитат, а не просто случайного выделения текста. Так совпало, что в браузерах этот блок по умолчанию выделен, но это не значит, что нужно его использовать таким образом.
Тег <ul> тоже использован для визуального «сдвига» текста. Это неверно, потому что этот тег должен быть использован только для обозначения списков, а во-вторых, в тег <ul> можно вкладывать только теги <li> и ничего больше.
Тег <p> использован, чтобы визуально раздвинуть текст. На самом деле этот тег используется для выделения параграфов.

А любое выделение, сдвиг или иные превращения текста можно выполнить с помощью CSS.

Поэтому используйте семантические теги по назначению.

что это такое и зачем она нужна для SEO – Elit-Web

Верстка сайта — это создание структуры гипертекстового документа с использованием HTML-разметки.

И пока вы не успели закрыть эту страницу из-за совершенно непонятного термина, позвольте объяснить!

Когда вы открываете любой сайт, то сразу видите, где здесь основной блок с информацией, где контакты, где панель навигации и тому подобное. Это и есть заслуга верстки — все структурировано, логически разделено на блоки, удобно размещено на странице и затем оформлено в CSS.

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

Что такое семантическая верстка?

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

Для лучшего понимания взгляните на два примера ниже:

<p>Ваш креативный заголовок</p>

<p>Отличный текст</p>

<p>И еще немного отличного текста</p>

<h2>Ваш креативный заголовок</h2>

<p>Отличный текст</p>

<p>И еще немного отличного текста</p>

</article>

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

Почему? Об этом расскажем далее!

Почему семантика сайта важна

Продолжим рассматривать наш пример!

Тег <p> обозначает «параграф/абзац». С его помощью удобно делать разбивку текста с переносом строки. Вот только с точки зрения поисковых алгоритмов он не несет особой информации. Вы можете обернуть заголовок тегом <p> и даже ярко его ВЫДЕЛИТЬ (никогда так не делайте). Пользователь поймет, что это заголовок, но вот для алгоритмов Google он все еще остается обычным блоком текста — не более важным, чем последующие. Без семантической верстки ваша страница для поисковика будет просто большим текстовым документом, где невозможно выделить основную информацию и эффективно использовать алгоритмы поиска.

Семантическая структура сайта важна по двум ключевым причинам.

1) Улучшение позиций веб-ресурса в поисковой выдаче

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

Можем привести неплохой пример пользы семантической верстки. Введите в Google запрос «расписание поездов Киев», и одним из первых результатов будет следующий график:

Используя правила семантической верстки, разработчики «показали» поисковику, что это за блок и что именно его стоит выводить в результатах поиска по релевантному запросу. Если бы расписание было заключено в обычные теги <p>, поисковые боты просто не поняли бы, что именно они отвечают на вопрос пользователя и что их стоит показать в выдаче.

2) Повышение доступности сайта

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

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

Семантические теги в HTML

С теорией немного разобрались, теперь давайте перейдем к более практическим вещам: рассмотрим основные семантические теги HTML, познакомимся со способами их использования в современной верстке.

<header>

Этим тегом обычно обозначают вводную часть раздела/страницы. Говоря более простым языком, <header> — это «шапка» сайта, которая зачастую одинаковая на всех страницах. Здесь в основном размещают ссылки на основные разделы сайта, контакты, кнопки обратной связи, выбор языка и тому подобное.

<nav>

Это тег для блока навигации на сайте. Он может быть вложенным в хедер или оставаться отдельным блоком. Иногда на одной странице встречается несколько навигационных блоков — это нормально.

<main>

В этот тег заключается основное содержимое страницы, которое НЕ ПОВТОРЯЕТСЯ на других. Кроме того, на ней этот тег разрешается использовать только один раз. Размещать два блока <main> не допускается. Внутри <main> могут находиться <article>, <section>, <aside> и другие.

<article>

Тег обозначает крупную самостоятельную и завершенную по смыслу единицу на странице. Самый распространенный пример — статья в блоге. Но в <article> может оборачиваться небольшой виджет или встроенный в страницу твит.

<section>

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

<aside>

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

<footer>

Завершающая часть страницы или отдельного смыслового раздела. На одной странице может быть несколько футеров, но обычно он один. Здесь часто размещают различную дополнительную информацию и ссылки: контакты, линки на другие страницы, логотипы и тому подобное. <footer> также принято называть «подвалом» сайта.

Как разметить страницы сайта с точки зрения семантики

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

Тег

Применение

Большие смысловые блоки на странице

Отдельные разделы внутри блоков

Заголовки с первого по шестой уровень

<p>, <ul>, <div>, <span> и другие

Мелкие блоки и элементы внутри смысловых разделов

<img>, <a>, <button> и прочие

Картинки, кнопки, ссылки, небольшие текстовые блоки и прочее

Хороший способ лучше разобраться в структуре сайта — визуально разделить страницу на блоки/прямоугольники, потому что каждая страница — это именно набор блоков и блоков внутри блоков:

Откройте сайт, сделайте скриншот страницы и попробуйте в любом графическом редакторе обвести блоки, указав, где какой тег используется (или может использоваться).

На самом деле у нас на сайте применяется немного другая верстка, но такой вариант, как на скриншоте, тоже возможен. Главное для вас сейчас — понять принципы блочной структуры страниц.

Примеры семантической верстки

Мы приведем несколько простых примеров HTML-кода с корректной версткой. Обратите внимание на структуру и вложенность разных элементов.

<header>

<nav>

<main>

Хороший способ лучше разобраться в семантической верстке — изучать код различных сайтов. Для этого вам достаточно открыть интересующую страницу и нажать F12 (для браузера Safari алгоритм другой) — появится блок с HTML-кодом и стилями. Здесь же можно выбрать инструмент Inspector, который при клике на тот или иной элемент сразу покажет его в HTML-коде.

Основные ошибки

Хотя HTML-верстка и считается довольно несложной задачей, но правильная семантическая разметка даже сейчас есть далеко не на всех сайтах, вплоть до весьма известных.

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

применение <section> как обертки для оформления;

переизбыток блоков <header>;

обрамление всех ссылок в тег <nav>;

путаница с тегами <main>, <article> и <section>.

Еще одна довольно частая ошибка среди начинающих верстальщиков — использование семантических тегов HTML для разного рода «украшательств» (например, цветной шрифт, его начертание, размер и прочее). Так делать не нужно. Используйте HTML только для создания структуры документа. Весь визуал делайте в CSS — это правильно.

Попробуем объяснить, почему нужно делать именно так.

Представьте, что вы, размещая статью в блоге, решили, например, выделить первые слова в каждом абзаце красным цветом. Зачем? Захотелось, и все тут. Можно ли это сделать прямо в HTML? Да! Достаточно применить дополнительный тег <font> для изменения характеристик шрифта и задать ему цвет. Вот только придется потратить немало времени, потому как для каждого абзаца вы будете прописывать теги и оформление вручную.

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

CSS же позволяет сделать все гораздо быстрее. Присваиваем нужным тегам <p> определенный класс (одинаковый для выбранных нами), а в CSS буквально одной строчкой прописываем оформление. Надоел красный цвет — меняем всего одно правило, и он изменяется на дефолтный черный ДЛЯ ВСЕХ <p> с тем же классом. Либо можно стереть правило для класса и тем самым убрать оформление.

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

Вывод

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

Мы ведем к тому, что при разработке и продвижении сайтов очень важно не стараться бездумно экономить, обращаясь к начинающим верстальщикам или пытаясь верстать страницы самостоятельно, не имея должного опыта. Если хотите, чтобы все было сразу сделано правильно, а вам не пришлось платить дважды за одну работу, обращайтесь в Elit-Web. Мы к вашим услугам!

Используйте семантические теги HTML5 для улучшения SEO веб-страницы | Pluralsight

Miroslav Gajic

Mar 22, 2019
12 Min read
100,342 Views

Mar 22, 2019
12 Min read
100,342 Views

HTML/CSS

Семантика

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

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

В этом руководстве вы узнаете, как использовать новые семантические теги HTML5 при создании веб-страницы и как сделать контент более информативным для машин.

Макет семантической HTML-страницы

Давайте сначала рассмотрим базовый шаблон HTML-страницы, написанный на несемантическом HTML:

 1
2 <голова>
3 Пример
4 
5 <тело>
6 <дел>
7 Здесь логотип, навигация и т. д.
8 
9 <дел>
10 Место для основного контента сайта
11 
12 <дел>
13 Информация в нижнем колонтитуле, ссылки и т. д.
14 
15 
16

HTML

Теперь рассмотрим пример семантического HTML, показанный ниже:

 1
2 <голова>
3 Пример
4 
5 <тело>
6 <заголовок>
7 Здесь логотип, навигация и т.д.
8 
9 <основной>
10 Место для основного контента сайта
11 
12 <нижний колонтитул>
13 Информация в нижнем колонтитуле, ссылки и т. д.
14 
15 
16

HTML

Основное отличие: мы заменили теги div на 3 новых тега: header , main и footer . Теги header , main и footer являются семантическими , поскольку они используются для представления различных разделов на HTML-странице. Это более описательные теги, чем теги div , которые затрудняют разделение веб-страниц на материальные разделы.

В HTML5 есть 9Тег 0030 nav , который заменяет бывший мастер на все руки, div , для переноса ссылок, образующих меню навигации. Например, меню навигации можно вставить в раздел заголовка :

 1<заголовок>
2 
3 <навигация>
4 Главная
5 Службы
6 Контакт
7 О нас
8 
9```
10
11но его также можно добавить после секции _header_:
12
13``HTML
14<заголовок>
15 
16
17<навигация>
18 Главная
19 Услуги
20 Контакты
21 О нас
22

HTML

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

Основное содержимое

Чтобы добавить некоторый контент в основной раздел , мы можем использовать новые теги HTML5, такие как article и section . Эти теги упрощают структуру main , делая ее похожей на:

1<основной> 2 <статья> 3

Основы JavaScript

JavaScript — богатый и выразительный язык...

5 <раздел> 6

Основы синтаксиса

Понимание операторов, именования переменных, пробелов...

8 9 <раздел> 10

операторов

Операторы позволяют управлять значениями...

12 13 <раздел> 14

Условный код

Иногда вы хотите запустить блок кода только при определенных условиях. ..

16 17 18

HTML

Тег article используется для переноса автономного контента на страницу. Контент является автономным, если его можно удалить со страницы и разместить на какой-либо другой странице. Тег article может содержать внутри себя несколько тегов section , как в нашем примере. Артикул фактически является автономным разделом .

Тег section аналогичен тегу div , но имеет большее значение, поскольку объединяет логические группы связанного контента (например, главу статьи). 9Тег 0036 section также можно использовать для упаковки самой статьи, но для этой цели у нас есть тег article .

Дополнительный контент

Дополнительный раздел

Дополнительный контент, неважный для понимания статьи, но относящийся к статье, может быть вставлен в дополнительный раздел . Например, это может быть информация о том, сколько человек прочитало статью, кто является автором статьи и так далее. В этом случае HTML-код статьи будет иметь следующую структуру:

1<основной> 2 <статья> 3

Основы JavaScript

JavaScript — богатый и выразительный язык...

5 <раздел> 6

Основы синтаксиса

Понимание операторов, именования переменных, пробелов...

8 9 <раздел> 10

операторов

Операторы позволяют управлять значениями...

12 13 <раздел> 14

Условный код

Иногда вы хотите запустить блок кода только при определенных условиях...

16 17 <в сторону> 18

Посмотрели 1503 человека

Автор: Джон Смит

20 21 22

HTML

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

Рисунки

Элементы рисунков на веб-странице могут быть заключены в рисунок и figcaption теги.

Тег фигура используется для разметки фотографий, кодовых блоков, диаграмм, диаграмм, иллюстраций и другого графического содержимого. Как правило, этот тег заключает в себе контент, который можно переместить в приложение. Только изображения, относящиеся к содержимому страницы, должны находиться внутри тега figure (например, изображение логотипа). Поэтому изображения, такие как рекламные баннеры, не должны находиться внутри этого тега. Однако есть способ добавить семантику в рекламный баннер, который мы рассмотрим в разделе «Микроданные» этого руководства.

Тег figcaption представляет подпись или легенду для рисунка. Это необязательно и может быть опущено. Только один тег figcaption может быть вложен в тег figure . Даже если фигура содержит несколько изображений, для всех них может быть только одна figcaption .

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

1<в сторону> 2

Посмотрели 1503 человека

Автор: Джон Смит

4 <рисунок> 5

Люди, которым понравилась статья

9 10

HTML

Логотип в 9Раздел заголовка 0036 также должен быть заключен с тегом figure , поэтому наш раздел заголовка заголовка , наконец, будет иметь следующий код:

 1
2 <рисунок>
3  png" alt="logo"/>
4 
5 <навигация>
6 Главная
7 Услуги
8 Контакт
9 О нас
10 
11

HTML

Обратите внимание, как разделение страницы делает код более понятным и, возможно, улучшает синтаксический анализ контента браузером и поисковой системой.

Блок-схема элемента HTML5

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

Микроданные

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

1<в сторону> 2

Посмотрели 1503 человека

Автор: Джон Смит, старший разработчик программного обеспечения в Google, Маунтин-Вью, Калифорния

HTML

С включенными микроданными HTML-код раздела aside будет выглядеть так:

 1
2 Посмотрели 1503 человека
3  org/Person">
4 Автор:
5 Джон Смит,
6 Старший разработчик программного обеспечения
7 в
8 
9Google,
10 
11 
12 Маунтин-Вью,
13 Калифорния
14 
15 
16

HTML

Очевидно, что в приведенном выше коде гораздо больше данных, чем в предыдущем коде, но также гораздо больше информации для машин. Как вы могли заметить, мы использовали следующие атрибуты микроданных: itemscope , itemtype и itemprop . Итак, что означают все эти атрибуты?

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

Обычно мы используем только несколько свойств для описания элемента, и мы определяем их с помощью атрибут itemprop . Значением свойства может быть новый элемент (например, с адресом в нашем примере).

Ранее в этом руководстве мы упоминали, что баннер можно описать с помощью микроданных. Итак, код HTML для этого должен выглядеть так:

 1
2 
3

HTML

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

Поддержка браузера

Согласно этой таблице семантические теги HTML5 хорошо поддерживаются в последних версиях браузеров. Для некоторых старых версий Internet Explorer, Firefox и Safari мы можем использовать HTML5 Shiv или Modernizr (включая HTML5 Shiv).

Дополнительные ресурсы

Для получения дополнительной информации по этой теме вы можете прочитать следующие очень полезные статьи:

Структура HTML5 — div, section и article

Элемент article

Начало работы со schema.org с использованием микроданных элементы и Webflow: основное руководство

Заключение

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

Надеюсь, это руководство дало вам представление о том, как семантический HTML может улучшить взаимодействие веб-страницы и поисковых систем. А с ростом количества браузеров, использующих HTML5, семантические теги неизбежно станут более распространенными, поэтому их освоение сейчас может принести пользу в будущем.

Что такое семантический тег HTML и зачем его использовать?

Семантика HTML относится к тегам, которые придают смысл HTML-странице, а не просто представление. Это делает HTML более понятным, лучше определяя различные разделы и макет веб-страниц. Эта статья будет посвящена теме «Что такое семантика в HTML».

Что такое семантика HTML?

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

Зачем вам нужно использовать семантические теги в HTML?

Несколько преимуществ использования семантических тегов в HTML:

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

Структура семантических тегов HTML

Следующие теги HTML можно использовать для разбиения страницы на определенные части:

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

Пример семантики в HTML5

Вот пример для понимания основных тегов Semantic HTML5:

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

Метки	Пояснение
<артикул>	Элемент определяет независимое, автономное содержимое.
<навигация>	Элемент определяет набор навигационных ссылок.
<в сторону>	Элемент определяет некоторое содержимое помимо содержимого, в котором оно размещено (например, боковая панель).
<раздел>	Представляет раздел документа.
<детали>	Указывает тег для дополнительных сведений.
<заголовок>	Элемент представляет контейнер для вводного содержимого или набора навигационных ссылок.
<нижний колонтитул>	Элемент определяет нижний колонтитул для документа или раздела.
<основной>	Указывает содержимое главной страницы и должно быть уникальным.
<сводка>	Указывает заголовок для элемента .
<знак>	Указывает выделенный текст.

Заключение

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

Независимо от того, хотите ли вы проникнуть в захватывающую индустрию веб-разработки или вы новичок, стремящийся продвинуться по карьерной лестнице, сейчас самое подходящее время, чтобы сделать следующий шаг к достижению своих целей. Последипломная программа Simplilearn в области веб-разработки Full Stack — отличный способ расширить свой набор навыков. Программа последипломного образования, разработанная в сотрудничестве с Caltech CTME, может помочь вам ускорить вашу карьеру в области разработки программного обеспечения. Вы получите уникальный и тщательно подобранный курс обучения для сквозного обучения разработке программного обеспечения — с практическим опытом программирования с полным стеком, чтобы стать готовым к работе.

This entry was posted in Семантическое ядро

Posted:

Comments: