Лого www.SiteHere.ru

Валидация сайта или правильный HTML

Сегодняшнюю статью я хочу посвятить валидации сайта (то есть HTML). Сперва определим что означает этот термин! Валидация сайта — это проверка синтаксических ошибок, проверка вложенности тэгов и другие критерии. Как правило, валидаторы (сервисы для проверки сайтов на наличие ошибок в структуре документа) проверяют HTML-код на соответствие определенному стандарту, который указан в самом начале любой HTML-страницы первой строчкой. Если вы не знали для чего она, теперь будете знать! 🙂 Но для чего, собственно, нужна эта самая валидация и на что она влияет?

«Что такое валидация сайта?»

Как я уже говорил выше, валидация — это соответствие HTML-кода определенным правилам и стандартам. На смену XHTML пришла технология HTML5, которая значительно облегчила жизнь разработчикам. Дело в том, что в версии XHTML синтаксис был очень строгим. Если в HTML5 вы можете писать тэг переноса <br> как без наклонной черты, так в таком виде <br />, то в XHTML будет верным только последний вариант. HTML5 не так строг, да и к тому же появилось множество полезных тегов, но не об этом сейчас 🙂 .

«На что влияет валидация сайта?»

А сейчас ответим на второй вопрос.

Валидация сайта позволяет следить за правильным отображением сайта в разных браузерах. Например, если не закрыть тэг или где-то сделать опечатку в коде, в дальнейшем одна и та же страница может отображаться в разных браузерах по-разному. Также стили для сайта (CSS) могут отображаться не так как вы этого ожидали. Поэтому необходимо внимательно следить за этим.

Также я не мог не сказать что валидация влияет на поисковые системы: поисковые системы отдают предпочтение сайтам с валидным HTML-кодом. Имейте это в виду!

Ну что, я вас убедил в том, что валидация сайта действительно необходима? Тогда с теорией закончили и переходим к практике!

Способы проверки валидации

О каждом из способов я написал подробные инструкции в виде текста, а также, если кому-то лень читать и вникать, снял видео 😉 .

1 способ. Сервис validator.w3.org

Суть первого способа состоит в использовании сервиса для проверки валидности сайта. Как проверить валидность сайта с помощью сервиса validator.w3.org:

1. Переходим по адресу: validator.w3.org. Перед нами откроется страница, на которой есть 3 вкладки. На первой вкладке «Validate by URI» вы можете проверить валидность сайта размещенного в интернет, на второй «Validate by File Upload» — загрузить файл с компьютера, и на третьей «Validate by Direct Input» — вставить содержимое файла непосредственно в форму для ввода. Я буду рассказывать о первом варианте, то есть когда сайт размещен в интернет (думаю и с другими способами у вас проблем не возникнет). Поэтому выбираем первую вкладку как на изображении ниже:

Вкладка "Validate by URI"

2. Далее нажимаем на кнопку «More options» и здесь необходимо выставить следующие значения:

Кнопка "More options"
  • Character Encoding — кодировку вашего сайта. НО! Если она уже есть между тегами <head> (у себя на сайте в браузере нажимаете на сочетание клавиш CTRL+U, и ищете в начале документа примерно такую строку
    1
    
    <meta charset="UTF-8" />

    ), то здесь оставляем выбранным (detect automatically).

  • Document Type — тип текущего документа. Он указывается первой строкой в HTML (когда находитесь на своем сайте, в браузере нажимаете сочетание клавиш CTRL+U, и смотрите самую первую строчку
    1
    
    <!DOCTYPE html>

    ). Если же в первой строчке присутствует что-то похожее, тогда и здесь оставляйте значение (detect automatically).

Если у вас что-то из того, что я описал выше нету, тогда вам самостоятельно необходимо будет выставить эти значения. Я здесь ничего не менял и оставил всё как есть.

3. Затем в поле «Address» вводим адрес вашего сайта как сделал я:

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

После чего нажимаем на кнопку «Check», которая расположена по середине серого блока:

Нажимаем кнопку Check

