Что такое семантика и как это относится к HTML? Косвенно связанный aside. Роли структуры документа

Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.

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

Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.

Давайте взглянем на отличие семантического элемента от обычного.

Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.

Теперь семантические form , table , и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:

XHTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!

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

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

Хорошо написанный CSS может скрыть от глаз пользователя плохую верстку html. Но мы не можем скрыть ее от поисковых роботов, плагинов браузера, читалок и других инструментов и девайсов.

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

Как реализовать семантическую верстку страницы?

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

Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:

Теги структуры документа
Текстовые теги
Медиа теги
Корреляционные теги

Теги структуры документа

В прошлом элемент div был основным с помощью которого создавалась , W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.

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

footer: Используется в основном для описания нижней части страницы, обычно содержит информацию об авторе, контакты, копирайт, дополнительное меню и кнопку которая ведет к верху страницы.

main: Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.

nav: элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.

section: Описывает разделы документа, должен содержать в себе заголовок h1 — h6

aside: Используется для идентификации контента, который связан с основным контентом на странице. Например, aside элемент может содержать определение термина в статье, рекламные объявления, дополнительную информацию на странице.

article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.

Текстовые теги

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

h1, h2, h3, h4, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h1, за ним идут в порядке убывания важности заголовки уровня h2 — h6.

strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.

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

cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.

blockquote и q: элементы используются для вставки цитаты из текста другого источника.

time: тег может быть использован, чтобы сказать браузеру, поисковикам и другим устройствам, что конкретная часть контента представляет собой время и дату.

Медиа теги

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

audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.

video: подобен аудио тегу, но используется для добавления видео контента в документ.

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

Корреляционные теги

Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:

ol: тег нумерованного списка, аналогичен с тегом ul

figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.

address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.

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

Сегодня мы поговорим о семантике в HTML5. Я уже писал небольшой обзорный пост про . Рекомендую с ней предварительно ознакомиться, перед прочтением этой статьи. Сейчас мы разберемся с этим вопросом более подробно, о том как правильно и грамотно составлять семантическую структуру HTML5 документа.

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

Рисунок - Семантическая структура для HTML5 страницы.

DOCTYPE и meta теги в заголовке страницы

Начнем со стандартного шаблона HTML5 документа, и добавим теги meta в head:

Заголовок страницы

