HTML5 CSS3 2020 Семантическая Вёрстка часть 02

#HTML5 #CSS3 #сделать #разметку #семантической #логичную
Семантическая вёрстка, или семантический HTML-код, это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML-тегов в соответствии с их семантикой (предназначением), а также предполагающий логичную и последовательную иерархию страницы. Он противопоставляется подходу, при котором написание HTML-кода определяется внешним видом веб-страницы. Для оформления веб-страниц, написанных в соответствии с семантикой, используются каскадные таблицы стилей CSS. Стандарт HTML с самого начала включал в себя ряд семантических тегов, но большую популярность семантическая вёрстка получила после начала работ над HTML5.

В качестве примера можно привести изменения в стандарте HTML, коснувшиеся, в частности, тега физического форматирования i (англ. italic, делающего текст курсивным) — вместо него теперь рекомендуется использовать тег логического форматирования em (от англ. emphasis, акцентирование). Затем с помощью CSS акцентирование можно визуально представить курсивом, полужирным начертанием, подчёркиванием; аудиально (при озвучивании текста на основе TTS-технологий) — замедлением темпа речи или более громким голосом и т. д. Эти изменения вызваны тем, что визуально курсивом оформляется не только акцентирование текста, но и, например, цитаты, для которых с HTML 4 появился тег cite. Другим применением курсива может быть обозначение иностранных фраз или слов; при этом веб-разработчики могут использовать встроенные в XHTML атрибуты указания языка или сделать свою разметку семантической, указав подходящий класс элемента с текстом через атрибут class (например, class="foreign"). Использование различной разметки для акцентов, цитат и иностранных слов позволяет машинным веб-агентам, таким как пауки поисковых систем, более точно определять значимость как отдельных элементов веб-страницы, так и всего текста в целом.

#семантика #последовательную #иерархию #страницы #машинным #веб #агентам #значимость #элементов #вебстраниц #текста #мозг