4. Далее идет валидация вашего сайта и через некоторое время появится результат валидации. Будет похожая страница с сообщением «This document was successfully checked as HTML5!» (что значит что ваш сайт успешно прошел проверку на валидность определенному типу документа, то есть в моем случае HTML5):

Результат валидации

Если у вас надпись на красном фоне — это значит что у вас присутствуют ошибки в вашем HTML-документе. Их необходимо исправить. Для этого просто выделяете название ошибки (в видео я всё это показываю как делать) и вставляете ее, например, в Google. Далее просто читаете как с этой ошибкой боролись другие веб-мастера и исправляете ее следуя этим советам. Также у вас есть другой выход — поручить это дело знающему человеку, который разбирается в коде, и пусть он это сделает за вас.

Для тех, кто не понял или поленился почитать — смотрите видео ниже 🙂

2 способ. Плагины для браузеров

1. Плагин для браузера Mozilla Firefox — Перейти

Переходите по ссылке выше, выбираете версию браузера Firefox и нажимаете на кнопку «Download». Затем выбираете необходимую операционную систему и устанавливаете как обычное дополнение. (те, кто не понял, смотрите видео 🙂 )

2. Плагин для браузера Google Chrome — Перейти

Здесь вам необходимо нажать на кнопку «Бесплатно» и затем во всплывающем окошке нажать «Добавить».

3. Плагин для браузера Opera — Перейти

Здесь также происходит обычная установка дополнения.

4. Плагин для браузера Safari — Перейти

Установка:

  1. Распакуйте архив с плагином.
  2. Скопируйте файл «Safari Validator.webplugin» в папку, где установлен браузер, затем /Library/Internet Plug-Ins (создайте папку, если она отсутствует)
  3. Сделайте двойной клик на файле Safari Validator.safariextz.
  4. Перезапустить браузер Safari.

Как установить плагин в Firefox и как пользоваться им я рассказываю во втором видео:

Вывод

Вот и вся статья. Надеюсь видеоматериалы, а также текстовая информация, которую я здесь представил поможет вам улучшить ваш сайт и сделать его еще более «привлекательным» для поисковых систем 🙂 , ведь мы все так к этому стремимся. Если возникают вопросы и сложности на каком-либо этапе — пишите в комментариях, будем вместе разбираться! Тот, кто дочитал до конца статью и проделал всё, о чем я писал — уже улучшил свой сайт и результат не заставит себя ждать. 🙂

Успехов!

С Уважением, Юрий Немец

Валидация сайта или правильный HTML 4.50/5 (90.00%) 10 голос(ов)

Понравилась статья - расскажи друзьям! :)

