Февраль 10, 2020 Запись была обновлена
Валидация сайта или правильный HTML
Сегодняшнюю статью я хочу посвятить валидации сайта (то есть HTML). Сперва определим что означает этот термин! Валидация сайта — это проверка синтаксических ошибок, проверка вложенности тэгов и другие критерии. Как правило, валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой. Если вы не знали для чего она, теперь будете знать! 🙂 Но для чего, собственно, нужна эта самая валидация и на что она влияет?
Что такое валидация сайта?
Как я уже говорил выше, валидация — это соответствие HTML-кода определенным правилам и стандартам. На смену XHTML пришла технология HTML5, которая значительно облегчила жизнь разработчикам. Дело в том, что в версии XHTML синтаксис был очень строгим. Если в HTML5 вы можете писать тэг переноса <br> как без наклонной черты, так в таком виде <br />, то в XHTML будет верным только последний вариант. HTML5 не так строг, да и к тому же появилось множество полезных тегов, но не об этом сейчас 🙂 .
На что влияет валидация сайта?
А сейчас ответим на второй вопрос.
Валидация сайта позволяет следить за правильным отображением сайта в разных браузерах. Например, если не закрыть тэг или где-то сделать опечатку в коде, в дальнейшем одна и та же страница может отображаться в разных браузерах по-разному. Также стили для сайта (CSS) могут отображаться не так как вы этого ожидали. Поэтому необходимо внимательно следить за этим.
Также я не мог не сказать что валидация влияет на поисковые системы: поисковые системы отдают предпочтение сайтам с валидным HTML-кодом. Имейте это в виду!
Ну что, я вас убедил в том, что валидация сайта действительно необходима? Тогда с теорией закончили и переходим к практике!
Как узнать, почему позиции сайта не растут?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
Способы проверки валидации
О каждом из способов я написал подробные инструкции в виде текста, а также, если кому-то лень читать и вникать, снял видео 😉 .
1 способ. Сервис validator.w3.org
Суть первого способа состоит в использовании сервиса для проверки валидности сайта. Как проверить валидность сайта с помощью сервиса validator.w3.org:
1. Переходим по адресу: validator.w3.org. Перед нами откроется страница, на которой есть 3 вкладки. На первой вкладке «Validate by URI» вы можете проверить валидность сайта размещенного в интернет, на второй «Validate by File Upload» — загрузить файл с компьютера, и на третьей «Validate by Direct Input» — вставить содержимое файла непосредственно в форму для ввода. Я буду рассказывать о первом варианте, то есть когда сайт размещен в интернет (думаю и с другими способами у вас проблем не возникнет). Поэтому выбираем первую вкладку как на изображении ниже:
2. Далее нажимаем на кнопку «More options» и здесь необходимо выставить следующие значения:
- Character Encoding — кодировку вашего сайта. НО! Если она уже есть между тегами <head> (у себя на сайте в браузере нажимаете на сочетание клавиш CTRL+U, и ищете в начале документа примерно такую строку
), то здесь оставляем выбранным (detect automatically).
1
<meta charset="UTF-8" />
- Document Type — тип текущего документа. Он указывается первой строкой в HTML (когда находитесь на своем сайте, в браузере нажимаете сочетание клавиш CTRL+U, и смотрите самую первую строчку
). Если же в первой строчке присутствует что-то похожее, тогда и здесь оставляйте значение (detect automatically).
1
<!DOCTYPE html>
Если у вас что-то из того, что я описал выше нету, тогда вам самостоятельно необходимо будет выставить эти значения. Я здесь ничего не менял и оставил всё как есть.
3. Затем в поле «Address» вводим адрес вашего сайта как сделал я:
После чего нажимаем на кнопку «Check», которая расположена по середине серого блока:
4. Далее идет валидация вашего сайта и через некоторое время появится результат валидации. Будет похожая страница с сообщением «This document was successfully checked as HTML5!» (что значит что ваш сайт успешно прошел проверку на валидность определенному типу документа, то есть в моем случае HTML5):
Если у вас надпись на красном фоне — это значит что у вас присутствуют ошибки в вашем HTML-документе. Их необходимо исправить. Для этого просто выделяете название ошибки (в видео я всё это показываю как делать) и вставляете ее, например, в Google. Далее просто читаете как с этой ошибкой боролись другие веб-мастера и исправляете ее следуя этим советам. Также у вас есть другой выход — поручить это дело знающему человеку, который разбирается в коде, и пусть он это сделает за вас.
Для тех, кто не понял или поленился почитать — смотрите видео ниже 🙂
Как узнать технические ошибки сайта?
Закажите полный разбор сайта по SEO + консультацию
Сделайте аудит своего сайта самостоятельно с помощью сервиса
2 способ. Плагины для браузеров
1. Плагин для браузера Mozilla Firefox — Перейти
Переходите по ссылке выше, выбираете версию браузера Firefox и нажимаете на кнопку «Download». Затем выбираете необходимую операционную систему и устанавливаете как обычное дополнение. (те, кто не понял, смотрите видео 🙂 )
2. Плагин для браузера Google Chrome — Перейти
Здесь вам необходимо нажать на кнопку «Бесплатно» и затем во всплывающем окошке нажать «Добавить».
3. Плагин для браузера Opera — Перейти
Здесь также происходит обычная установка дополнения.
4. Плагин для браузера Safari — Перейти
Установка:
- Распакуйте архив с плагином.
- Скопируйте файл «Safari Validator.webplugin» в папку, где установлен браузер, затем /Library/Internet Plug-Ins (создайте папку, если она отсутствует)
- Сделайте двойной клик на файле Safari Validator.safariextz.
- Перезапустить браузер Safari.
Как установить плагин в Firefox и как пользоваться им я рассказываю во втором видео:
Вывод
Вот и вся статья. Надеюсь видеоматериалы, а также текстовая информация, которую я здесь представил поможет вам улучшить ваш сайт и сделать его еще более «привлекательным» для поисковых систем 🙂 , ведь мы все так к этому стремимся. Если возникают вопросы и сложности на каком-либо этапе — пишите в комментариях, будем вместе разбираться! Тот, кто дочитал до конца статью и проделал всё, о чем я писал — уже улучшил свой сайт и результат не заставит себя ждать. 🙂
Успехов!
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Надо будет заняться исправлением ошибок, которые, если верить онлайн-сервису, у меня на сайте имеются. Спасибо за информацию!
Конечно верить! Ведь W3C — это организация, разрабатывающая технологические стандарты для Всемирной паутины. 🙂
Надо будет проверить, подозреваю и у меня ошибки есть =))
Здравствуйте, Юрий!
У меня с самого начала валидатор выдает 2 ошибки: Линия 1, колонка 10 : разделитель «>» недействительным: только имя, «# IMPLIED» и сепараторы параметров разрешено
✉
Ошибка Линия 1, колонка 10 : не может продолжаться из-за предыдущих ошибок
Фрилансер говорит, что это ошибки в теме и исправлять их нельзя.
Я попробовал самостоятельно , поменял на , очистил кэш, но результат тот-же (видит ). Хотя у Вас смотрю ошибки не выдает. Не хотелось бы менять тему, может как-то еще можно исправить?
С уважением, Александр. ❓
Здравствуйте, Александр!
Вы имеете в виду сайт http://muzrestor.ru ? Если его, тогда у вас там 5 ошибок и 5 предупреждений (но одно предупреждение будет всегда, потому что валидатор для HTML5 работает в тестовом режиме).
Напишите мне на email: nemetsyuriy@gmail.com и мы попробуем решить все ваши ошибки 🙂 .
Ок! Только после 23:00 (работа).
Чистый валидный код я видел всего на паре блогов, видимо владельцы следят за чистотой.
Денис, дело в том, что сайт работает и с невалидным кодом, поэтому многие на это не обращают внимание.
Ну это если ошибки не критичные, а то может и разъехаться из за незакрытых дивов, да и сама цмс бывает ошибки вставляет в код, думаю не стоит зацикливаться на валидности.
Кстати смотрю новый дизайн на блоге, мои поздравления красивый шаблон.
Спасибо большое, Денис! 🙂
Стоит поиск от Яндекс и он делает код не валидным. Подскажите, что можно придумать.
Скажите что за сайт, я посмотрю. Нужно видеть ошибку, чтобы исправить ее.
Дмитрий, у вас совсем мелочи: нужно убрать атрибут
type="text/css"у тега <style> в двух местах. Найдите его через поиск и просто удалите этот атрибут. В итоге должен остаться только один тег: <style> 🙂Юрий, спасибо за подсказку, но все равно не помогло. Пришлось целиком вырезать оттуда .
Теперь все отлично — This document was successfully checked as HTML5!
Рад за вас 🙂 !
Очень классный дизайн сайта. Себе такой был бы не против иметь. Юрий, сколько будет стоить заказать у Вас такой шаблон.?
Спасибо, Владимир. Вы можете ознакомиться с другими моими работами, а также заполнить форму на создание дизайна ЗДЕСЬ. Смотрите блок, который называется «Дизайн сайта».
Добрый день!
Проверил свой блог на валидность и ужаснулся!
48 Errors, 10 warning(s)
Посмотрел в яндексе первую ошибку и … ничего не понял)))
Посмотрите пожалуйста, как мне быть и возможно ли эти ошибки исправить?
Здравствуйте, Вячеслав! Вам совет или консультацию?
Юрий! Можно сначала начать с консультации? 🙁
точнее с совета!
Мой Вам совет: ошибки лучше искать в Google на иностранных сайтах, потому что там материала больше. И внимательно читайте как другие исправили ошибку.
Хорошо! Спасибо, воспользуюсь советом. Если ничего не выгорит, то пожалуй вернусь к вам за помощью)
Юрий, добрый день!
Перестала работать страница: ССЫЛКИ ЗАПРЕЩЕНЫ Выдает «Ошибка На сайте произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже.»
Если посмотреть на главную страницу: ССЫЛКИ ЗАПРЕЩЕНЫ белый фон и весь текст сбился. Такая же ситуация:ССЫЛКИ ЗАПРЕЩЕНЫ
Как устранить? Помогите!
Здравствуйте, Максим!
Возможно ошибка в php. Вставьте в начало php кода вот эти строки сразу после <?php:
error_reporting(E_ALL);
ini_set(‘display_errors’, 1);
Тогда Вы увидите все ошибки и поймете почему у Вас белый фон.
При таких результатах я бы постеснялся пытаться учить людей.
http://validator.w3.org/check?uri=http%3A%2F%2Fsitehere.ru%2Fvalidaciya-sajta-ili-pravilnyj-html&charset=%28detect+automatically%29&doctype=Inline&group=0
Только по этой странице:
Result: 87 Errors, 192 warning(s)
😛
Спасибо за подсказку, Павел! Исправил 🙂 . Такое бывает когда меняешь дизайн сайта: за всем один не уследишь 😉 .
Я впечетлен! Браво, Юрий, быстро и качественно!
Может, мой сайт глянете, если время будет.
http://validator.w3.org/check?uri=http%3A%2F%2Fkpa-ing.ru&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices
Сразу говорю, что бОльшая часть ошибок выдается невалидными атрибутами тегов в меню. От этого я отказаться пока не готов, поскольку КМС писал сам и они мне нужны. Что касается остального, интересно Ваше мнение.
Да, Вы правы, в основном ошибка из-за атрибута datafile. Но так ли он необходим?
Все остальные ошибки разные, но исправить их также несложно.
Да, ну, не то, что необходим, но крайне желателен. По нему у меня определяются новые/свежеизмененные файлы и к ним добавляется соответствующий стиль. Вообще, принцип моей КМС в том, что сайтом управлять особо не нужно. Просто заливаю статичные страницы в определенную папку, а остальное создается само — динамический контент, пункт меню, стили… Поэтому менять пока ничего не хочется.
Но остается не понятным, почему же пользовательские атрибуты по-прежнему считаются не валидными, хотя ими многие пользуются? Вопрос риторический.
Здравствуйте Юрий!
У меня не получается исправить мои ошибки и их становиться все больше и больше. Вы не могли бы мне помочь? Если да, то напишите мне на эл.почту ваши условия.
Написал Вам на email.
У меня после правки ошибок осталась одна и одно предупреждение, не могу понять как исправить:
Warning: Article lacks heading. Consider using
h2—h6elements to add identifying headings to all articles.From line 364, column 11; to line 364, column 34
<article class="slider">↩ ↩Error: Stray start tag
div.From line 1800, column 1; to line 1800, column 19
латы -->↩↩<div class="Icons">↩Здравствуйте, Марина.
По поводу предупреждения: тег <article> — это HTML5 тег. Поэтому внутри него на первом же уровне должен быть один из заголовков от h2 до h6.
По поводу ошибки: видимо где-то остался "бездомный" закрывающий тег </div>. Его необходимо просто удалить.
Удалила </div>, появились три новые ошибки.
Проблема в открывающем <div class="Icons">
По предупреждению даже не представляю как это сделать.
Валидация — она такая 🙂 .
Прошу посмотреть сайт школы. Насколько они критичны? Сколько будет стоить исправление ошибок?
Сергей, здравствуйте. Напишите мне с помощью формы обратной связи на этой странице — Задать вопрос.
Здравствуйте!
Попыталась установить валидатор в браузер Мозила перейдя по ссылке. Загрузка прошла. Но при установке выдалось сообщение "дополнение загруженное с этого сайта не может быть установлено т.к. оно по-видимому повреждено". Подскажите как исправить эту ошибку и установить дополнение
А есть смысл проверять php страницы на валидность html?
Вам нужно проверять именно HTML, потому что PHP на сервере компилируется в HTML.
Здравствуйте, Юрий,
Вопрос 1: почему сайт, созданный в sites.google.com/site/, не проходит валидацию? Validator.w3.org выдает ошибки при автоматическом подборе Encoding и Doctype.
Вопрос 2: можно ли индексировать сайт, который не проходит валидацию?
спасибо.
—
с уважением,
Здравствуйте!
1) Любую ошибку, как я писал в статье, можно найти в интернете, проще всего найти на английских сайтах.
2) Индексироваться сайт будет.
Огромное спасибо за статью, наконец-то смогу проверить свой сайт, а то давно не знал как это сделать! Респект вам
Валидатор W3 не воспринимает встроенный php в код html. Высвечивается ошибка, что начало кода <?php есть часть синтаксиса xml. Как обойти эту проблему
Ошибка : нет пробела между атрибутами.
В строке 12 , столбце 16
/*!↩ * Fo
Ошибка : укажите «в названии атрибута кавычки. Возможная причина: подходящая цитата где-то ранее отсутствовала.
В строке 12 , столбце 19
tyle media=»all»>/*!↩ * Font
и как понимать это? он видит название атрибута как атрибут и тут же пише в следующей ошибке совсем другое. Как исправить ошибку которой нет?
Здравствуйте, Юрий!
Скажите, пожалуйста, ошибки кода сайта, которые выделены желтым цветом и снабжены подсказкой «Из строки и к строке» о чем это говорит?
Г, на которыхде находятся эти строки и столбцы?
Нажав на ctrl+u получаю код но там не могу найти эти цифры.
Скажите, пожалуйста, где эти строки и столбцы, на которых указаны эти цифры?
Спасибо
Из строки 39 , столбец 1 ; к строке 39 , столбцу 40
«↩ ## <!—↩/
Фрагмент кода, между решетками, выделен, закрашен в желтый цвет.
Из строки 39 , столбец 1 ; к строке 39 , столбцу 40
«↩<!—↩/