Ошибки в HTML-коде встречаются только на сайтах, созданных в CMS-конструкторах? Это миф


Ошибки в HTML-коде встречаются на всех сайтах
Ошибки в HTML-коде встречаются на всех сайтах

В отношении конструкторов сайтов со стороны профессиональных веб-разработчиков предъявляется большое количество претензий. Одна из основных — отсутствие доступа к HTML-коду. Соответственно, ошибки, которые неизбежно возникают в кодировке сайтов на любом движке, невозможно исправить вручную. Я не настолько силен в веб-программировании, чтобы вступать в дискуссию по столь сложному вопросу. Но тема меня весьма волнует, так как личный сайт создан в CMS-конструкторе Wix. Попробуем разобраться, насколько количество ошибок в HTML-коде сайта зависит от CMS-платформы.


Именно к Wix почему-то самое предвзятое отношение со стороны отечественных сайтостроителей даже по сравнению с тем же конструктором Тильда. Например, на Яндекс.Кью, где в своем сообществе периодически пишу о конструкторе Викс, получаю стабильные дизлайки и возмущенную критику. Естественно, от разработчиков, использующих альтернативные CMS-платформы.


Чтобы понять насколько все плохо, я провел небольшое исследование на предмет взаимосвязи ошибок в HTML-коде, CSS и выборе программных платформ для создания сайтов. Результат получился довольно любопытным. Не претендую на полномасштабность, но все сайты взяты из ТОП рейтингов или выдачи поисковых систем. Некоторые из них очень популярны и знакомы многим пользователям Рунета в определенной теме.


Что такое валидация HTML


Данный показатель является одним из основных факторов, влияющих на качество веб-дизайна. Консорциум Всемирной паутины (W3C) — это международное сообщество, которое де-факто определило стандарты написания HTML-кода. Эти правила были созданы для того, чтобы браузеры могли корректно обрабатывать код и правильно отображать веб-страницы. Последняя версия HTML5 добавила интересные функции, такие как хранение данных локально в браузерах пользователей, встроенная поддержка аудио и видео, поддержка векторной графики и прочее.


На что влияет показатель валидности HTML-кода


  • поддержка кроссбраузерности: если код сайта валиден, то ресурс примерно одинаково будет отображаться во всех популярных обозревателях;

  • оптимизация в поисковых системах: повышается вероятность правильной индексации содержимого страницы поисковиками;

  • снижается вероятность возникновения ошибок верстки в разных браузерах без изменения CSS (стиль сайта);

  • правильный код снижает вероятность возникновения проблем на веб-странице при редактировании CSS или добавлении новых фрагментов кода HTML;

  • если код соответствует требованиям W3C, то это снижает вероятность возникновения проблем с отображением сайта в новых версиях браузеров.


Убедительно для того, чтобы откровенно бояться появления ошибок в HTML-коде на сайте, верно? Посмотрим, как все обстоит на деле.


Проверка валидности HTML страниц сайтов, созданных в разных CMS


Увидеть код любой страницы сайта легко. Достаточно открыть ресурс в любом браузере и нажать комбинацию клавиш «Ctrl+U». Вот так выглядит код главной страницы моего сайта в Яндекс.Браузере:

HTML-код моего сайта в браузере Яндекс
HTML-код моего сайта в браузере Яндекс

Согласитесь, сложно, не очень красиво и совсем непонятно. Воспользуемся одним из сервисов автоматической проверки HTML-кода и CSS Markup Validation Service. Проверка выполняется по нескольким параметрам, основные из них:


  1. Валидация синтаксиса — проверка на наличие синтаксических ошибок. <foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> не является допустимым HTML-тегом, так что проверка синтаксиса является минимально полезной для написания хорошего HTML.

  2. Проверка вложенности тегов — теги должны быть закрыты в обратном порядке относительно их открытия. Например, эта проверка отлавливает ошибки с неправильно закрытыми <div>.

  3. Валидация DTD — проверка соответствия кода указанному Document Type Definition. Она включает проверку названий тегов, атрибутов, и «встраивания» тегов (теги одного типа внутри тегов другого типа).

  4. Проверка на посторонние элементы — проверка выявляет все, что есть в коде, но отсутствует в DTD. Например, пользовательские теги и атрибуты.


