MUST READ
Семантика — совокупность смысловых отношений.
<dl>
<dt>Семантика</dt>
<dd>совокупность смысловых отношений.</dd>
</dl>
семантический HTML код — это верстка с правильным использованием HTML тегов, использованием их по назначению, так как их задумывали разработчики языка HTML и веб стандартов
особенности применения элемента и смысловые связи, которые образует с остальными элементами, расписаны в спецификации, остаётся только научиться использовать эту информацию
Подобное использование HTML-элементов по их назначению, получило название POSH (Plain Old Semantic HTML) — проще говоря, «старый добрый семантический HTML»
Id используются на странице 1 раз | Class можно задавать много раз |
Id у элемента только один | у одного элемента может быть несколько классовб возможны комбинации |
у id бОльший вес для CSS |
Class для CSS
ID для JavaScript
создание смысловых связей между семантическими единицами в документе
Пример: микроформаты
микроформат - способ семантической разметки сведений о разнообразных сущностях (событиях, организациях, людях, товарах и так далее) на веб-страницах с использованием стандартных элементов языка HTML (или XHTML). Пользователь-человек может воспринимать страницу с микроформатом как обычную веб-страницу (через браузер), тогда как программы-обработчики способны извлечь из такой страницы структурированную информацию, следуя определённым соглашениям
<div>
<div>Василий Пупкин</div>
<div>Рога и Копыта</div>
<div>495-564-1234</div>
<a href="http://example.com/">
Мой сайт</a>
</div>
<div class="vcard">
<div class="fn">Василий Пупкин</div>
<div class="org">Рога и Копыта</div>
<div class="tel">
<span class="type">Work</span>
<span class="value">495-564-1234</span>
</div>
<a class="url" href="http://example.com/">Мой сайт</a>
</div>
Семантический HTML для веб разработчиков
Семантический код для пользователей
Семантический HTML для машин
Поисковые системы постоянно совершенствуют методы поиска, чтобы в результатах была та информация, которую действительно ищет пользователь. Семантический HTML способствует этому, т.к. поддается гораздо лучшему анализу — код чище, код логичен (четко видно где заголовки, где навигация, где содержимое).
Интересный факт: семантичные теги HTML5, такие как header, footer, nav, section появились после анализа Google миллиарда страниц: было исследовано как авторы описывают свои html элементы