Урок 113. Validator.w3.org | Проверка HTML кода на валидность

Урок 113. Validator.w3.org | Проверка HTML кода на валидность

Всем-всем привет!

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

Одним из таких сервисов является валидатор validator.w3.org, он же, наверное, и самый лучший. Он полностью на английском, поэтому у некоторых могут возникнуть проблемы при работе, но Вы не пугайтесь: валидатор покажет Вам и номер строки, и саму ошибку.

Валидный код — это код, соответствующий всем стандартам.

Для урока Вам понадобиться следующий материал:

  1. Основы HTML;
  2. Основы CSS;
  3. Работа в текстовом редакторе Notepad++.

Погнали!

Проверка HTML кода на валидность

Вышеупомянутый онлайн-сервис проверки валидности кода анализирует весь сайт целиком. Вам нужно просто указать домен своего сайта и нажать кнопку «Check», так Вы запустите проверку HTML-кода сайта.Проверить валидность html

Также валидатор предоставляет одну очень интересную возможность — проверка файлов сайта с локального компьютера. На мой взгляд, этот инструмент пригодится тем, кто делает сайты на заказ. Перед сдачей заказа нужно все перепроверить, ведь хочется, чтобы твоей работой были всегда были довольны. Проверить файлы можно перейдя на вкладку «Validate by File Upload»:Проверка HTML кода на валидность

Как исправить ошибки в HTML-коде?

Сервис Validator W3c указал мне на две ошибки и сделал 8 предупреждений. Попробую их исправить и за одно покажу Вам как это делается.Валидность кода HTML

Исправляем ошибку «Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)». Эта ошибка говорит мне о том, что в HTML-коде, а именно в теге <div> прописывать стили не нужно. Следовательно, стили, которые прописаны в блоке <div> нужно перенести в файл style.css и все.

Валидатор также указывает, где именно находиться ошибка:Проверить валидность HTML

Далее я проделываю следующее:

  1. Копирую выделенную желтым цветом кусочек кода в валидаторе W3c;
  2. Открываю исходный код страницы в браузере. Сделать это можно щелкнув правой кнопкой мыши на странице сайта и выбрав пункт «Посмотреть исходный текст» (для браузера Opera):Валидность кодаИсходный код откроется в новой вкладке.
  3. Выполняю поиск по странице (CTRL+F) и вставляю в поисковую строку, скопированный в валидаторе, кусочек кода:Проверить сайт на валидностьВот и показались те самые стили в блоке <div>. Теперь мы знаем, где примерно находится ошибка и к какому элементу относиться (в моем случае, это форма подписки), значит можно переходить в Notepad++;
  4. В текстовом редакторе Notepad++ я открываю файл с ошибкой и с помощью все того же поиска нахожу ошибку:Валидность HTML
  5. Далее просто копирую эти стили и вставляю в файл style.css:Проверить CSS на валидность
  6. Из файла index.html стили я удаляю и оставляю только самый необходимый HTML-код.
  7. Конечно же, отправляю файлы index.html и style.css на сервер, чтобы изменения вступили в силу.

Подобным образом я поступаю и с другими ошибками и предупреждениями.

Проверка CSS кода на валидность

В валидаторе W3c также можно проверить CSS-код на валидность. Сделать это можно по этой ссылке. Принцип работы все тот же: указываете URL-сайта, либо выбираете файл на компьютере и нажимаете на кнопку «Проверить».

В отличии от того же валидатора HTML, валидатор CSS на русском.

Проверить CSS на валидность

Ошибки и предупреждения CSS

При проверке CSS кода на валидность, сервис выдает большое количество ошибок и предупреждений. У меня набралось 23 ошибки и аж 281 предупреждение. На первый взгляд может показаться, что это очень много и может даже напугать, однако большинство из указанных ошибок и предупреждений показываются только из-за того, что сервис не знает определенных свойств, которые применяются для разных браузеров.

В моем случае, большинство предупреждений из 281 — это CSS-свойства для нормального отображения в различных браузерах:

Проверить валидность

Сервис позиционирует подобные теги, как «неизвестное расширение поставщика». Поэтому если при проверке своих CSS-файлов, Вы видите большое количество таких ошибок, то не пугайтесь. Все нормально.

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

Если Вы не можете устранить какую-то ошибку, то делитесь проблемой в комментариях к уроку, быть может найдем решение вместе.

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

Ну а сейчас, до свидания!

Пост опубликован: 21/04/2017


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *