Интернет-программирование. HTML 5. Семантические элементы МИЭТ, 2017
Элемент |
Описание |
<address> |
Определяет, что внутри описывается адрес |
<figure> |
Определяет, что внутри изображение |
<figcaption> |
Определяет подпись к изображению внутри figure |
<time> |
Определяет дату и время с возможным указанием смещения |
|
часового пояса и заданием формата представления с помощью |
|
атрибута datetime |
<mark> |
Определяет в тексте важное содержимое, а также ключевые слова. |
|
По умолчанию текст выделяется желтым фоном. |
<bdi> |
Используется для текстов, написанных одновременно на языках, |
|
читающихся слева направо и справа налево. |
<wbr> |
Определяет место, где можно добавить разрыв длинной строки в |
|
случае необходимости |
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Применение семантических элементов оформления текста. Элемент figure
<main>
<section style="width:400px;"> <figure style="float:left;">
<img src="/img/html5.png" alt="HTML5" style="width: 200px;"> <figcaption>Это HTML5</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</main>
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Применение семантических элементов оформления текста. Элемент time
Задачи элемента time
1.Определить, что внутри дата
2.Определить дату в гарантированно читаемом формате ГГГГ:MM:ДДТЧЧ:ММ+ЧЧ:ММ
МИЭТ откроется <time datetime='2017-03-10Т09:00+4:00'>Десятого марта в 9 часов</time>
Здесь 4:00 — смещение часового пояса Москвы относительно времени по Гринивичу Все часовые пояса — см http://en.wikipedia.org/wiki/Time_zobe
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Для подключение семантики в старых браузерах (кроме IE) вписываем в CSS:
article, aside, footer, header, hgroup, main, nav, section { display: block;
}
IE8 и старше не применяют CSS к элементам, которые не распознают. Для этого их нужно 'зарегистрировать' через создание элемента
<script>
document.createElement('header');
</script>
Код для поддержки всех элементов можно скачать по адресу:
https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Нужно ли поддерживать совместимость со старыми IE? смотрим, например, OpenStat (http://spylog.ru)
Интернет-программирование. HTML 5. Семантические элементы |
МИЭТ, 2017 |
Но не забываем посмотреть и тенденцию своего ресурса
ниже пример представления в Yandex.Metrika
Интернет-программирование. Микроразметка и Микроформаты |
МИЭТ, 2017 |
Микроразметка использует то обстоятельство, что броузеры никак не реагируют на неизвестные им атрибуты в тегах.
Таким образом, если договориться об особом использовании нестандартных атрибутов, то можно еще более детализировать семантику страниц.
Например, можно придумать семантику атрибутов для описания химических соединений или бухгалтерии и т.д.
Интернет-программирование. Микроразметка и Микроформаты |
МИЭТ, 2017 |
Микроформат |
Описание |
Schema.org |
Универсальный стандарт микроразметки, позволяющий |
|
семантически размечать контент на основе заданных схем |
|
разметки с сайта schema.org |
Open Graph |
Предназначен для извлечения информации для превью, при |
|
публикации ссылки на страницу в социальных сетях |
hCard |
стандарт для разметки контактной информации |
hRecipe |
стандарт (X)HTML-разметки кулинарных рецептов |
hCalendar |
стандарт для разметки информации о мероприятиях и событиях |
hReview |
стандарт для разметки отзывов о чем-либо |
Интернет-программирование. Микроразметка и Микроформаты |
МИЭТ, 2017 |
Schema.org http://schema.org/, рус. - http://ruschema.org
Это микроформатный стандарт семантической разметки данных в сети, объявленный поисковыми системами Google, Bing и Yahoo! летом 2011 года.
Интернет-программирование. Микроразметка и Микроформаты |
МИЭТ, 2017 |
Код до разметки по правилам schema.org/Organization
<div>
<span>МИЭТ</span>
Контакты:
<div> Адрес: Центральный проспект, 5, 124498, Москва,</div> Телефон: (499) 731-44-41, Факс: (499) 710-22-33,<br/> Электронная почта: info@miet.ru
</div>
Код после разметки по правилам schema.org/Organization
<div itemscope itemtype="http://schema.org/Organization"> <span itemprop="name">МИЭТ</span>
Контакты:
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> Адрес:
<span itemprop="streetAddress">Центральный проспект, 5</span> <span itemprop="postalCode">124498</span>
<span itemprop="addressLocality">Москва</span>, </div>
Телефон:<span itemprop="telephone"> (499) 731-44-41</span>, Факс:<span itemprop="faxNumber">(499) 710-22-33</span>, Электронная почта: <span itemprop="email">info@miet.ru</span> </div>