Как правильно использовать семантическую верстку, теги

Раньше люди не задумывались о том, как размечать страницу для роботов google и yandex. Верстали таблицами table, div, span и т.д. Но алгоритмы меняются и усложняются. Поэтому был придуман HTML5.

Семантическая верстка — это логическое содержание контента (документа) для роботов.

[su_row][su_column size=»1/2″ center=»no» class=»»] Так видит наш документ поисковой робот. Чтобы ему помочь понять на что обратить внимание в вашем документе, необходимо делать семантическую верстку на каждой страницы. Это будет плюсом в продвижение сайта. Но не забываем, что существует другие показатели, алгоритмы для продвижения. [/su_column] [su_column size=»1/2″ center=»no» class=»»][/su_column] [/su_row]

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

Главные семантические теги

Main

Указывает основное содержимое документа.
Как использовать: один раз и в начале.

Header и Footer

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

[su_row][su_column size=»1/2″ center=»no» class=»»] Первый header [/su_column] [su_column size=»1/2″ center=»no» class=»»] Второй header [/su_column] [/su_row]

Footer — Определяет нижний колонтитул документа.
Использовать можно много раз на странице

Чем отличается ?
header — содержание которое прямо относится к документу, а footer не относится, например копирайтинг или карта сайта.

Nav

Определяет навигационные ссылки.
Где ставить тег nav: в навигации, хлебных крошках, футоре, содержание, sidebar где есть ссылки навигации.
Ошибка думать, что тег nav используется только для навигационного меню

Section

Раздел документа, который имеет прямое значение к нему, далее мы разберем на примере.
Желательно иметь заголовок. Один section = одному h

Article

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

Aside

Сущность, которая косвенно относится к контенту. Поисковый робот, как бы обходит и придает меньшее значение этому контенту заключенный в тег aside. Например у вашей страницы есть, реклама. Если мы заключим блок с рекламой в тег aside, то робот будет понимать, что не стоит относить это к документу вместе c основным контентом. Тем самым мы не путаем ПС.
Что заключать в тег aside: сайд бар, рекламные блоки и т.д

Address

Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.

h1-h6

Заголовок документа. h1 — h6 стилизуется под человека, чтобы было красиво и понятно. Для робота скорее всего не имеет значения h1 — h6.
Почему для робота не имеет веса h1 — h6 ? Об этом можно узнать у ведущих специалистов. Но точно не подтверждено.

Strong и b, i и em

Не путайте теги. Тег strong придает важность слову, а тег b просто выделение. Также и курсив i и em

Blockquote

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

Самое главное вложенность. Практическое применение семантической верстки

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

Разберем простой пример

Для удобства вытащите этот код в редактор и внимательно прочитайте

<h1> Как подружиться с котом </h1> <!-- Главная тема нашего документа, ключевое слово дружба с котом -->
	
	<p> Дружба с котом сильно отличается от ........  </p>  <!-- Даем понять поисковому роботу, что наш документ именно о  дружбе с котом --> 

	<section> <!-- Эта секция отностится к нашей главной теме -->
		<h2> Британские коты </h2>  <!-- Одна секция один заголовок -->
			<p> Британские коты злые и .... </p>

			<section> <!-- эта секция будет относиться к секции про британских котов, она вложенна. --> 
				<h2> Вислоухие </h2> 
					<p> Вислоухие коты менее злые, чем .... </p>

			</section>
	</section>
   
   <section> <!-- эта секция относится к главной теме как подружиться вы вышли из секции британских -->  
   		<h2> Сиамские коты </h2>
   		<p> Сиамские коты самые злые .... </p>
   </section>

   <article> <!-- Заключили в тег артикл, этот отрывок мы можем вырвать из контекста этого документа и смысл всей статьи не потеряется --> 
   		<h2> Собака, как верный друг </h2>
   		<p> Собака это друг человека </p>
   </article>

  <aside>  <!-- Контент не относится к главной теме документа -->
    Реклама про пылесосы 
  </aside>

Еще проще

  <section> 
  	Цвета Яблок
  	
  	<section> 
  		Красные 
  	</section> 

  	<section> 
  		Зеленые
  	</section>

  </section>

  <article> 
  	 Коты 
  </article>
[su_spacer size=»50″]