Я добавил тег который отвечает за ключевые слова. И тег который отвечает за описание страницы. Для SEO оптимизации эти теги обязательны. Также обязательно корректное заполнение тега . Title страницы должен быть уникальным для всего сайта, и содержать в названии всю суть страницы для которой он указан.</p><p>Пойдем дальше. В HTML5 появились новые теги, которые используются для того чтобы делать семантическую разметку документа. Это теги header, nav, main, article, aside, footer и т.д. По отображению они работают также как и обычные <div> теги, то есть это блочные элементы. Но если <div> не имеет семантической нагрузки, то header, nav, main и другие — уже нужно использовать только осмысленно.</p><h3>Заголовок страницы</h3><p>Шапка страницы оформляется в тег header. Заметьте что заголовок страницы пишем тегом h1.</p><p>  <header> <h1>Site title</h1> </header> </p><p>Если у нас есть еще и слоган рядом с заголовком, то помещаем его в p, div или span.</p><p>  <header> <h1>Site title</h1> <p>site slogan</p> </header> </p><p><b>Замечание по поводу тега H1 </b></p><p>Следует заметить что в HTML5 тег H1 используется для указания заголовка контейнера в котором он находится (это может быть header, section, article и т.д.)</p><p>До появления HTML5 тегов семантика была несколько другой и отличалась. Так в HTML4 на странице мог быть только один заголовок H1! Как правило это был заголовок статьи или заголовок страницы (например если это страница рубрики на которой отображаются несколько статей.) H2 использовался для подзаголовков, или для разделов главной статьи. H3 для под разделов и так далее.</p><h3>Навигация на странице</h3><p>Оформление главной навигации по сайту должно заключаться в тег nav. Также следует помнить что хорошей практикой считается оформлять навигацию элементами списка.</p><p>  <nav> <ul> <li>Home</li> <li>Portfolio</li> <li>Gallery</li> <li>Contacts</li> </ul> </nav> </p><h3>Контент на странице</h3><p>Основное содержимое страницы оформляется в тег main. Это может быть одна статья, или несколько превью статей если речь идет о странице блога с несколькими записями. Нельзя помещать сайдбар, хедер страницы, футер или главную навигацию в тег main!</p><p>  <main> ...основной контент страницы... </main> </p><h3>Оформление статьи</h3><p>Тег article — служит для обертки статей. В общем этот тег содержит в себе блок контента, который может быть вынут из контекста страницы, и использован отдельно в другом месте. Это может быть статья (полный тескт статьи или превью), пост на форуме, и т.п.</p><p>На примере ниже я показал оформление статьи в контексте, внутри тега main. У статьи задан блок header с заголовком статьи. Дата публикации статьи задана специальным тегом time, который отображается как обычный inline элемент. У тега time есть специальный аттрибут в котором время публикации должно быть задано в машинном формате. Это может быть только дата datetime="2015-09-30" или с указанием часов минут и секунд datetime="2015-09-30T15:25:55" . Параметр pubdate указывает что статья была и опубликована в то же время что и написана. Если это новость, то может быть такое что время новости одно, а время публикации другое, для этого необходимо указать два раза тег time, и поставить pubdate только в том теге где указано время публикации.</p><p> <main> ...  <article>  <header>  <h1>Article title</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30 Сентября</time> </header>  <h2>Article sub-title</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde?</p><p>Из примера выше видна что внутри статьи были использованы теги header и footer чтобы выделить заголовок и нижний колонтитул статьи.</p><h3>Сайдбар или колонка с виджетами</h3><p>Для каждого отдельного элемента сайдбара используем блок aside. Внутри него заголовок оформляем тегом h1. Так колонка с сайдбаром может выглядеть следующим образом:</p><p>  <div class="sidebar">  <aside> <h1>Widget title</h1> ... </aside>  <aside> <h1>Последние записи</h1> ... </aside>  <aside> <h1>Популярные комментарии</h1> ... </aside> </div> </p><h3>Тег section</h3><p>Тег section — используется для представления группы или секции тематически связанного контента.Его использование похоже на article с главным отличием в том что допускается отсутствие смысла содержимого внутри элемента <section> вне контекста самой страницы. Рекомендуется использовать теги (<h1> – <h6>) для обозначения темы секции.</p><p>В качестве примера можно привести статью, которую вы сейчас читаете, можно было бы каждый параграф обернуть в тег <section> . Например тегом section можно выделять блоки контента на лендинге. Звучит похоже на определение div элемента, который часто используется как контейнер для контента. Разница в том что div не имеет семантического значения, и он не говорит не о чем про контент находящийся внутри него. Тег section , наоборот используется чтобы четко показать что контент внутри него связан по смыслу. Вы можете заменить некоторые свои div теги на section , но всегда отвечайте себе на вопрос: «Этот контент связан между собой или нет?»</p><p>Пример использования тега section в списке с перечислением городов:</p><p> <h1>An Event Apart</h1> <section> <header> <h2>Cities</h2> </header> <p>Join us in these cities in 2010.</p> <section> <header> <h3>Seattle</h3> </header> <p>Follow the yellow brick road.</p> <section> <header> <h3>Boston</h3> </header> <p>That"s Beantown to its friends.</p> <section> <header> <h3>Minneapolis</h3> </header> <p>It"s so <em>nice</em>.</p> <small>Accommodation not provided.</small> </p><h3>Подвал сайта — Footer</h3><p>Подвал сайта оформляется тегом <footer></p><p>  <footer> <p class="copyright">© 2015 сайт Copyright</p> </footer> </p><h3>Заключение</h3><p>Для проверки структуры страницы можно использовать инструмент HTML5 outliner . Он показывает структуру страницы блокам и заголовкам.</p><p>Семантика в HTML5 не ограничивается приведенными выше в статье тегами. Но используя приведенные примеры вы можете освежить свою разметку, и сделать сайт более дружелюбным к поисковым системам, что скажется на более <a href="/internet/kitaiskie-telefony-vysokogo-kachestva-reiting-luchshih-kitaiskih/">высоком рейтинге</a> сайта в поисковой выдаче.</p><p>В продолжение темы можно изучить другие новые HTML5 теги. А также микро форматы для оформления и структуризации данных, например такие как schema.org</p><p><b>Важное замечание по использованию HTML5 тегов. </b> В спецификации не указаны жесткие правила по использованию <a href="/photo-and-video/chto-takoe-semantika-i-kak-eto-otnositsya-k-html-zachem-i-komu-voobshche/">семантических тегов</a>, указаны лишь рекомендации п их использованию. Если вы не понимаете или не знаете где и какой HTML5 тег использовать, лучше используйте div — чтобы не навредить и не нарушить структуру документа.</p><p><b>Статьи и материалы</b></p> <h4>Что такое семантика в HTML</h4> <p>Слово «семантики» пришло в HTML из обычных лингвистических (языковедческих) дисциплин. Там, под понятием «семантика» понимаются разделы, изучающие значение и назначение человеческих языковых единиц. В отличие от реальных человеческих языков, в HTML языковые единицы изучать не нужно. В HTML, языковые единицы называются «тегами» и их назначение уже прописано в спецификации HTML - едином для всех веб-разработчиков документе. На <a href="/problems/kak-v-planirovshchike-zaplanirovat-zapusk-programmy-vypolnyaemye-v-dannyi-moment/">данный момент</a>, существует несколько вариаций на тему спецификации HTML (в зависимости от версии языка), но суть не в этом. Сейчас, нас и этой статьи - важно другое. Это наличие чёткого и внятного объяснения для каждой языковой единицы - тега HTML, в соответствующей спецификации HTML. Таким образом, если в реальной лингвистике человеческих языком, семантика - это изучение назначения <a href="/application/chto-takoe-bitkoin-kriptovalyuta-i-maining-prostymi-slovami-prosto-o-neponyatnom/">непонятных слов</a> и понятий, то в HTML наоборот, семантика - это правильное применение и использование уже готовых и объяснённых тегов.</p> <h4>Семантическая вёрстка веб-документа</h4> <p>Семантическая вёрстка веб-страницы или семантический код HTML-документа - это вёрстка с правильным использования HTML-тегов в соответствии с их предназначением (семантикой). Кроме этого, семантическая вёрстка предполагает логичную и последовательную иерархию для построения всей веб-страницы, в соответствии с законами HTML-документа.</p> <p>Чем отличается семантическая вёрстка от обычной<br>Семантическая вёрстка веб-документа противопоставляется обычной, при котором написание HTML-кода определяется только внешним видом веб-страницы. При семантической вёрстке, ряд элементов страницы имеют свои собственные теги, которые прямо отображают их назначение. Это и есть «семантика» в HTML. Так, например, структура простейшей веб-страницы при обычной вёрстке может выглядеть так:<br><div class="header">Шапка сайта</div><br><div class="navigasia">Главное <a href="/different/kak-delat-oformlenie-grupp-vkontakte-kak-oformit-gruppu-v-kontakte/">верхнее меню</a> сайта</div><br><div class="sidebar">Дополнительное боковое сайта</div><br><div class="content">Содержимое веб-страницы</div><br><div class="footer">Подвал сайта</div><br>Тогда, как при семантической вёрстке, структура той же самой веб-страницы будет иметь вид:<br><header>Шапка сайта</header><br><nav> Главное верхнее меню сайта </nav><br><aside>Дополнительное боковое сайта</aside><br><article>Содержимое веб-страницы</article ><br><footer>Подвал сайта</footer><br>Как видно из примера, для обозначения и задания соответствующих стандартных элементов веб-страницы использованы соответствующие теги. Кроме этого, код гораздо проще. При этом, внешний вид такой страницы для человеческого глаза - останется абсолютно неизменным. Возникает резонный вопрос - а зачем тогда нужна семантическая вёрстка и разметка веб-страницы, если людям она не видна?</p> <h4>Зачем нужна семантическая вёрстка</h4> <p>Семантическая вёрстка и разметка веб-страницы видна браузеру и роботам. Семантическая вёрстка и разметка позволяет более точно определять значимость отдельных элементов веб-страницы и всего текста в целом Поэтому, прежде всего - семантическая вёрстка нужна для улучшения робото-функционала сайта и, как следствие - лучшей его поисковой индексации. А, не об этом-ли, мы все мечтаем?</p> <h4>Семантическая вёрстка в HTML5</h4> <p>Полный фурор и переворот понятия веб-семантики произошёл с появлением HTML5.</p> <p>В HTML4 всё было довольно просто. Для оформления веб-страниц, написанных в соответствии с семантикой, достаточно было использовать внешние каскадные таблицы стилей (CSS) да пару нехитрых нововведений, вида замены тегов <i> и <b> на <em> и <strong>. HTML5 - не в пример «семантичней» и это видно из приведённого примера.</p> <h4>Новые популярные семантические теги HTML5</h4> <p>Прежде всего, <!DOCTYPE html> - простой и понятный всем доктайп.</p> <p><article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr></p> <h4>Проблемы совместимости HTML5 и XHTML</h4> <p>Принципиально, в совместимости HTML5 и XHTML - проблем нет никаких. Все новые браузеры прекрасно поддерживают теги HTML5 и выполняют их. Единственное огорчение ждёт любителей валидного кода. Потому что, большинство сайтов свёрстано не HTML, а в XHTML. И теперь, получается странная ситуация - доктайп от XHTML, а теги из HTML5. Валидатор «вешается и пишет красным». В настоящий момент, на такую «нестыковку» все закрыли глаза. А что делать? Ведь XHTML всегда был только производным языком от HTML.</p> <p>Так что основной веб-язык, это всё-таки HTML5. В ближайшее время, проблемы совместимости HTML5 и XHTML, скорей всего будут решаться, либо простым игнорированием вопроса в пользу HTML5, либо простым добавлением тегов HTML5 в спецификацию XHTML. В любом случае, это будет простое решение, без фундаментальной перестройки положения вещей. Уж слишком он выстрадан, этот HTML5, чтобы теперь ещё всерьёз начинать возиться с XHTML5.</p> <h4>Плавный переход шаблона с XHTML на HTML5</h4> <p>Как утверждают специалисты, HTML5 - это не одна большая вещь, это набор разных возможностей. Поэтому, начинать переходить с XHTML на HTML5 можно постепенно, по частям добавляя нужный код в свой шаблон. Валидатор XHTML ругнётся и всё вскорости образуется. Ведь всем остальным - «по барабану», теги HTML5 работают везде и вся. Для начала, можно изменить общую структуру своего шаблона, простой заменой классов CSS на семантические теги из примера «Чем отличается семантическая вёрстка от обычной».</p> <h4>HTML5 | Семантическая разметка сайта</h4> <p>(Главное - начать)<br>Опять-же таки, как утверждают известные специалисты - «обновление» до HTML5 можно сделать простым изменением доктайпа. Элемент <!DOCTYPE> в HTML5 имеет предельно простой вид: <!DOCTYPE html>. После такого «обновления», ровным счётом ничего не произойдёт, потому что все теги, определённые в HTML4, также поддерживаются и в HTML5. Что касаемо перехода с XHTML на HTML5, то тут я не рискнул на своём сайте так резко менять <!DOCTYPE>, решился только на постепенную замену части тегов да изменение структуры страницы.</p> <p>В этой статье вы узнаете как пользоваться семантической разметкой в HTML5 и как это делать правильно.</p><h4>Что такое семантический HTML5?</h4><p>Если вы более менее знакомы с HTML, то вы должны знать про HTML теги, которые в большинстве своём используются для форматирования контента - они говорят браузеру как показывать контент на странице. Они не дают определение типу содержащегося контента или какую роль играет контент на странице.</p><p>Семантический HTML5 устраняет этот недостаток, определяя точные теги для пояснения четкой роли контента на странице. Эта дополнительная информация помогает роботам/индексаторам, таким как Google и Bing лучше понять какой контент важен, какой является второстепенным, какой используется для навигации и так далее. Добавляя семантические HTML теги на ваши страницы, вы даете дополнительную информацию, которая помогает поисковикам понимать роли и относительную важность разных частей ваших страниц.</p><h3>Примеры</h3> <p>Это примеры не семантических HTML элементов. Они служат как хранители для передачи браузеру того, как контент должен отображаться. Они не дают информации о роли содержимого контента на странице.</p> <p>А это семантические элементы. Они ясно определяют роль содержимого контента.</p><h4>Почему надо это использовать?</h4><p>Для внимательного пользователя обычно легко определить различные части веб-страницы с первого взгляда. Заголовки, меню и основной контент - все мгновенно, визуально очевидно. А теперь представьте, что вы слепы.</p><p>Google и Bing боты, если и не слепы, то имеют серьёзное ослабление со зрением. Для них визуальные пояснения феноменально сложно увидеть и понять.</p><p>Им нужна ваша помощь. Если вы можете успешно передавать поисковикам, какая часть страницы является хедером, какая подвалом и какая навигацией, то они поблагодарят вас. Самое важное, говорить им какая часть контента самая важная, делая это вы даете им расширенные инструкции по приоритезации вашего же контента.</p> <p><img src='https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*ZtfnWE3nSns8srS_L0hu7A.png' width="100%" loading=lazy></p><p>Most important content - самый важный контент </p><p>Само по себе, использование HTML5 не произведет революции в работе вашего SEO. Как вы знаете, успешное SEO это совокупность многих и многих мелких деталей. И это одна из таких малых деталей, которая улучшит понимание контента вашего сайта со стороны любого поисковика, что заметно внесет вклад в ваши SEO усилия.</p><p>Смотря наперед, учитывая как будет развиваться поисковая оптимизация в предстоящие года, расширенный и связная коммуникация с этими системами будет одним из двух краеугольных камней вашей SEO/AEO стратегии.</p><h4><b>Как всё это выглядит? </b></h4><p>Примеры семантических HTML тегов включают в себя <nav> , <footer> и <section> . Так же есть гораздо больше примеров семантических HTML5 тегов, которые могут быть использованы, для примера <blockquote> и <em> , но в этой статье мы разберем только те семантические HTML теги, которые вам понадобятся для простого разделения контента страницы на разные части.</p><p>Следующие HTML5 теги могут использоваться вместо <div> тегов, чтобы разделить контент вашей страницы на определяемые части, каждая из которых будет выполнять конкретную роль. Как вы уже поняли, такие системы как Google и Bing любят это.</p> <p><img src='https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*Hn1ntY3cS0hHjHFKzCtCiA.png' width="100%" loading=lazy></p> <p>Ясная установка границ и подробная расстановка атрибутов ролей для каждой части контента, делает страницу горазду понятнее и легче для правильно индексации для Google и Bing.</p><p>Обратите внимание, что эти теги ведут себя как <div> теги, что говорит о том, что они могут заменить существующие <div> без влияния на общий макет. В большинстве случаев применение семантического HTML5 может быть легко применено нахождением подходящей пары <div> и </div> и её заменой.</p><h4><b>Примеры семантического HTML5 </b></h4><p><b>Супер простой семантический HTML5 пример: </b></p><p>Тут мы довольно просто определяем, какую роль играет каждая часть страницы. Когда вы начинаете разметку HTML5, то вот как безопаснее всего это начать - header, nav, main, footer.</p> <p><img src='https://i1.wp.com/cdn-images-1.medium.com/max/1600/1*SosofPIMsUgh6qX8OTH9Qg.png' width="100%" loading=lazy></p> <p>Лучше иметь супер простое исполнение, которое на 100% верное, чем сложное, но неверное.</p><p>При неверном исполнении, вы посылаете противоречащие и сбивающие с толку с толку сигналы, которые сделают только хуже, а не лучше.</p><p>Правильное и простое выполнение это уже большой шаг вперед в ваших коммуникациях с поисковиками. Не будьте чрезмерно амбициозными. Сделаете неправильно и вы можете получить больше проблем, чем решите.</p><h4><b>Более сложные примеры </b></h4><p><b>Использование секций и <article>: </b></p><p>Тут мы сделали иерархическую систему в нашем главном контенте. Тут есть охватывающая всё <article> , которая определяет центральный контент внутри тега <main> . Это даёт краткий обзор темы этой части страницы. В этой <article> мы имеем несколько под-тем, которые формируют основную тему, которая определяет вложенными секциями.</p> <p><img src='https://i1.wp.com/cdn-images-1.medium.com/max/1600/1*2kOWlPtDDO065ZkxP76q5A.png' width="100%" loading=lazy></p> <p>Примите к сведению, что дизайн (оранжевые блоки) не используется для определения семантических зон страницы. Выглядит немного сбивающим с толку, но показывает довольно четко, что шаблон HTML и семантический HTML имеют разные роли.</p><p>В реальном же мире, семантическая разметка часто следует за основной разметкой более явно, чем в этом примере. Запомните главное правило: Секция формирует часть чего-то ещё, а <article> это что-то, что само по себе. Так же примите во внимание, что тут мы добавили секцию навигации в подвал. Логически, как и в шапке, подвал содержит элементы навигации.</p><p><b>Связанный Aside </b></p> <p><img src='https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*j2PG4zz6Dsr_91maYVGIGA.png' width="100%" loading=lazy></p> <p>Тут мы добавили две части связанного контента к главной <article> контента. Используя aside, мы определяем то, что связанный контента (aside) опционален. То есть основная секция контента может быть показана без aside и все равно будет понятна.</p><p><b>Косвенно связанный aside </b></p> <p><img src='https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*UaNK59x854hxs5NgV2GLXA.png' width="100%" loading=lazy></p> <p>Обратите внимание, что aside не обязательно быть сайдбаром рядом с основным контентом. Он также может быть применен для блоков под основным контентом, включая в себя заголовок, текст и ссылку на другую страницу.</p><p>Тут мы определили несколько косвенно связанного контента на странице, за пределами основного <article> для контента. Тут мы определяем, что контент сбоку не напрямую связан с главной <article> . И этого вполне достаточно в большинстве случаев.</p><h4><b>Наша финальная версия </b></h4> <p><img src='https://i2.wp.com/cdn-images-1.medium.com/max/1600/1*0t662G9gnDN90gQt9W2qEA.png' width="100%" loading=lazy></p> <p><b><section> vs. <article> </b></p><p>Это очень обсуждаемая тема. И нет четких правил о и <articles> , а их применение довольно гибкое само по себе. Они более менее похожи и могут быть использованы взаимозаменяемым способом в большинстве случаев. Только будьте уверены в том, что их использование логично и последовательно.</p><p>Личный совет. Я заметил, что вложенные секции внутри <article> контента, логичнее как для поисковика, так и для человека. Так HTML код легче читать для разработчика.</p> <p><img src='https://i0.wp.com/cdn-images-1.medium.com/max/1600/1*JvF5S32gFI9iFbFgDXmfvg.png' width="100%" loading=lazy></p> <h4>Вложенные элементы</h4><p>Элементы могут вкладывать в себя другие элементы. Для примера, <article> может иметь свой собственный <header> , <footer> , <h2> и даже <nav> (анкоры как хороший пример). Я не дал иллюстрацию для этого «супер вложения» и этому есть своя причина. С точки зрения SEO нет реальной пользы уходить так глубоко в семантический HTML5.</p><p>Как упоминалось выше, для SEO целей, вам нужно сконцентрироваться на создании четкого и простой структуры.</p><h4><b>Чего НЕ ДЕЛАТЬ </b></h4><p>Просто предупреждаю. Я видел много сайтов, использующих визуальный дизайн как руководство для применения HTML5. Как показано ниже, это не то для чего разработан семантический HTML5.</p> <p><img src='https://i1.wp.com/cdn-images-1.medium.com/max/1600/1*DImKOI5H2e2MNxRQABthCw.png' width="100%" loading=lazy></p> <p>Этот необычайно простой пример просто дублирует визуализацию шаблона. Более чем бессмысленно, он определяет то, что страница состоит из 4 разных тем, вместо одной главной темы и 3-х подтем. Явно давая вводящую в заблуждение информацию для поисковиков, такая схема будет иметь негативное влияния для своего понимания в целом.</p><h4><b>Следующие шаги? </b></h4><p>Применение семантического HTML5 на ваших страницах значительно улучшит передачу информации для поисковиков. Так как они хотят то, о чем вообще ваш сайт. Они хотят чтобы вы ясно говорили им на понятном им языке и они хотят, чтобы вы обучали их. По-этому делайте это.</p><h4>Общение</h4><p>Общение с поисковиками (HTML5 имеет важную роль) это одна из двух колон долгосрочной SEO стратегии, которая приведет к успеху в мире где нам нужно будет оптимизироваться для поисковых систем. Есть много отличных вещей, которые вы можете сделать для улучшения подобного общения. И семантический HTML5 тому пример. Schema разметка это ещё один пример.</p><h4>Надежность</h4><p>Вторая колонна это надежность. Есть также клевые вещи, делая которые вы усилите доверие к себе. Все SEO и AEO сходятся к общению и надежности.</p><h4><b>В завершение: памятка для хорошей HTML5 SEO разметки </b></h4><p>Структура, важность, роли и иерархичность это вещи, которые люди часто понимают инстинктивно в дизайне шаблона. Правильное использование семантического HTML5 вместо <div> сделает понимание этого таким же простым и для поисковиков.</p> <p>Привет, уважаемые читатели блога.</p> <p>Мы с вами уже не раз касались темы верстки сайта, в частности, рассматривали основы работы с и . Сегодня мы пойдем дальше и разберемся с тем, что такое семантическая верстка сайта, для чего она нужна и как ее применять на практике. Для понимания данной темы важно предварительно изучить хотя бы основные принципы html и css, либо же постигать новую информацию по ходу прочтения сегодняшней статьи, обращаясь за разъяснениями к более ранним статьям на моем блоге.</p> <i> </i><h2> Семантическая верстка в HTML</h2> <p>Семантика в языкознании означает смысл, значение слова или речевого оборота. Мы уже встречали данный термин, когда рассматривали . И в том контексте, и в сегодняшней статье определение «семантический» указывает на то, что в основе лежит смысл. А стало быть, семантическая верстка – это верстка, построенная на смысловой структуре. В отличие от так называемой верстки на дивах (div – html-тег), все элементы семантической верстки подчинены смысловой иерархии. И самый наглядный пример для объяснения – это использование тегов заголовков и подзаголовков h1, h2, h3 и т.д.<br><img src='https://i1.wp.com/pro-wordpress.ru/wp-content/uploads/2017/11/razmetka_semantics.jpg' align="center" width="100%" loading=lazy></p> <p>Это теги семантической разметки. И если изначально в html для выделения подзаголовков использовались теги <b> или <strong>, то сегодня такое акцентирование для заголовков почти не употребляется. Вместо этого теги h1 и h2 вобрали все необходимые функции для выделения названий разделов жирным увеличенным шрифтом. Кроме того, эти теги дают гораздо больше информации о тексте, как самим веб-разработчикам, так и роботам, обрабатывающим веб-страницы. Т.е. ранее html-верстка была более описательной, уделялось внимание внешним атрибутам элементов, которые составляли общую структуру отдельными блоками. В семантической же верстке – основной акцент делается на подчинении структурных элементов общей смысловой иерархии, где каждый блок имеет свое назначение для целого.</p> <p>Употребление тегов семантической верстки позволяет уменьшить количество кода страницы, ускорить обработку, а соответственно и загрузку документа. Также понятная структура кода гораздо быстрее распознается, а потому и выше котируется поисковыми системами. Напомню, как мы использовали .</p> <p>Когда каждому структурному элементу сайта соответствует определенный тег, код становится упорядоченным и понятным. При этом описание стилей элементов выводятся в отдельный css-файл. Для того, чтобы увидеть насколько страницы вашего сайта структурированы можно проделать простой эксперимент. Отключите на время в браузере поддержку CSS и JavaScript и посмотрите, где на вашем ресурсе названия статей, содержание, подзаголовки и т.д. Можете ли вы разобраться в структуре вашего сайта, используя только html-разметку?</p> <h2> Примеры семантической верстки HTML5</h2> <p>Еще один наглядный пример, где ясно видно отличие семантической верстки от прошлых стандартов html, — использование тега <em> (от английского emphasis – акцент). Тег <em> заменил тег <i> (выделение курсивом). Для тега <em> в файле стилей может задаваться отображение курсивом, подчеркиванием, полужирным. Но значение данного тега – именно акцентирование текста, к примеру, для выделения нового термина. Однако, в случае, когда нужно употребить цитату, в семантической верстке будет уже использоваться тег <cite>, хотя ранее оба эти элемента (и новый термин, и цитата) были бы заключены в тег <i> (выделены курсивом).</p> <p>А теперь приведем пример, как верстка дивами заменяется семантической.</p> <p>Пример обычной верстки:</p> <p><div class=”new”> <div class="article"> <div class="title">Заголовок поста</div> <div class="text">Текст поста</div> </div> </div></p> <p>Замена на семантическую:</p> <p> <article> <h1> Заголовок поста </h1> <p>Текст поста </p> </article> </p> <p>Здесь мы использовали теги семантической верстки: section, article, h1, p.</p> <p>Стили прописываются, как правило, в отдельном в файле (в случае с WordPress в style.css) следующим образом:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> header { width : 90% ; margin : auto ; } h1{ text-align : center ; font-size : 2em ; } nav { background : #f1f1f1 ; color : #777 ; } </td> </tr></table><p>header { width: 90%; margin:auto; } h1{ text-align:center; font-size: 2em; } nav { background:#f1f1f1; color:#777; }</p> <p>В случае верстки с div, данное описание выглядело бы так:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 </td><td class="code"> div.header{ width : 90% ; margin : auto ; } div.header span{ text-align : center ; font-size : 2em ; } div.menu { background : #f1f1f1 ; color : #777 ; } </td> </tr></table><p>div.header{ width: 90%; margin:auto; } div.header span{ text-align:center; font-size: 2em; } div.menu { background:#f1f1f1; color:#777; }</p> <p>Однако все преимущества семантической верстки не отменяют возможности употребления старых наработок. Важно, подойти к построению текстовой разметки с умом, чтобы каждый элемент вписывался в общую структуру.</p> <h2> Распространенные теги HTML5 для семантической верстки</h2> <p>Для того, чтобы глубже понять сегодняшнюю тему рассмотрим некоторые теги, которые используются при семантической верстке в html5. А затем применим их на практике.</p> <p><header> — задает шапку сайта или раздела, в него обычно включен заголовок, а также внутрь могут помещаться другие теги, кроме более высоких по иерархии (html, body, head и т.п.)</p> <p><article> — тег, в который заключают элементы статьи: непосредственно текст, изображения, комментарии</p> <p><section> — разделяет веб-документ на смысловые секции, есть возможность вкладывать один тег section в другой</p> <p><footer> — подвал сайта, где содержится информация о контактах, адреса, ссылки, авторство и прочее</p> <p><nav> — тег html5 для навигации по сайту, в него помещаются наиболее приоритетные ссылки, хотя допустимо использование нескольких тегов на странице</p> <p><aside> — блок неосновного контента, как правило, боковая панель (сайдбар): рекламные блоки, рубрики, метки и т.д.</p> <p>Теперь, зная вышеприведенные теги, посмотрим, как они работают на примере ниже.</p> <p>Прописываем такой код в редакторе или Блокноте:</p> <p><header> Шапка сайта </header> <nav> Навигация <ul> <li><a href="#">Ссылка 1</a></li> <li><a href="#">Ссылка 2</a></li> </ul> </nav> <section> Секция 1 <article> <h1>Заголовок статьи</h1> <p>Контент</p> <h2>Подзаголовок статьи</h2> </article> <footer> </footer></p> <p>Теперь запустим документ, как html-файл.</p> <p>Далее нам необходимо задать стили для каждого элемента. В нашем случае, добавим тег <style> с описаниями в уже созданный html-файл. Если же вы вносите изменения на сайте на WordPress, добавляйте правки в файл стиле style.css.</p> <p>Итак, общий вид нашего файла style.css будет таким:</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 </td><td class="code"> header{ text-align : center ; background : #FF0000 ; } nav { float : right ; width : 300px ; background : #3CB371 ; } section { float : right ; margin : 10px auto ; width : 1250px ; background : #808080 } section h1 { color : #800000 ; padding : 10px ; text-align : center ; } article { float : left ; width : 595px ; margin : 5px ; padding-left : 5px ; text-align : center ; background : #800080 ; } article h2 { width : 250px ; margin : 10px auto ; text-align : center ; background : #D2691E ; } footer { clear : both ; height : 40px ; padding : 10px ; background : #00FFFF ; } footer p { font-size : 14px ; text-align : center ; } </td> </tr></table><p>header{ text-align:center; background:#FF0000; } nav { float:right; width:300px; background:#3CB371; } section { float:right; margin:10px auto; width:1250px; background:#808080 } section h1 { color:#800000; padding:10px; text-align:center; } article { float:left; width:595px; margin:5px; padding-left:5px; text-align:center; background:#800080; } article h2 { width:250px; margin:10px auto; text-align:center; background:#D2691E; } footer { clear:both; height:40px; padding:10px; background:#00FFFF; } footer p { font-size:14px; text-align:center; }</p> <p>Подробно изучив приведенный код, вы увидите, что для каждого тега (header, section, article, footer) заданы расположение, ширина, цвет заливки или шрифта.</p> <p>Такого же вида веб-страницы можно было бы достичь, сверстав документ с помощью тегов <div>, однако использовав теги семантической верстки мы наглядно узнали о ее преимуществах. Просмотрев код, сразу становится понятным значение того или иного блока, что дает возможность веб-разработчикам эффективнее работать с документами. В свою очередь структурированность семантической верстки позволяет <a href="/android/pereobhod-stranic-poiskovym-robotom-yandeksa-stranica-obhoditsya-robotom-no/">поисковым роботам</a> быстро обрабатывать страницы, что дает фору в ранжировании, созданного таким образом, ресурса.</p> <p>Кроме приведенных основных тегов html5 для семантической верстки, существует также множество специальных, выполняющих важное назначение. Приведем <a href="/internet/poleznoe-po-dlya-pk-kakie-byvayut-kompyuternye-programmy-spisok/">краткий список</a> наиболее использующихся семантических тегов html5:</p> <ul><li><video> — воспроизведение и управление видео;</li> <li><audio> — добавление и управление аудио на странице;</li> <li><canvas> — область для создания изображений и других объектов Javascript;</li> <li><command> — кнопка или переключатель внутри тега <menu>;</li> <li><menu> — создание меню и контейнер для тега <command>;</li> <li><datalist> — список вариантов, доступный после ввода в текстовом поле (пример такого списка – подсказки Google);</li> <li><figure> — группирование элементов (например, изображения с подписями);</li> <li><hgroup> — группирование заголовков и подзаголовков;</li> <li><mark> — смысловое выделение текста;</li> <li><meter> — вывод значений в заданном диапазоне, как правило, числовые данные;</li> <li><ruby> — добавление аннотации сверху или снизу основного текста (пример – транскрипция под словами);</li> <li><source> — вставка аудио- или видеофайла внутри тегов audio, video;</li> <li><time> — текст внутри тега приобретает значение даты, времени;</li> </ul><p>Напоследок, смотрите познавательный видео-урок по основам html5, его тегами и примерами их использования:</p> <p><span class="PY2RLgTmiZY"></span></p> <p>При должной устремленности, вы обязательно сможете освоить необходимые знания. Верьте в свои силы.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </div> </div> <div class="grid_4"> <ul id="sidebar"> <div class="widget cat-lists"> <div class="outer"> <div class="menu-sidebar-container"> <ul id="menu-sidebar" class="menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/internet/">Интернет</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/programs/">Программы</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/games/">Игры</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/problems/">Проблемы</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/windows/">Windows</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/social-networks/">Социальные сети</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/android/">Android</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="/category/ios/">Ios</a></li> </ul> </div> </div> <script> function fd() { var menu = document.querySelector('.menu-wrapper') // Using a class instead, see note below. menu.classList.toggle('active'); } function fds(e) { var menu = document.querySelector('.' + e) // Using a class instead, see note below. menu.classList.toggle('active'); } </script> </div> <li id="text-46" class="widget widget_text"> <div class="textwidget"> </div> </li> <li id="text-9" class="widget widget_text"> <div class="textwidget"> <div class="subscription" id="sidebar-sub"> <div class="gradient-sub"></div> <p class="head-sub">Присоединяйтесь!</p> <p class="description-sub"> Уже подписаны более 6 000 человек.<br> Получайте самые свежие статьи. </p> <form action="/" method="post" target="_blank" id="subscr-form-6292" onsubmit="return jc_chkscrfrm(this, false, false, false, false)"> <input type="text" name="lead_email" class="sr-required" placeholder="Введите ваш e-mail" maxlength="100"> <button type="submit" name="lead_subscribe" value="Подписаться">ПОДПИСАТЬСЯ</button> </form> <div class="ribbon"></div> </div> </div> </li> <li id="text-36" class="widget widget_text"> <div class="textwidget"> </div> </li> <div id="sticky-anchor"></div> <div id="sticky"> <div id="owl-demo2" class="owl-carousel owl-theme"> <div class="item"> </div> </div> </div> <script> var stk = true; </script> <style> #owl-demo2 .item { background: #3fbf79; margin: 10px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation { text-align: center; } //use styles below to disable ugly selection .customNavigation a { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } </style> <link href='/assets/owl.theme.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.carousel.css' rel='stylesheet' type='text/css'> <link href='/assets/owl.transitions.css' rel='stylesheet' type='text/css'> </ul> </div> <div class="clear"></div> <a class="btn-floating btn-large red" href="#"></a> <footer> <script type="text/javascript"> function GoTo(link) { window.open(link.replace("_", "http://")); } </script> <div class="grid_12"> <p id="footer"><a href="/">Интернет, компьютеры, гаджеты</a> - Копирование материалов строго запрещено. <br><a href="" target="_blank">О проекте</a> <br><a href="" target="_blank">Реклама на сайте</a> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/assets/modernizr.min.js"></script> <script type="text/javascript" src="/assets/jquery.slicknav.js"></script> <script type="text/javascript" src="/assets/main.js"></script> <script type="text/javascript" src="/assets/include.js"></script> <script type="text/javascript" src="/assets/jquery.fancybox.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); }); </script> <script type="text/javascript"> window.___gcfg = { lang: 'ru' }; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> <div id="fb-root"></div> <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/ru_RU/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> </div> <div class="clear"></div> </footer> </div> <script type='text/javascript' src='/assets/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts.js'></script> <script type='text/javascript' src='/assets/postviews-cache.js'></script> <script type='text/javascript' src='/assets/wp-embed.min.js'></script> <script type='text/javascript' src='/assets/form.js'></script> <script type='text/javascript' src='/assets/jquery.fancybox-1.3.8.min.js'></script> <script type='text/javascript' src='/assets/jquery.easing.min.js'></script> <script type="text/javascript"> jQuery(document).on('ready post-load', function(){ jQuery('.nofancybox,a.pin-it-button,a[href*="pinterest.com/pin/create/button"]').addClass('nolightbox'); } ); jQuery(document).on('ready post-load',easy_fancybox_handler); jQuery(document).on('ready',easy_fancybox_auto);</script> </body> <script>// <![CDATA[ $(".closed").toggleClass("show"); $(".title").click(function(){ $(this).parent().toggleClass("show").children("div.contents").slideToggle("medium"); if ($(this).parent().hasClass("show")) $(this).children(".title_h3").css("background","#bbbbbb"); else $(this).children(".title_h3").css("background","#dddddd"); } ); // ]]></script> <script> $(".single-post .post a:has(img), .single-post .entry-content a:has(img)").fancybox(); $('.sub-menu').parent().addClass('after'); $('.mobile_menu .ya-site-form__input-text').attr('id', 'unstapble-transparent'); $('.sub-menu').parent().children('a').attr("onclick", "$(this).parent().toggleClass('active');return false;"); // $('.nav-list-mobile li a').click(function() { // $(this).parent().toggleClass('active'); // return false; // } ); function tg_menu () { $('.mobile_menu').toggleClass('active'); $('.google_search_mob').toggleClass('active'); } ; if (stk) { $(document).ready(function() { $(window).scroll(sticky_relocate); sticky_relocate(); function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').addClass('stick'); } else { $('#sticky').removeClass('stick'); } } } ); } if (carusel) { } </script> <script src="/assets/owl.carousel.min.js"></script> <script> var owl2 = $("#owl-demo2"); owl2.owlCarousel({ items : 1, //10 items above 1000px browser width lazyLoad : true, itemsDesktop : [1000,1], //5 items between 1000px and 901px itemsDesktopSmall : [900,1], // betweem 900px and 601px itemsTablet: [600,1], //2 items between 600 and 0 itemsMobile : [479,1] // itemsMobile disabled - inherit from itemsTablet option } ); // Custom Navigation Events // $(".next").click(function(){ // owl.trigger('owl.next'); // } ) // $(".prev").click(function(){ // owl.trigger('owl.prev'); // } ) owl2.trigger('owl.play',5000); //owl.play event accept autoPlay speed as second parameter // $(".stop").click(function(){ // owl.trigger('owl.stop'); // } ) </script> </html>