[БЕЗ_ЗВУКА] В этом видео я расскажу вам, что такое семантическая разметка, и почему важно соблюдать семантику. Итак, можно провести простую аналогию: у нас есть дом, и в этом доме мы все называем своими именами. Например, спальня — это спальня, кухня — это кухня, и какие-то остальные комнаты имеют свое название смысловое. Так и должно быть в разметке, то есть у каждого элемента есть свое название и значение. Например, у нас тело, внутри документа есть шапка, основная часть, блок навигации, какая-то сопровождающая информация, дальше есть какая-то секция, в этой секции расположена еще какая-то сопроводительная информация. Есть своя шапка, основная часть и подвал. Например, у нас есть такая разметка, элемент div, в нем вложены параграфы. Данную разметку можно сделать более семантичной, то есть понятнее, и будет выглядеть она вот так. Поподробнее сейчас расскажу о всех этих элементах. Элемент article, он обозначает законченную самодостаточную часть документа. Это может быть какой-то блок, это может быть отдельный пост, комментарий или новость. Все это можно заключить в элемент article. В браузере это выглядит вот так, то есть визуально эти элементы никак не влияют на отображение. Они несут лишь логическое какое-то значение. Элемент section определяет тематическую группу. Например, это может быть список постов или список комментариев. Все это можно объединить в элемент section. Каждый из комментариев может быть обернут в элемент article. Элемент nav, он определяет блок с навигацией, именно с основной навигацией по странице. Рекомендуется делать один элемент nav на странице, где содержатся ссылки по всему сайту. Элемент aside определяет блок с сопутствующим содержимым к странице. Например, это могут быть какие-то цитаты, обозначения, выноски. Очень часто этот элемент располагают где-то справа от основной части, располагая там сопутствующую информацию. Элемент header определяет шапку для всего документа. Также элемент header может относиться к какой-то секции. Например, у нас есть секция, внутри мы указываем шапку, и в этой шапке мы можем располагать заголовок. Элемент footer определяет подвал страницы или подвал секции, также может располагаться либо в элементе body, либо в элементе section. Обычно в подвале располагают информацию, которая содержит какие-то контактные данные или правообладателя. Элемент address определяет блок с контактной информацией, относящейся к ближайшему article или body. Очень часто его размещают в элементе footer, там, где идет информация об адресе или контактная информация. Элементы h1 – h6 определяют заголовок документа. Цифра, h1, например, обозначает уровень заголовка, h1 — это самый высокий уровень, h6 — наименьший уровень. В браузере размер шрифта меняется, то есть у h1 самый большой размер шрифта, у h6 — самый маленький. Но не нужно обращать внимание на то, что меняется размер шрифта, потому что при помощи стилей можно задать абсолютно разный размер шрифта, независимо от важности заголовка. Элемент hgroup, он как бы объединяет все заголовки. Например, если у нас есть название фильма, и у названия фильма есть еще так называемое подназвание, тогда можно эти два элемента объединить в элемент hgroup. Помимо элементов, описанных в спецификации HTML, есть спецификация под названием «Микроразметка». Она позволяет более точно определить, что за содержимое находится в этом элементе. При помощи микроразметки вы как бы сообщаете поисковой системе: «Смотри, у меня есть более подробная информация». К примеру, у нас есть элемент section, и в нем написан вроде бы как обычный, неприметный тест. Поисковым роботам довольно сложно разобрать, что внутри находится за текст. Но при помощи микроразметки мы можем этот текст превратить вот в такой текст. И здесь мы указываем явно, что за спецификация используется, в данном случае это schema.org, и какое значение для какого поля. Например, в данном случае мы описываем карточку пользователя. Указываем имя пользователя, явно задаем атрибут itemprop= ="givenName", и в качестве значения берется содержимое этого элемента, то есть мое имя. Так же, соответственно, с familyName, с должностью и так далее. На самом деле существует несколько основных спецификаций по микроразметке — это schema.org и microformats. Я рекомендую вам прочитать и более подробно ознакомиться с микроразметкой. Также есть валидатор, которым можно воспользоваться после разметки документа. Есть такое понятие, как визуальная разметка, то есть некоторые элементы когда-то использовались для того, чтобы, например, сделать текст жирным, курсивным, зачеркнутым или вообще выровнять его по середине. Когда появился CSS, потребность в этом отпала, и компания WHATWG элементы <b> и <s>, придала им определенное значение. Но с точки зрения визуальной разметки не нужно использовать эти элементы. Если хочется сделать текст просто зачеркнутым, но он не несет никакого смысла, не нужно использовать для этого элемент <s>. Вот так это выглядит в браузере, то есть текст у нас становится жирным, обернутый в <b>, соответственно, курсивным, зачеркнутым или подчеркнутым или вообще выровнен по центру. Я бы вам не рекомендовал использовать эти элементы для того, чтобы создать какой-то визуальный эффект. В этом видео вы узнали, что такое семантическая разметка, для чего нужна микроразметка и почему не нужно использовать элементы для визуального эффекта. В следующей лекции я расскажу вам про гиперссылки, и как их вставлять в документ.
