Семантический HTML, что-то приятное, но не обязательное?

Размышление

Семантический HTML, что-то приятное, но не обязательное?

Вывод, который я делаю из 10 лучших веб-сайтов на Alexa.com

Семантический HTML, добавляющий смысл элементам, часто рекламируется как передовая практика, которую следует использовать разработчикам. Хотя преимущества были перечислены во многих статьях, мне интересно, используют ли их разработчики, и если да, то среди длинного списка семантических элементов, которые используются.

Следующая статья представляет собой краткое изложение того, что я нашел на основе выборки из 10 наиболее посещаемых веб-сайтов.

Образец

Чтобы выборка была управляемой, я сохранил размер выборки до 10 и составил окончательный список на основе 10 лучших веб-сайтов Alexa.com по всему миру.

Рабочее определение

Поскольку я не смог найти никакого официального определения семантического HTML, для целей этой статьи все элементы, которые не являются <div>s и <span>s, рассматриваются как семантические элементы, поскольку эти два являются общими тегами, которые используются для блочных элементов и встроенных элементов соответственно. .

Чтобы дать пример доступных HTML-элементов, ниже приведен список из W3.org, которые используются в теле HTML:

Содержание заголовка и раздела:

Плавный, интерактивный и фразовый контент:

Используемые инструменты

Чтобы изучить HTML, я использовал встроенный инструмент разработчика в браузере Firefox. Его можно включить с помощью сочетания клавиш Fn + F12.

Результаты

10 лучших веб-сайтов используют <div> и <span> для структурирования своего HTML. Семантические идентификаторы и классы используются для дифференциации каждого элемента и определения его назначения.

Среди 10 веб-сайтов Sohu, китайская поисковая система и развлекательный веб-сайт, использует больше всего семантических элементов, но на самом деле не так много, чтобы быть первым. В то время как Sohu использует <div> во всем своем HTML, это единственная компания, которая использует семантические элементы HTML5 <header>, <nav> и <footer> для своего заголовка, навигации и нижнего колонтитула.

Общие семантические элементы

Чтобы ответить на второй вопрос об общих семантических элементах, используемых на этих 10 сайтах, я бегло просмотрел их HTML.

Используемые общие семантические элементы попадают в категорию потока и интерактивного контента — <a>, <ul>, <li>, <img>, <form> и <input>. Эти элементы, вероятно, используются из-за присущей им функциональности, которую нельзя заменить другими элементами, а не из-за значения. они добавляют.

Неожиданные выводы

При просмотре HTML-кода некоторых веб-сайтов были обнаружены неожиданные результаты.

Googleиспользует <center>, с которым я раньше не сталкивался. Поиск в Google (поскольку страница удобно загружается в моем браузере…) показывает, что этот элемент является «.. устаревшим элементом блочного уровня, который отображает свое блочное или встроенное содержимое по центру по горизонтали внутри содержащего его элемента». Кажется, кому-то нужно обновить сайт в ближайшее время.

Youtube использует много пользовательских элементов, в то же время полагаясь на <div> и <span>.. Я раньше не видел такой html-структуры, но опять же, я не часто просматриваю html, когда блуждаю по сети.

Вывод

Для веб-сайтов, которые существуют уже некоторое время, семантические элементы обычно не используются. Представлять их, вероятно, приятно, но не обязательно.

С другой стороны, веб-сайты, которые были недавно запущены или обновлены, могут быть теми, которые прокладывают путь к использованию семантического HTML, поскольку разработчики, работающие над этими сайтами, скорее всего, будут писать HTML с нуля, а семантические элементы — это то, что приятно иметь. и легко внедрить в новый проект. Это всего лишь моя интуиция, и было бы неплохо изучить это подробнее, за исключением того, что может быть сложно сузить выборку веб-сайтов. Посмотрим, смогу ли я справиться с этой задачей в будущем!