Семантическое значение HTML-тегов, разница между тегами i и em, b и strong

05.07.18 ИТ / HTML 11146

Язык HTML разрабатывался таким образом, что практически каждый элемент в нем содержит семантический смысл. Семантический смысл тегов – это значит, что каждый тег не просто задает тот или иной внешний вид интерфейса на странице, но и еще сообщает о том, зачем этот тег, поясняет смысл и назначение тега.

Теги предназначены не обязательно для создания внешнего вида интерфейса, хотя в настоящее время они предназначены именно для этого. Внешний вид тегов может трактоваться и отрисовываться как угодно, на разных движках и ОС они могут отличаться внешне. Но семантическое значение тегов всегда одинаковое, такое, какое четко задано в спецификации.

Начинающие пользователи, как правило, вообще не задумываются о смысле тегов, им нужно только получить нужный внешний вид. Но это неправильный подход, нужно использовать теги осмысленно. Для чего это нужно? Всевозможные поисковые системы, сервисы используют семантические правила для извлечения необходимой информации, а это значит, что если станица правильно спроектирована с использованием подходящих тегов, то она будет гораздо ценней для этих поисковиков и сервисов. Это немаловажный фактор при продвижении сайта.

Например, часто можно встретить вопросы, какой тег использовать, тот или иной, когда они внешне выглядят абсолютно одинаково. Тег i и тег em как раз такие теги. Внешне ничем не различаются, но семантический смысл разный. Первый тег i просто выделяет текст курсивным начертанием, второй же тег em придает тексту, помещенному в него, особый смысл. Текст становится более важным на странице. То есть, если не смотреть внешний результат, то тег em дает смысловое выделение, а тег i нет. Когда же посмотреть в браузере результат, выглядят они одинаково, но особое значение у текста в теге em. Таким образом, разница между i и em установлена.

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

Таким образом, нужно уметь правильно понять, как применять теги в той или иной ситуации. Ведь от правильного применения зависит успех продвижения сайта в современных поисковых системах. Семантическое значение HTML достаточно просто понять, особенно актуально это для новых тегов HTML5. Они, например, позволяют четко обозначить структуру страницы, благодаря новейшим тегам. Но чтобы рассмотреть эту тему, потребуется написать целую статью, об этом позже.