39 комментариев к записи
  • Владимир

    Надо будет заняться исправлением ошибок, которые, если верить онлайн-сервису, у меня на сайте имеются. Спасибо за информацию!

     
    • Юрий

      Конечно верить! Ведь W3C — это организация, разрабатывающая технологические стандарты для Всемирной паутины. 🙂

       
  • Александр Череп

    Надо будет проверить, подозреваю и у меня ошибки есть =))

     
  • Александр

    Здравствуйте, Юрий!
    У меня с самого начала валидатор выдает 2 ошибки: Линия 1, колонка 10 : разделитель «>» недействительным: только имя, «# IMPLIED» и сепараторы параметров разрешено


    Ошибка Линия 1, колонка 10 : не может продолжаться из-за предыдущих ошибок

    Фрилансер говорит, что это ошибки в теме и исправлять их нельзя.
    Я попробовал самостоятельно , поменял на , очистил кэш, но результат тот-же (видит ). Хотя у Вас смотрю ошибки не выдает. Не хотелось бы менять тему, может как-то еще можно исправить?
    С уважением, Александр. ❓

     
    • Юрий

      Здравствуйте, Александр!
      Вы имеете в виду сайт http://muzrestor.ru ? Если его, тогда у вас там 5 ошибок и 5 предупреждений (но одно предупреждение будет всегда, потому что валидатор для HTML5 работает в тестовом режиме).
      Напишите мне на email: nemetsyuriy@gmail.com и мы попробуем решить все ваши ошибки 🙂 .

       
      • Александр

        Ок! Только после 23:00 (работа).

         
  • Denis

    Чистый валидный код я видел всего на паре блогов, видимо владельцы следят за чистотой.

     
    • Юрий

      Денис, дело в том, что сайт работает и с невалидным кодом, поэтому многие на это не обращают внимание.

       
  • Denis

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

     
    • Юрий

      Спасибо большое, Денис! 🙂

       
  • Дмитрий

    Стоит поиск от Яндекс и он делает код не валидным. Подскажите, что можно придумать.

     
    • Юрий

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

       
      • Юрий

        Дмитрий, у вас совсем мелочи: нужно убрать атрибут type="text/css" у тега <style> в двух местах. Найдите его через поиск и просто удалите этот атрибут. В итоге должен остаться только один тег: <style> 🙂

         
        • Дмитрий

          Юрий, спасибо за подсказку, но все равно не помогло. Пришлось целиком вырезать оттуда .
          Теперь все отлично — This document was successfully checked as HTML5!

           
  • Владимир

    Очень классный дизайн сайта. Себе такой был бы не против иметь. Юрий, сколько будет стоить заказать у Вас такой шаблон.?

     
    • Юрий

      Спасибо, Владимир. Вы можете ознакомиться с другими моими работами, а также заполнить форму на создание дизайна ЗДЕСЬ. Смотрите блок, который называется «Дизайн сайта».

       
  • viachik

    Добрый день!
    Проверил свой блог на валидность и ужаснулся!
    48 Errors, 10 warning(s)
    Посмотрел в яндексе первую ошибку и … ничего не понял)))
    Посмотрите пожалуйста, как мне быть и возможно ли эти ошибки исправить?

     
    • Юрий

      Здравствуйте, Вячеслав! Вам совет или консультацию?

       
      • viachik

        Юрий! Можно сначала начать с консультации? 🙁

         
        • viachik

          точнее с совета!

           
          • Юрий

            Мой Вам совет: ошибки лучше искать в Google на иностранных сайтах, потому что там материала больше. И внимательно читайте как другие исправили ошибку.

             
            • viachik

              Хорошо! Спасибо, воспользуюсь советом. Если ничего не выгорит, то пожалуй вернусь к вам за помощью)

               
    • Максим

      Юрий, добрый день!

      Перестала работать страница: ССЫЛКИ ЗАПРЕЩЕНЫ Выдает «Ошибка На сайте произошла непредвиденная ошибка. Пожалуйста, повторите попытку позже.»
      Если посмотреть на главную страницу: ССЫЛКИ ЗАПРЕЩЕНЫ белый фон и весь текст сбился. Такая же ситуация:ССЫЛКИ ЗАПРЕЩЕНЫ
      Как устранить? Помогите!

       
      • Юрий

        Здравствуйте, Максим!
        Возможно ошибка в php. Вставьте в начало php кода вот эти строки сразу после <?php:
        error_reporting(E_ALL);
        ini_set(‘display_errors’, 1);

        Тогда Вы увидите все ошибки и поймете почему у Вас белый фон.

         
  • Павел

    При таких результатах я бы постеснялся пытаться учить людей.
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sitehere.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 h2h6 elements 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">

    По предупреждению даже не представляю как это сделать.

     
    • Юрий Немец

      Валидация — она такая 🙂 .

       
  • Сергей

    Прошу посмотреть сайт школы. Насколько они критичны? Сколько будет стоить исправление ошибок?

     
    • Юрий Немец

      Сергей, здравствуйте. Напишите мне с помощью формы обратной связи на этой странице — Задать вопрос.

       
  • Лариса

    Здравствуйте!

    Попыталась установить валидатор в браузер Мозила перейдя по ссылке. Загрузка прошла. Но при установке выдалось сообщение "дополнение загруженное с этого сайта не может быть установлено т.к. оно по-видимому повреждено". Подскажите как исправить эту ошибку и установить дополнение

     

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

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