Имейте в виду, что это логические проверки, и не важно как реализован валидатор. Если хотя бы одна из проверок не проходит успешно, то HTML считается невалидным.


Результаты тестирования сайтов разных CMS на ошибки HTML и CSS


Начну со своего сайта. Чтобы не усложнять процедуру, протестировал Главную страницу. Результат вроде как удручающий: 124 ошибки в HTML-коде, из них 3 предупредительные, и 47 багов в CSS. Но не будем торопиться с выводами и переносить сайт, созданный в том же Викс, на безупречный WordPress или крутую «Битрикс». Посмотрим вначале, как обстоит дело с другими ресурсами, созданными на бесплатных, условно-платных и весьма недешевых движках.


Сайт

CMS

HTML-ошибки

Ошибки CSS

​Примечание

WordPress

42

33

Копирайтинг

WordPress

92

93

Разработчик сайтов WP

WordPress

254

3

Лайфхакер

Битрикс

24

8

Texterra

Tilda

167

8

Разработчик сайтов Тильда

Tilda

372

22

Сайт конструктора Тильда

MODX

23

37

Интернет-магазин

Joomla

29

6

Сайт киножурнала

Wix

35

77

Сайты на WIX


Конечно, обзор выглядит немного хаотичным. Но я не ставил задачу проведения полномасштабного исследования. Просто хотел показать, что ошибки кодов и верстки присутствуют в разной степени у всех без исключения сайтов, на каком бы CMS-движке они не были созданы. Обратите хотя бы внимание на саму платформу конструктора сайтов Tilda — прямого конкурента Wix и фаворите в России. Платформа в лидерах по количеству багов HTML. В то время как сайт разработчика Викс выглядит очень даже неплохо.


Влияние ошибок HTML-кода сайта Викс на кроссбраузерность и поисковую оптимизацию


Раз валидность так важна для корректного отображения в различных обозревателях, проверяю кроссбраузерность главной страницы своего сайта Викс в следующих браузерах: Яндекс.Браузер, Opera, Firefox, Google Chrome, Atom, Tor. Устанавливаю разный масштаб от 100 до 125%, меняю размер окон. Причем у меня два монитора с разными настройками разрешения — 1600х900 и 1920х1080. Все страницы сайта отображаются корректно, верстка элементов не съезжает. Аналогичная ситуация на смартфоне с мобильной версией.


А что с поисковой оптимизацией? В Яндекс.Вебмастере все страницы сайта имеют статус 200 ОК, никаких ошибок нет. Рекомендация касается только подключения Турбо-страниц. Так же дело обстоит в Google Search Console и в новом инструменте контентного анализа Google Search Console Insights.


Вывод


Прямой зависимости между платформой по созданию сайтов и количеством ошибок в HTML-коде и CSS нет. Так же как популярность, индексация и даже ранжирование в ТОП поисковиков могут быть очень высокими при наличии большого количества ошибок в коде.


Настройки конструктора сайтов Wix позволяют минимизировать количество ошибок в коде HTML не хуже, чем на других платных и бесплатных CMS-платформах. Особенно с учетом возможности эксклюзивного инструмента настройки кода Wix Code.

Что касается WP, то как раз свободный доступ к исходному коду предъявляет высокие требования к уровню подготовки и опытности веб-программиста. Особенно для решения нестандартных задач дизайна, верстки, установки дополнений и плагинов. Для владельцев ресурсов, созданных на этой платформе, данный факт означает более внимательное отношение к квалификации разработчика, дополнительные затраты на найм профессиональных программистов.


Следует также различать, что ошибки кода делятся на критичные и некритичные. Здесь все зависит от веб-программиста, который создает и ведет ресурс. Не важно, на каком движке. К тому же современные браузеры, что видно из моего пусть весьма хаотичного обзора, совершенно нормально обрабатывают сайты с большим количеством некритичных ошибок валидации. Да и поисковые системы, на мой взгляд дилетанта, весьма лояльны к таким ресурсам при корректной настройке параметров SEO и других значимых для ПС факторов.



 
google-site-verification=L_PzY8CiiYFI-TnrOMrC7nbSgJkMHG8d6_MP311Q4Aw