Чем чаще мы говорим о разработке сайта, тем чаще мы употребляем термин «семантический». Что это такое и с чем едят, поговорим сегодня.

Семантический код

Семантический код HTML — это хороший тон в верстке и веб-разработке в целом. Он никак не влияет на графическое исполнение, но говорит нам, браузеру, поисковым системам, да и кому бы то ни было, о чем текст или любая другая информация, представленная на странице.
Семантический код хорош тем, что он легок к пониманию и интерпретации. Он сокращает количество написанного кода, избавляя нас придумывать различные названия для div’ов. Кроме того, значительно улучшается читаемость кода, за счет обозначения смысловой нагрузки элементов.
Также, использование семантической разметки — ОГРОМНЫЙ плюс при продвижении сайта, особенно в поисковой машине Google — она активно использует разметку страниц для выделения наиболее значимых смысловых элементов.

Основные семантические элементы HTML

  • q — этот тег вступает в дело, когда нам необходимо обозначить цитату. Начинающие могут сазать, что для этого давно придуманы кавычки, однако, поисковая машина не может воспринимать кавычки однозначно — ведь они могут нести в себе кучу других смыслов, помимо цитирования — иносказание, ирония и пр. Тег q делает цитирование явным и непрекословным.
  • Теги i и b — раньше обозначали курсив и жирный текст. Заменили впоследствии на теги em и strong. Окончательную семантическую интерпретацию теги получили в HTML5: тег i теперь обозначает отличающийся по тону или настроению от основного текст, а тег b обозначает текст, отличающийся стилистически от основного, но не семантически.
  • Тег time — универсальный инструмент для интернациональных сайтов. В чем прелесть? Автоматически парсится и рендерится нужный формат даты и времени вне зависимости от месторасположения клиента.
  • Тег mark — пришел на замену спанам с id в-ля highlight — выделяет важный текст.
  • Тег input — в общем-то используется многими, но мало кто знает, сколько типов этого inputa есть в html5, однако может быть проблема совместимости в некоторых браузерах.
  • Тег menu, принимающий различные значения. Теперь не нужно делать меню из списка — есть спецаильный тег для этого предназначенный.

Оставайтесь вместе с веб-студией LAMPA — впереди много интересного!