Блог Тимура Казанского

Вся важность валидации HTML и CSS


Так ли важно проверять HTML и CSS код на валидность? И что будет если этого не делать? Что именно проверяет валидатор и кто это делает? И как это сделать? Давайте разбираться. Как я уже писал в предыдущей статье (для чего нужен DOCTYPE в HTML?) браузеры часто отображают содержимое сайта по-разному, так как им неизвестно с какой версией языка им приходится работать. После указания в заголовке страницы элемента DOCTYPE, ситуация меняется, но при условии если версия языка HTML указанная в DOCTYPE является корректной, иначе говоря соответствует всем правилам и стандартам указанной версии. Даже самые профессиональные гуру веб-разработки допускают ошибки при написании сайта, не закрыл тег или пропустил элемент, опечатался, и так далее. В следствии чего один браузер закрыл глаза на мелкую ошибку, а другой обязательно выявил эту ошибку, в итоге содержимое сайта будет отображаться совсем не так, как полагалось. И так, давайте отметим первую важность проверки кода на валидность – это:

  • 1. Валидный код обеспечивает отображение содержимого сайта во всех браузерах максимально одинаково.

С этим мы разобрались, ну и что, скажете вы, можно проверить отображение сайта в самых популярных браузерах и если все нормально, то и не думать об этом. Чем тратить время на проверку всего кода и последующего его исправления, лучше заняться вещами поважнее, например продвижением сайта. Хорошо, но и тут проблема. Суть в том, что поисковые машины, которые индексируют ваш сайт и тем самым добавляют его в поисковик – это всего лишь программы, а программа естественно имеет какой-то алгоритм работы, и когда поисковой робот зайдет на ваш сайт и попытается проиндексировать его, у него могут возникнуть определенные трудности в этом, тем самым ваша страничка или сайт может индексироваться неправильно, с ошибками или не полностью (особенно если сайт имеет табличную разметку). Все зависит от того, насколько неграмотно написан ваш сайт и как поисковой робот истолкует информацию на нем. Давайте отметим вторую важность проверки кода на валидность:

  • 2. Валидный HTML и CSS обеспечивает поисковому роботу быстрое и легкое чтение кода на сайте.

Конечно это не придаст приоритет вашему сайту в рейтинге поиска, но быструю и качественную индексацию обеспечит точно.

Но что же именно проверяет валидатор?

Не будем забывать о том факте, что валидатор – это программа, которая сначала определяет тип документа, версию кода по доктайпу (doctype), а затем и соответствие данного кода стандарту указанной версии. Также проверяет правильную вложенность элементов, т.е. строчные элементы должны находиться в блочных элементах (если не помните, почитайте - Урок 5. Блочные и строчные элементы в HTML), название тегов, своевременное закрытие их, всевозможные опечатки и ошибки. Но кто эту проверку осуществляет, спросите вы? Именно та компания, которая и создала все эти стандарты, а именно Консорциум всемирной паутины (от англ. World Wide Web Consortium), сокр. W3C.

А теперь рассмотрим, как проверить сайт на валидность. Существуют бесплатные онлайн сервисы, на которых вы можете указать адрес (url) вашего сайта или отдельной странички, а затем произвести его проверку, также есть вариант проверки кода при загрузке файла, ручной ввод (или копирование). С вводом адреса сайта и загрузке отдельного файла(HTML или CSS т.е. если статический сайт) я думаю понятно, но что делать, если код HTML смешан с другим кодом, например PHP (динамический сайт) и одна страница разбита на несколько (с функциями и прочим)? Для этого воспользуемся вкладкой «ручной ввод», а чтобы скопировать код вашего сайта, нужно сделать следующее: откройте в браузере сайт или страницу, которую вы хотите проверить, нажмите правой кнопкой мыши в окне браузера, (либо воспользуйтесь сочетанием клавиш «Ctrl+U») и выберите пункт в открывшемся окне «Просмотре кода элемента» (браузер Chrome), «Исходный код страницы» (браузер Mozilla firefox) или «Просмотр HTML кода» (браузер Internet Explorer).

Просмотр кода сайта в браузере

Далее сочетанием клавиш «CTRL+A» или нажатием правой кнопкой мыши в окне браузера выбираем пункт «Копировать» и копируем весь код.

Копируем код сайта

Далее вставляем код в онлайн сервис валидации сочетанием клавиш «Ctrl+V», либо щелкаем правой кнопкой мыши и выбираем пункт «вставить» и проверяем его.

Вставляем код сайта в онлайн сервис

А теперь, давайте разберем каждый из сервисов:

Онлайн сервис валидации W3C

Вводим адрес сайта и нажимаем кнопку «Check»:

Успешная проверка на валидность

Если все хорошо и ваш HTML код полностью соответствует стандарту, то появится зеленая полоска с надписью об успешной проверке, если нет, то красная с указанием ошибок и их количества.

Здесь все аналогично с предыдущим примером, за исключением того, что проверяем на валидность уже CSS код.

Данный сервис полноcтью на русском языке и еще одна особенность данного сервиса заключается в одновременной проверке CSS кода и HTML. Вкладки для ввода адреса сайта, загрузки файла и ввода кода вручную аналогична первому примеру.

Еще один валидатор для проверки кода на HTML5.

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

Категория: Все для создания сайтов

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0