Разбор ошибок валидации сайта
Наконец-то появилось свободное время между бесконечной чередой заказов, и я решил заняться своим блогом. Попробуем его улучшить в плане валидации. Ниже в статье я расскажу, что такое валидация сайта, кода html и css, зачем она нужна и как привести сайт к стандартам на конкретном примере.
Что такое валидация сайта?
Простыми словами – это проверка на соответствие стандартам. Чтобы любой браузер мог отображать ваш сайт корректно. Большое влияние валидность сайта на продвижение не оказывает, но хуже точно не будет.
Конкретный пример прохождения валидации для страницы сайта
Возьмем первую попавшуюся страницу на моем сайте — Кодирование и декодирование base64 на Java 8. Забьем адрес страницы в валидатор и смотрим результат:
Да уж, картина вырисовывается неприятная: больше сотни ошибок и 67 предупреждений – как вообще поисковики индексируют мой блог, и заходят люди? Но не будем огорчаться, а научимся проходить валидацию, справлять ошибки. Итак, первое предупреждение:
Это одно и тоже. А исправляется просто: в самом начале страницы добавить тег:
Проверяем ,что у нас получилось и видим, что одним этим тегом мы убрали 105 ошибок и 3 предупреждения! Теперь у нас осталось только 64 предупреждения. Начинаем разбирать их по одному.
Это значит, что для элемента style не нужен атрибут type – это лишнее. На странице у нас два таких замечания. Аналогичное предупреждение и по JavaScript:
Таких у нас 8 ошибок. Убираем данные атрибуты и ура – еще на 10 предупреждений меньше!
Следующая ошибка — первый аргумент у linear-gradient должен быть to top, а не top. Исправлем. Далее ошибка:
Здесь у меня неверно закомментировано css. Надо просто убрать эту строку. Или закомментировать по-другому /* и */. Я так сделал, как привык так комментировать на Java.
Теперь у нас идет ошибка импорта. Перенесем эти строчки в самое начало файла и она исчезнет.
Далее не нравится значение атрибута target, нам сообщают, что надо использовать «blank» без нижнего подчеркивания спереди. Убираем.
Теперь у нас идет div не на месте.
Следующая ошибка – лишний colspan у ячейки. В моем случае таблица состоит всего из одной ячейки, видимо, забыл убрать, когда менял дизайн. Теперь это и делаем.
А эта ошибка говорит о том, что нельзя вставлять style внутри div. Переносим в начало файла.
Тут нам подсказывают, что не стоит устанавливать ширину атрибутом, а лучше сделать это отдельным тегом. Меняем на style=»width:100%;».
У ячейки не должно быть имени – атрибута name. Тут в принципе можно убрать, id вполне хватит.
Убираем valign. Вместо него ставим style=»vertical-align:top».
А эта ошибка вообще непонятно как оказалась ) Это я коде к статье ошибся. Меняем на <
У изображений должен быть alt. Добавляем альты с описанием картинок.
Только ноль может быть без обозначений. Надо поставить что – это пиксели, или к примеру, проценты. Добавляем px после чисел.
Не нравятся комментарии. Да, в общем, их можно и убрать, не разбираясь, не особенно они и нужны.
Заблудившийся тег td. Убираем его.
Здесь валидатор не устраивает пустое значение атрибута action – должен быть адрес страницы какой-то. У нас обрабатывается данная форма js, так что без разницы, поставим action=”self”
Все! Смотрим результат:
Нет ошибок или предупреждений, страница полностью валидна.
Если вам что-то непонятно в статье или вы хотите, чтобы ваш сайт полностью соответствовал спецификации и стандартам HTML ,вы можете обратиться ко мне. Я проверю и устраню любые шибки валидации.
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
заметки, сайтостроение, html, валидация
How to remove the type attribute from script tags of an Html5 document?
From the beginning of december 17, W3C XHTML started to point out this error:
The type attribute is unnecessary for JavaScript resources.
The above warning is generated inside Joomla script itself to call modules or jQuery, CSS, etc. and is not written in any Joomla file. Probably is related the way Joomla call scripts in core files. This problem also appears in WordPress, but there is a workaround. In Joomla I removed all the modules, the warnings decrease, but still there. I tested with another template, updated Joomla version to 3.8.3 and no solution.
3 Answers 3
Joomla adds this attribute by default when a javascript is added but the type parameter is not specified. You can see this in the addScript function at libraries\src\Document\Document.php .
Whilst you could write a plugin to override this output, it seems a pointless endeavour. A warning is not the same as an error. In this case, the code is still valid, merely with some unnecessary bulk (this is because the HTML5 specification states that the default type value of <script> is already «text/javascript»).
I’d assume future versions of Joomla are likely to remove that tag as it serves no real purpose any more — users on non-HTML5 browsers are going to be practically none-existant.
Whilst you should always use a validator, fixing every error and warning can be a mistake. Review them, and make sure you understand them. Fix any potentially harmful ones (most errors will be, most warnings will not be), and make sure the others are justifiable. In this case, it would add code bulk to your site with no benefit to a user, and as such, fixing the warning would seem to be a mistake.
Зачем нужен валидный код и как устранить ошибки валидации
Валидация является одним из самых важных аспектов хорошего веб-дизайна. Давайте рассмотрим, что это такое и как проверить HTML код на валидность. В качестве примера возьмем самую распространенную систему управления контентом (CMS) — WordPress. После чего мы поделимся перечнем ошибок, с которыми столкнулись на практике и, самое главное, предложим свои, проверенные, методы по их устранению.
Зачем необходима проверка на валидность сайта
Проще говоря, проверка веб-страницы позволит определить, соответствует ли она стандартам, разработанным Консорциумом Всемирной паутины (W3C). Обычно это делается путем проверки отдельных страниц на валидность с помощью онлайн-сервиса проверки от W3C.
Подобно правилам грамматики на разных языках, есть также правила в программировании. Проверка позволяет увидеть, соответствует ли страница этим правилам, а в случае наличия ошибок и предупреждений будут предоставлены рекомендации по их устранению. Подробнее о необходимости такой проверки рассмотрим ниже.
На что влияет валидность сайта
Вы когда-нибудь задумывались о том, как браузеры “читают” веб-страницу? У них есть “двигатели” для анализа кода и преобразования его в визуальный вид для людей. К сожалению, у каждого браузера есть собственный механизм обработки кода, и это может привести к отображению ваших страниц по-разному.
Некорректная веб-страница может быть прочитана браузерами по-разному. Это приведет к тому, что ваши посетители, возможно, даже не смогут правильно увидеть контент страницы в своих браузерах. Валидация в дальнейшем позволит исправить почти все основные различия и делает вашу веб-страницу доступной для чтения почти всеми веб-браузерами (чаще всего исключением становится Internet Explorer старых версий). Отсюда и появился термин “кроссбраузерная верстка” — т.е. верстка, которая одинаково хороша (совместима) для всех популярных браузеров.
А как же это повлияет на SEO? Важно понимать, что роботы поисковых систем любят семантические веб-страницы. Семантическая верстка, согласно данным Википедии, – это подход к созданию веб-страниц на языке HTML, основанный на использовании HTML тегов в соответствии с их семантикой (предназначением). Кроме того, структурная семантическая веб-страница позволяет поисковым роботам более точно определять значимость, как отдельных элементов веб-страницы, так и всего текста в целом. По заверению Google, валидный код никак не влияет на ранжирование страниц. Но при этом наличие ошибок в коде способно негативно повлиять на сканирование микроразметки и адаптированностью под мобильные устройства.
Так что, если в SEO-аудите вы встретите рекомендации по устранению ошибок, выявленных в процессе валидации, то лучше их исправить, а как это сделать мы вам расскажем.
Инструменты проверки для вашего сайта
Понимая необходимость отсутствия ошибок валидации на страницах сайта, давайте рассмотрим, как осуществить поиск данных ошибок.
Существует множество бесплатных сервисов для проверки сайта, такие как Markup Validation Service W3C, Web Page Analyzer, Browsershots и другие.
Служба проверки HTML разметки W3C, вероятно, является самым простым и популярным инструментом для проверки валидности веб-страницы. Используя этот инструмент, вы можете обнаружить ошибки валидации, начиная от отсутствующих атрибутов ALT для ваших IMG-тегов и заканчивая размещением элементов блок-уровня внутри встроенных элементов (например, <p> внутри <span>).
Вы можете оценить HTML код, указав адрес своей веб-страницы, загрузив файл HTML или вставив HTML код напрямую.
Сервис проверит указанные вами данные на ошибки и сформирует отчет с их перечнем и рекомендациями по исправлению.
Условно ошибки и предупреждения можно разделить на два основных типа: шаблонные (связанные с выбранной темой и установленными плагинами) и ошибки, допущенные при оформлении уникального контента.
Проверяя веб-страницу в первый раз, не пугайтесь возможному большому количеству ошибок! Как правило, большинство из них многократно повторяются на анализируемой странице. А это значит, что если убрать ошибку в одном месте шаблона или страницы, то она исчезнет и во всех однотипных.
Откуда берутся ошибки
Огромное количество ошибок связано с используемой темой сайта, а также установленными плагинами. Большинство из нас устанавливает бесплатную тему и плагины, не задумываясь, что в них скрыто. Во многих темах при более глубоком изучении приходится сталкиваться с типичными ошибками.
Как исправить ошибки, и улучшить валидность сайта
Исправить выявленные ошибки можно двумя способами: обратиться к специалистам, заплатив N-ную сумму денег, либо исправить их самостоятельно. Рассмотрим последний вариант на реальных примерах и устраним все неточности, следуя подробным инструкциям.
Важно, резервное копирование.
Перед осуществлением каких-либо изменений в исходном коде сайта необходимо произвести резервное копирование файлов сайта и базы данных. А нужно это для того, чтобы в случае, если после проведенных манипуляций нормальная работа сайта будет нарушена, восстановить его.
Редактирование файлов шаблона темы.
Редактирование исходников можно осуществлять несколькими способами: редактирование файлов по FTP, через файловый менеджер хостинга либо через административную панель WordPress. Мы рекомендуем использовать последний вариант, т.к. он является самым быстрым и простым.
- Warning: The type attribute is unnecessary for JavaScript resources.
Предупреждение. Атрибут “type” элемента <script> не является обязательным для JavaScript ресурсов.
Warning: The type attribute for the style element is not needed and should be omitted.
Предупреждение. Атрибут “type” для элемента <style> не нужен и его следует опустить.
Для устранения данных двух предупреждений необходимо удалить атрибут ENGINE=”text/javascript” во всех тегах <script>, а также type=”text/css” во всех тегах <style>. В помощь нам приходит простая функция PHP preg_replace в паре с чудесной возможностью фильтрации данных в WordPress. Код выглядит так:
Вставить данный код необходимо в файл functions.php используемой темы. Для этого авторизуемся в административной панели WordPress, выбираем пункт меню “Внешний вид” -> “Редактор” и справа в списке файлов выбираем интересующий нас файл. Код вставляем в самом конце файла. Нажимаем кнопку “Обновить файл”.
Дополнительно удалим данный атрибут в некоторых файлах вашей WordPress-темы.
В меню “Внешний вид” -> “Редактор” выбираем интересующие нас файлы – index.php, header.php, footer.php. Поиск атрибута будем осуществлять с помощью горячих кнопок поиска Ctrl+F, введя в поисковой панели text/javascript. Выявив такую запись заменяем <script type=”text/javascript”> на <script>, т.е. удаляем непонравившийся атрибут type=”text/javascript” и не забываем нажать кнопку “Обновить файл”.
- Error: The center element is obsolete. Use CSS instead.
Ошибка. Тег <center> устарел. Используйте соответствующие CSS стили.
HTML 5 активно взаимодействует с CSS (язык описания внешнего вида документа, написанного с использованием HTML), поэтому запрет на многие теги и атрибуты, начатый в HTML 4 в пользу стилей, только усилился. Такого рода теги и атрибуты уже не поддерживаются некоторыми браузерами и должны исключаться из кода. Одним из таких тегов является тег <center>, а также атрибут “frameborder” тега <iframe>. При решении данных ошибок нам необходимо будет немного “поколдовать” над нашей Базой данных сайта.
Для этого необходимо зайти в панель управления вашего хостинга, перейти по ссылке в phpMyAdmin и авторизоваться.
Первым делом экспортируем всю базу данных в качестве резервной копии! Для этого нажимаем кнопку “Экспорт” в панели веб-интерфейса для администрирования. Далее выбираем закладку “SQL” для осуществления SQL запросов к базе данных, в нашем случае поиск и замена устаревших тегов и атрибутов. Прописываем следующие запросы:
Рассмотрим более подробно выше представленные SQL запросы.
Первой строчкой заменяем устаревший тег на контейнер <div> и сразу же задаем класс “ag_center”. Данный стилевой класс позволит нам выровнять содержимое контейнера по центру. Для этого заходим в админ панель WordPress, выбираем пункт меню “Внешний вид” -> “Редактор” -> файл style.css нашей темы. В конец файла добавляем следующие строки кода:
Второй строчкой SQL запроса заменяем закрывающийся тег </center> на закрывающийся </div>. А третьей — производим замену атрибут frameborder=”0” на класс “ag_border_zero” элемента <iframe>.
SQL запросы можно оптимизировать, сведя в один, однако проще для понимания и наглядности разбить задачу на несколько запросов, как мы это и сделали. Вам, конечно, могут попасться другие устаревшие теги, которые необходимо будет заменить на универсальный тег <div> и перенести прямое его назначение в стилевой файл.
Перечень тегов, которые более не поддерживаются и должны исключаться из кода:
- Error: The width attribute on the th element is obsolete. Use CSS instead.
Ошибка. Атрибут “width” элемента <th> устарел. Используйте соответствующие CSS стили.
Аналогично предыдущей ошибке, атрибут “width” элемента <th> также является устаревшим. Исправить данную ошибку можно двумя способами — заменить width=»10%» на style=»width:10%;». Либо, чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей. Т.е. в элемент <th> добавляем а в файл style.css нашей темы .width_ten_percent
В случае если данная ошибка несет массовый характер в статьях вашего проекта, воспользуемся поиском и заменой атрибута “width” в панели phpMyAdmin следующим SQL запросом:
После чего необходимо добавить стилевой класс width_ten_percent в файле style.css:
.width_ten_percent
Следует отметить, что при массовой замене устаревших атрибутов на стилевые классы в панеле phpMyAdmin, при наличии уже прописанного класса у элемента (например, <img />), может возникнуть другая ошибка — дублирование атрибута “class”. Подобная ситуация обстоит и с атрибутом “style” (например, <img style=»width: 300px» style=»height: 200px»>). Поэтому, нужно быть уверенным в отсутствии ранее указанного другого атрибута “class” / “style”, либо отказаться от редактирования БД SQL запросами в пользу ручной проверки и редактирования каждой отдельной статьи в редакторе админ панели WordPress.
Для примера, рассмотрим добавление дополнительного класса / свойства атрибута “style”, придерживаясь стилевых правил. Добавим дополнительный класс width_ten_percent к уже имеющемуся color_red (class=»color_red»), и получаем: width_ten_percent» (перечисляем имена классов через пробел). Добавим ширину в 10% к уже имеющемуся style=»color: red;», в итоге у нас должно получиться так: style=»color: red; width: 10%;» (стилевые свойства разделяются между собой точкой с запятой и пробелом).
Также хотелось бы отметить частое ошибочное использование атрибута “width” для элемента <tr>, атрибута “height” для элемента <td>.
Периодически проверяйте новый контент на наличие данных ошибок, и в случае необходимости повторите процедуру исправления.
| Устаревшие атрибуты | Элемент |
|---|---|
| charset, coords, shape, methods, name, rev, urn | <a> |
| nohref | <area> |
| alink, bgcolor, link, marginbottom, marginheight, marginleft, marginright, margintop, marginwidth, text, vlink | <body> |
| clear | <br> |
| name | <embed> |
| profile | <head> |
| version | <html> |
| longdesc | <iframe> |
| longdesc, lowsrc, name | <img> |
| usemap | <input> |
| charset, methods, rev, target, urn | <link> |
| scheme | <meta> |
| name | <option> |
| archive, classid, code, codebase, codetype, declare, standby | <object> |
| type, valuetype | <param> |
| event, for, language | <script> |
| datapagesize | <table> |
| abbr, axis | <td> и <th> |
- Error: Bad value 300px for attribute width on element img: Expected a digit but saw px instead.
Ошибка. Неприемлемое значение “300px” для ширины атрибута в элементе <img>: Ожидалась цифра, но вместо этого прочитал “px”.
Атрибуты элементов являются важной частью HTML разметки. Некоторые атрибуты элементов могут принимать практически любое значение, другие могут принимать только значения определенного типа, а третьи — принимать значение только из заранее определенного набора.
В контексте <img width=»300px» /> атрибутом “width” допускается принимать любое целое положительное число. Необходимо установить допустимое значение для правильной разметки, а именно 285, без указания единицы измерения (px).
Выявленные ошибки могут находиться не только в записях, настройках WordPress темы, но и в содержимом HTML кода виджетов сайдбара. В таких случаях для устранения ошибки заходим в меню “Внешний вид” -> “Виджеты” -> Сайдбар слева (справа/подвал) и в настройках виджета находим ошибочно указанный атрибут “width” удалив единицу измерения (px).
Дополнительно встречается ошибочное указание параметра атрибута “height” элемента <img>.
- Error: Dublicate ID id_name .
Использование имени стилевого идентификатора (id=“имя”) более одного раза на одной странице.
Стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, т.е. встречаться только один раз.
- Имя класса и идентификатора должны обязательно начинаться с латинского символа (A–Z, a–z).
Имя класса и идентификатор должен обязательно начинаться с латинского символа (A–Z, a–z). Может содержать цифры (0–9), символ дефиса (-) и подчеркивания (_), но не в начале слова. Использование русских букв в именах идентификатора недопустимо.
- Ошибочное использование тега noindex по синтаксису.
Тег noindex используется для исключения контента, который необходимо скрыть от поисковой системы Яндекс. Например, дубли элементов навигации. Однако многие используют его неверно:
<noindex>Текст или код, который нужно исключить из индексации</noindex>
Для того, чтобы сделать код с noindex валидным, рекомендуется использовать следующую конструкцию:
<!––noindex––>Текст или код, который нужно исключить из индексации<!––/noindex––>
- Error: No p element in scope but a p end tag seen.
Отсутствует открывающий или закрывающий тег.
В синтаксисе тегов обычно используются парные теги для обозначения начала и конца элемента. Закрывающий тег похож на открывающий, но содержит слэш (/) внутри угловых скобок и указывается сразу за открывающейся скобкой. Если вы открыли тег в HTML документе, его необходимо закрыть в соответствующем месте. В противном случае, это может вызвать проблемы с корректным отображением элемента в браузере.
- Error: Element p not allowed as child of element span in this context. (Suppressing further errors from this subtree.)
Блочные элементы внутри строчных.
Согласно спецификации блочный элемент запрещено вставлять внутрь строчного. Например, <span><p>Lorem ipsum…</p></span> не пройдёт валидацию, правильно вложить теги наоборот — <p><span>Lorem ipsum…</span></p>.
Наиболее часто используемыми блочными элементами являются:
Встроенные (строчные) элементы:
- Error: An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
Отсутствует атрибут “alt” у изображения.
Каждое изображение (даже если оно служит для дизайнерских целей) в документе HTML должно иметь атрибут “alt” с описанием содержания картинки. Данный атрибут индексируется поисковыми роботами и используется ими для определения содержимого обнаруженных картинок. А это, в свою очередь, важно как для улучшения релевантности веб-страниц, так и для привлечения на сайт дополнительного трафика из «поиска по картинкам».
Памятка для контент-менеджеров
Для наших контент-менеджеров мы подготовили памятку о том, как правильно оформить веб-страницу, используя валидный код. Делимся ею и с вами, пользуйтесь на здоровье:
Завершение
Результатом кропотливой работы над ошибками мы должны увидеть следующее: Проверка документа завершена. Каких-либо ошибок и предупреждений не выявлено (“Document checking completed. No errors or warnings to show.”).
Что вы думаете о важности валидации? С какими ошибками сталкивались Вы и как их решали? Добавьте к этой статье свои комментарии!
Ошибки валидации
Для более верной работы сайта (магазина, в данном случае), проверяем на наличие ошибок в коде с помощью валидатора https://validator.w3.org/.
Например в статьях на этом сайте есть целых 15 ошибок кода.
Посмотреть их можно здесь.
Я их не исправляю, так как у меня уже практически готов новый дизайн сайта, в котором ошибок не будет. На него я решил перейти, учитывая что сейчас не менее половины заходов на сайт с мобильных устройств, под которые я и переделываю этот проект.
Ошибки же, о которых пойдет речь ниже, касаются магазинов на JoomShopping, которыми я занимаюсь чаще и более основательно, чем сайтом rtr24.ru.
Ошибки валидации JoomShopping
У меня ошибки содержались в модулях «Обратный звонок» и в «Фильтре по магазину».
1. Ошибка The type attribute for the style element is not needed and should be omitted
Это устаревший код, сегодня достаточно писать
2. Ошибка The type attribute is unnecessary for JavaScript resources
Тоже устарел, Вместо него везде можно смело писать
3. Ошибка в «Обратном звонке»
Тут речь идет о том, на какой странице нужно оказаться после заказа обратного звонка. решаем, что на той же самой, откуда этот звонок заказывался.
Тогда в дефолтном шаблоне модуля ищем:
Конкретно нас интересует:
Вместо этого можно написать:
Теперь заказав звонок, клиент магазина останется на странице с тем же товаром (вдруг он его еще не рассмотрел?).
4. Ошибки в модуле фильтра товаров JoomShopping
\modules\mod_jshopping_unijax_filter\tmpl\default\
И с помощью «Найти-Заменить» в Notepad++ во всех файлах сразу меняем:
5. The itemprop attribute was specified, but the element is not a property of any item
В файле шаблона Joomla index.php
На этом месте, магазин который я сейчас разрабатываю, начал показывать 0 ошибок в валидаторе.