Вы находитесь на странице: 1из 28

HTML5

Семантические теги
06.04.2016
в 20:00 МСК
Семинар проводит

Дмитрий Лаврик
Профессиональный веб-разработчик
HTML5: семантические теги
Содержание семинара

1. Примеры семантических тегов


2. Их смысл и назначение
3. Типовые примеры разметки
4. Комментарии к тегам
Семантические теги
• article
• aside
• details
• figcaption
• figure
• footer
• header
• main
• mark
• nav
• section
• summary
• time
Отсортируем иначе
• header
• nav
• aside
• section
• main
• footer

• article

• figure
• figcaption

• details
• summary

• mark
• time
Краткое описание
• header шапка документа либо секции
• nav основная навигация
• aside вспомогательный контент
• section семантически обособленная секция
• main главный контент страницы
• footer подвал документа либо секции

• article статья или новость

• figure автономный контент (картинка итп)


• figcaption подпись для figure

• details дополнительные сведения


• summary видимая подпись к details

• mark выделенный текст


• time время / дата
Смысл использования тегов

Добрые цели:

1. Улучшение структуры контента


2. Помощь поисковым роботам
3. Адаптация для различных устройств
(например для устройств, используемых
слабовидящими людьми)

Корыстные цели:

1. Получение плюса по SEO


Типичное представление об HTML5

header

nav

section aside

footer
Изменение структуры

в типичном представлении.
О типичном представлении

1. Адекватная разметка
2. Забыт тег main
3. 90% вебмастеров не использует другие теги HTML5
4. Создана опасная возможность использования
селекторов тегов в CSS
Про пункт №4

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


блоков.

Нормально?

Нормально!

Но есть подвох.
Скриншот

Шапка секции, а не шапка документа!


Следовательно, их может быть несколько на странице.

Ещё цитата «You can have several <header> elements in


one document.»
Вы можете использовать несколько тегов header в
одном документе.
Использование header

Согласно западной документации.

Такое использование тега header является спорным!

В рунете большинство вебмастеров использует всего


один тег header на странице.
Не используйте теги зазря

нормально сомнительно

Секция имеет смысл только тогда, когда она выделяет


группу элементов.
Теги, правила, кейсы
Nav - основная навигация

адекватно

бред

Выделяет группы ссылок, либо ключевую


навигационную группу ссылок на странице.
Section – это вам не обёртка

перебор

дивы никто
не отменял

Section – обёртка семантически выделенного блока, а


не замена тегу div.
Aside – вспомогательный контент
В классическом понимании –
боковая колонка.

В общем случае – вспомогательный контент около главного.

Такая схема практически не используется вебмастерами.


Main – главный контент
Если рассуждать логически, то вот она идеальная схема:

header

nav

main aside

footer

Центральная часть, разная на всех страницах.


Article – статья
Всё просто – не забудьте включить в тег article хотя бы один
заголовок.

нормально

невалидно

Размечать ли внутренности статьи с помощью header и footer –


решать вам!
Figure, figcaption

Однако, обратите внимание, что выделение всех картинок с


помощью figure – это перебор.

Для изображений данная схема хорошо подходит, например,


в случае со слайдером фотографий, где подписи реально
нужны.

Внутри figure могут лежать не только изображения.


Details, summary

Отображается только summary

После клика отображается и details

Без JS нормально работает не во всех браузерах!


Mark – выделение текста
Time
Поисковики оценивают актуальность информации.

Чем ближе к 3 мая, тем актуальнее новость.

Однако, надо стараться обеспечивать читабельность даты и


человека и роботу:
Общие выводы
1. HTML5 – это круто

2. Использование тегов HTML5 даёт огромный плюс в SEO

3. Не используйте теги ради тегов, например


• figure для каждой картинки
• nav для каждой ссылки
• section вместо div
• и т.п.

4. В HTML5 нет на 100% достоверной информации по


использованию всех тегов с точки зрения SEO.
Материалы с вебинара будут опубликованы:

• на личном канале: youtube.com/user/dmitrylavr

• на канале Школы:
youtube.com/channel/UCjRm2TYOpa6MRtpjDndns8g

Подписывайтесь, чтобы не пропустить новые видео и


семинары!
Если вам нравится с пользой проводить время

master.dmitrylavrik.ru

Открыта предварительная регистрация!