Продолжаем изучать Web Almanac за 2021 год и разбирать тренды веба! Сегодня речь пойдет о разметке. Основная часть обзора коснется именно HTML. Поехали!
DOCTYPE
Вы когда-нибудь задумывались, почему страницы до сих пор начинаются с <!DOCTYPE html> или чего-то наподобие? Этот элемент как бы говорит браузеру: «так, давай без фокусов, просто работай с документом в стандартном режиме», то есть дает команду следовать спецификации HTML.
По статистике 2021 года, доктайп был у 97,4% страниц, что немного больше, чем в прошлом году — тогда этим элементом могли похвастаться 96,8%. Если посмотреть на тенденцию последних лет, то процент страниц с доктайпами стабильно увеличивается на полпроцента каждый год. В идеальном мире 100% веб-страниц должны иметь доктайп. Такими темпами мы будем жить в идеальном мире уже в 2027 году!
HTML5, более известный как <!DOCTYPE html>, по-прежнему является самым популярным доктайпом: 88,8% мобильных страниц используют именно его.
Размер страницы
В мобильном мире, где каждый байт данных имеет определенную стоимость, размер документа становится все более важным параметром. Судя по результатам исследования, страницы веб-сайтов с каждым годом становятся все тяжелее. Если в 2020 году средняя мобильная веб-страница «весила» чуть менее 25 КБ, то в 2021-ом она подросла на пару килобайт. А на десктопах это значение оказалось еще больше — почти 29 КБ.
Язык документа
Мы встретили 3 598 уникальных экземпляров атрибута lang. Поскольку на момент написания этой главы существует 7 139 разговорных языков, это навело нас на мысль, что представлены не все из них. Когда мы учли подтеги script и region, их осталось еще меньше.
Из просканированных страниц на 19,6% десктопных страниц и 18,6% мобильных не был указан атрибут lang, хотя согласно требованиям WCAG язык веб-страницы должен быть определен. Стоит учитывать, что язык может быть указан различными способами, включая элемент xml:lang, который мы не проверяли, так что, возможно, не все потеряно :)
Комментарии
Несмотря на то, что большинство инструментов разработки предлагают возможность удаления комментариев, 88% проанализированных веб-страниц содержали как минимум один комментарий.
<!--[if IE 8]>
<p>This renders in Internet Explorer 8 only.</p>
<![endif]-->
Microsoft отказалась от поддержки условных комментариев в IE 10. Тем не менее, на 41% страниц присутствовал хотя бы один условный комментарий.
Разнообразие элементов
В настоящее время актуальными считаются 112 элементов (за исключением SVG и MathML), еще 28 признаны устаревшими. Мы хотели узнать, сколько из них реально используется на страницах и действительно ли веб состоит из div'ов.
Итак, без паники: интернет не зиждется на div'ах. Средняя мобильная страница использует 31 элемент и состоит из 616 элементов.
Наиболее часто используемые элементы
Каждый год, начиная с 2019-го, в главе «Разметка» приводится информация о наиболее часто используемых элементах. В этом году традицию нарушать тоже не будем!
Эволюция использования элементов в вебе
Шестерка лидеров последние три года держит свои позиции, а элемент link закрепился на седьмом месте.
Частота использования элементов
Несмотря на необязательность их использования, элементы html, head, body, title и meta стали наиболее частыми гостями сайтов — они присутствуют более чем на 99% веб-страниц.
Устаревшие элементы
На сегодняшний день насчитывается 28 устаревших и вышедших из употребления элементов. Несмотря на это, некоторые из них все еще живут на веб-страницах. Самыми используемыми из устаревших являются center и font — к счастью, их стало меньше, чем было в прошлом году.
А вот устаревших nobr и big стало даже больше.
Ситуация в мобильнов вебе приблизительно такая же.
Элемент center используют даже в Google, хотя не нам их судить!
Давайте попробуем сделать выводы.
Судя по информации из веб-альманаха, разрыв между десктопным и мобильным вебом сокращается. И это очень хорошо для пользователей: переход между разными устройствами уже не вызывает мыслей вроде «Эм, а где же эта кнопка, я же ее вчера на ПК вот тут видел!». Табличная верстка уходит в прошлое — там ей самое место. Веб-страницы набирают вес, но не критично: средний прирост в 2 килобайта за год вы просто не заметите, особенно учитывая эволюцию современных гаджетов.
Это было продолжение наших публикаций о трендах веба из Web Almanac. А чтобы прочитать первую часть и узнать самое интересное из мира CSS, переходите по ссылке: тенденции веба 2021: CSS.