Семантическая разметка HTML5: использовать или нет?

Опубликовано: 07.10.2017

видео Семантическая разметка HTML5: использовать или нет?

Адаптивная вёрстка — HTML Шорты

Введение

Вышедшая в 2014 году пятая версия HTML имеет значительные отличия от HTML4 – это неудивительно, так как временной разрыв между версиями составляет - если брать в расчет версию 4.01 - почти 15 лет! Например, в HTML5 было введено понятие DOM (Document Object Model — «объектная модель документа»), которое существовало и до этого, но не являлось частью языка. Противоречивые мнения вызвало введение семантических тегов: одни считают, что они значительно облегчили жизнь как верстальщикам, так и интернет-пользователям, другие утверждают, что предыдущая версия разметки выглядит более логичной и понятной, а семантические теги являются избыточными. В данной статье мы попробуем ответить на вопрос, который периодически всплывает в различных интернет-сообществах, - зачем нужны семантические теги, и нужны ли они вообще?



Зачем нужны семантические теги

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


HTML5, CSS3. Урок 3. Работа с микроданными. Geolocation

Это нововведение уже нашло свое применение в мире смартфонов и ридеров – например, используя браузер Safari на iPhone или iPad, вы можете перейти в режим чтения, когда на экране выводится только текстовая информация страницы – и воспринимать ее гораздо легче, ведь нет отвлекающих элементов в виде картинок, баннеров, рекламы. Однако этот режим будет доступен лишь в том случае, если страница имеет семантическую разметку, благодаря которой браузер может понять, где находится заголовок, где текст, а где навигация. Как раз ту разметку, о которой идет речь.


►Materialize CSS◄ #2 Grid разметка. Система сеток. Адаптивная система разметки для мобильных

rss