Валидация сайта


Сегодняшнюю статью я хочу посвятить валидации сайта (то есть 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» — вставить содержимое файла непосредственно в форму для ввода. Я буду рассказывать о первом варианте, то есть когда сайт размещен в интернет (думаю и с другими способами у вас проблем не возникнет). Поэтому выбираем первую вкладку как на изображении ниже:

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

  • Character Encoding — кодировку вашего сайта. НО! Если она уже есть между тегами <head> (у себя на сайте в браузере нажимаете на сочетание клавиш CTRL+U, и ищете в начале документа примерно такую строку

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

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

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

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


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

После чего нажимаем на кнопку «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 и как пользоваться им я рассказываю во втором видео:

Вывод

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

www.sitehere.ru

Валидация сайта. Так ли она важна?

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

Что это такое и почему она так важна?


Валидация сайта – проверка HTML-кода веб-ресурса на наличие ошибок и соответствие установленным стандартам.

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

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

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

Из чего состоит проверка валидации сайта

Этот процесс состоит в определении соответствия кода страниц веб-ресурса определенным требованиям:

  1. Отсутствие синтаксических ошибок. Их наличие может повлиять на корректное отображение его элементов.
  2. Правильность вложенности кода, закрытия тегов, их порядка. 
  3. «Грамотность» в написании тегов, атрибутов и других элементов кода.

Как проверить валидацию сайта

Несмотря на всю серьезность и важность, проверить валидацию сайта достаточно просто. 
Существует достаточно много предназначенных для этого сервисов. Одним из наиболее популярных является validator.w3.org. Он выполняет наиболее качественную проверку. Ему «доверяют» поисковые системы.

 

Валидация сайта

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

 

Валидация сайта
 

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

Далее Вам останется устранить ошибки по максимуму и повторно выполнить проверку. Добиться идеального результата в 0 ошибок практически невозможно. В интернете веб-ресурсов с таким показателем совсем немного.


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

 

seo-akademiya.com

Как проверить валидность кода сайта?

Для того, чтобы проверить код на предмет его структурированности и чистоты (валидности), следует воспользоваться одним из множества онлайн чекеров (валидаторов). На официальном сайте Консорциума Всемирной Паутины также можно проверить валидность кода сайта:

validator.w3.org на валидность HTML и jigsaw.w3.org/css-validator на валидность CSS.

Markup Validation Service

Сервис validator.w3.org дает возможность проверить валидность языка разметки гипертекста сайта одним из трех предложенных способов:

  1. Validate by URI — проверка валидности HTML по адресу веб-страницы;
  2. Validate by File Upload — проверка валидности HTML загруженного документа;
  3. Validate by Direct Input — проверка валидности фрагмента HTML-кода.

Для того, чтобы выбрать нужный способ проверки валидности кода, нужно всего лишь переключиться на соответствующую вкладку:

Вкладки

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

Результат валидности

Результат очень даже приличный, поскольку при проверке на валидность подавляющего большинства сайтов будут сотни, а иногда и тысячи ошибок.

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

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

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


Влияет ли валидность кода на поисковое продвижение?

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

  • поисковые системы в алгоритмах ранжирования при прочих равных условиях отдают предпочтение более качественным сайтам;
  • валидный код легко и быстро обрабатывается, и вероятность его неверного прочтения поисковыми ботами минимальна.

Несомненно, работать над ошибками в коде нужно, но и ошибки могут быть разные, не все могут привести к плохому ранжированию сайта, если у вас не +100500 и более ошибок, то это не повод для беспокойства! Исправьте те, которые вы (как хозяин своего сайта) считаете наиболее опасными. Это лично моё мнение и оно может не разделять мнение кого либо из читателей.

А вот что Google думает о валидности кода сайтов. Официальная позиция поисковика относительно влияния валидности кода на поисковую оптимизацию представлена в этом коротеньком видео.

babosik.ru

Как появился Консорциум Всемирной Паутины?


Валидность в общем смысле этого слова — соответствие нормам. В случае с Интернетом нормы и стандарты для верстки страниц и создания кода задает Всемирный консорциум W3C. Создатели этой организации стояли у истоков разработки первых версий HTML (Hyper Text Markup Language, или язык гипертекстовой разметки) и стали первооткрывателями всемирной паутины, которая постепенно обрела огромную популярность. Это открытие принадлежит сэру Тимоти Джону Бернерс-Ли совместно с Робертом Кайо. Бернес-Ли до сегодняшнего дня является главой W3C (World Wide Web Consortium, Консорциум Всемирной Паутины) и законодателем в этой сфере.

С помощью html-разметки стало возможным создавать web-страницы, а для их распознавания в привычный для пользователей вид, были созданы браузеры. W3C ввели ряд стандартов, которым должны соответствовать документы в сети, чтобы все браузеры их могли корректно распознавать. В течение всего времени развития интернета между создателями самых популярных браузеров велись войны за первенство. Некоторые из них даже пытались вводить свои новые стандарты, однако W3C благодаря своим разработкам смогли удержать роль законодателя в правилах создания кода. В версии Html 3 уже была включена поддержка CSS (Cascading Style Sheets, или каскадные таблицы стилей). Изначально стили, цвета и формы задавались непосредственно в коде html, но создание CSS значительно упростило эту задачу, разгрузило исходный код, а соответственно и время загрузки страниц. Последняя версия – это Html 5, которая все больше становится актуальна. Долгое время ее место занимал Html 4.01 (с 1999 года).

Эта историческая справка приведена для того, чтоб у вас было более целостное понимание темы сегодняшнего обзора – валидации сайтов. Если вы зайдете на официальный сайт W3C в раздел «Standards», вы увидите целый перечень подразделов со стандартами. Вот, к примеру, можно увидеть актуальный статус по Html:

валидация сайтов

По каждому из подпунктов приведены длинные списки норм, определяющих тот или иной атрибут, элемент текущей версии кода. Вот, например, неполное содержание по Html 5:

содержание по Html 5

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

Но перед тем как рассмотреть их работу, давайте разберемся насколько важно проводить данную операцию.

Должен ли сайт быть валидным?

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

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

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

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

pro-wordpress.ru

validator.w3.org

По адресу http://validator.w3.org располагается, пожалуй, самый распространенный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, локального файла и введенного в форму кода.

Проверка по адресу

Если ваш сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес (рис. 14.1).

Рис. 14.1

Рис. 14.1. Форма для ввода адреса документа

Так, вводя http://htmlbook.ru в форме «Validate by URI» (валидация по адресу) и нажав кнопку Check (проверить) получим сообщение о том, валидный документ или нет.

Хотя в текстовом поле вводится адрес сайта, проверяется не сайт целиком, а только одна главная страница. Учтите, что, к примеру, адрес http://htmlbook.ru равнозначен вводу http://htmlbook.ru/index.php.

Валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа (рис. 14.2).

Рис. 14.2

Рис. 14.2. Отчет о проверке и валидности веб-страницы

При обнаружении ошибок выводится уведомление о том, что страница не валидна и список ошибок с указанием строк, где встречаются ошибки (рис. 14.3).

Рис. 14.3

Рис. 14.3. Отчет о проверке и вывод ошибок

Проверка локальных файлов

Документы, еще не выставленные в Интернете, можно проверить с помощью формы, озаглавленной «Validate by File Upload» (валидация загруженных файлов), как показано на рис. 14.4.

Рис. 14.4

Рис. 14.4. Форма ввода пути к локальному файлу для его проверки

Вначале следует указать путь к HTML-файлу, после чего нажать кнопку Check. Файл будет загружен на сервер и проверен на ошибки.

Использование формы для ввода кода

В некоторых случаях требуется проверить код без сохранения его в отдельный файл. В этом случае пригодится форма для прямого набора текста и отправки его на сервер для валидации (рис. 14.5).

Рис. 14.5

Рис. 14.5. Форма для ввода HTML-кода

Расширение HTML Validator для браузера Firefox

Популярность браузера Firefox обусловлена наличием для него большого количества разнообразных расширений — программ, которые добавляют новые возможности в браузер. Расширения построены по открытой технологии и написать их может любой разработчик. Не оставлены без внимания и веб-разрабочики — для их удобства создано множество расширений, в том числе и для валидации документа прямо в браузере. В данном случае нас интересует HTML Validator. Эта программа построена по той же технологии, что и валидатор W3C, но не требует подключения к Интернету и работает прямо «на лету».

Где скачать
http://users.skynet.be/mgueury/mozilla/

Установка расширения

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения. Перетащите мышью загруженный файл (он имеет расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл… и укажите путь к файлу с расширением, дальнейшие действия браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:Program FilesMozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно.

Все приведенные методы установки требуют перезагрузки браузера после установки расширения. Работа HTML Validator начинается сразу же после повторного запуска Firefox.

Если указанные способы по каким-либо причинам не помогли, вы можете обратиться на сайт поддержки браузера Mozilla Firefox и прочитать обо всех возможных методах установки расширений по адресу
http://forum.mozilla-russia.org/doku.php?id=general:extensions_installing

Использование HTML Validator

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

Рис. 14.6аРис. 14.6бРис. 14.6с

Рис. 14.6. Виды картинок, отображаемых при проверке документа

Кружок с галочкой (рис. 14.6а) показывает, что документ валидный, желтый треугольник с восклицательным знаком (рис. 14.6б) — по коду имеются замечания, которые могут быть исправлены автоматически. А красный кружок с крестиком (рис. 14.6в) предупреждает, что есть серьезные ошибки.

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

Рис. 14.7

Рис. 14.7. Контекстное меню с пунктом выбора исходного кода

Окно исходного кода веб-страницы разделено на три части (рис. 14.8), где верхний блок содержит собственно HTML-код. В левом нижнем блоке отображается список ошибок и замечаний или информационные сообщения в случае валидного документа. Правый нижний блок предназначен для подробных подсказок о текущих замечаниях.

Рис. 14.8

Рис. 14.8. Результат работы расширения HTML Validator

htmlbook.ru

Что такое валидатор?

Данные правила устанавливает консорциум W3С в который входят крупнейшие компании, такие как: Google, Microsoft, Opera, Mozilla, Apple, IBM и многие другие.

Зачем нужна валидация?

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

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

Консорциум W3C был создан для того, что бы как-то стандартизировать и прописать определенный свод правил и требований, прежде всего, к HTML и CSS коду.

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

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

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

Как проверить сайт на валидность?

Давайте посмотрим как выглядит проверка валидности HTML на практике.

Для проверки сайта на валидность кода нам понадобится сервис W3C Markup Validator.

Выглядит он следующим образом:

Здесь есть три вкладки:

На первой вкладке «Validate by URI» вы можете сразу же вставить адрес вашего сайта или какой-то его страницы.

На вкладке «Validate by file Upload» вы можете загрузить сюда файл HTML-страницы, который находится на вашем компьютере.

На вкладке Validate by Direct Input вы можете вставить готовый фрагмент кода который вы хотите проверить на ошибки.

Так как мы валидность сайта, то нам нужна будет вкладка «Validate by URI». В поле «Address» вставляем адрес проверяемого сайта и далее мы можем сразу же нажать на кнопку «Check», либо можем нажать на ссылку «More Options» и посмотреть, какие есть еще настройки у W3C валидатора.

Если у вас, в теле документа, не задана кодировка, что бывает очень редко, и, в принципе, этого быть не должно, то вы можете, в поле Character Encoding, выбрать кодировку вашего сайта вручную.

Так же если в теле вашего html-документа не задан атрибут DOCTYPE, то вы можете выбрать его из раскрывающегося списка Document Type. Здесь есть множество различных стандартов и вам нужно выбрать по правилам какого стандарта вы хотите проверять сайт на валидность.

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

В следующей строке вы можете настроить вывод результатов проверки валидатора W3C:

List Messages Sequentially – выводит все ошибки и предупреждения, возникающие при валидации последовательно.

Group Error Messages by Type – позволяет сгруппировать все ошибки валидации по типу.

Show Source – отображает исходный код страницы

Show Outline – отображение строки в которой валидатор нашёл ошибку.

Clean up Markup with HTML-Tidy – позволяет вывести строку с уже исправленной ошибкой, то есть правильным html-кодом. Это осуществляется при помощи программы HTML-Tidy, и консорциум W3C не дает никаких гарантий, что данный код будет на 100% правильный.

Validate error pages – позволяет проверить на валидность страницу 404, которая выдается в случае если человек вводит не правильный адрес страницы на сайте.

Verbose Output – позволяет вывести подробную информацию.

Я обычно здесь ничего не ставлю. Просто ввожу адрес сайта и нажимаю на кнопку «Check», а дальше смотрю на список ошибок и предупреждений, который возникают на проверяемом сайте.

После нажатия на кнопку «Check», отображается список ошибок и предупреждений, возникших в процессе проверки валидности HTML.

На данном сайте есть два предупреждения — они выделяются желтым цветом, и две ошибки – они выделяются красным цветом.

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

Давайте посмотрим на саму структуру вывода предупреждений и ошибок.

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

В данном предупреждении написано, что атрибут role со значением banner не является обязательным для элемента header.

Во второй строке указывается, с какой строки, и с какого столбца по какую строку, и какой столбец был найден фрагмент кода с ошибкой.

То есть, наш код начинается со строки 52 столбец 2, и заканчивается в строке 52 столбец 57.

В третей строке отображается, текст самого кода. Он выделенный желтым цветом.

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

Для этого мы можем открыть нашу страницу и найти строку 52 столбец 2. Но это далеко не всегда эффективно, потому что если ваш сайт на каком-то движке, то вся файловая часть сайта разбита на множество различных файлов шаблона и там все выводится при помощи php и найти там данную строку будет очень сложно.

Поэтому, мы берем и копируем строчку с данным кодом и затем находим ее в файлах шаблона темы и уже там исправляем.

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

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

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

Нужно ли проверять сайт на валидность вообще?

Я для себя сделала следующий вывод:

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

Видеоинструкция

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

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

На этом у меня все. Подписывайтесь на мою рассылку и на мой канал на YouTube и до встречи в следующих статьях.

С уважением Юлия Гусарь

impuls-web.ru

Нахождение ошибок в HTML с помощью валидатора w3c и их исправление

Ищите в списке ниже свою ошибку и кликнуть по ней, вас автоматически «прокрутит» куда надо.

  1. No space between attributes.
  2. The width attribute on the td element is obsolete. Use CSS instead.
  3. An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
  4. Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.
  5. The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading, or…
  6. Element «noindex» undefined.
  7. End tag for element «div» which is not open
  8. Document type does not allow element «li» here; missing one of «ul», «ol», «menu», «dir» start-tag.
  9. End tag for «div» omitted, but OMITTAG NO was specified.
  10. There is no attribute «border».
  11. Character «<» is the first character of a delimiter but occurred as data.
  12. Saw » when expecting an attribute name. Probable cause: = missing immediately before.
  13. The align attribute on the img element is obsolete. Use CSS instead.
  14. Bad value Блог Алексея Смирнова for attribute href on element link: Illegal character in path segment: not a URL code point.

1. No space between attributes.

…rel=»shortcut icon» href=»http://arbero.ru/favicon.ico» ; type=»image/x-icon» Просто убираем «точку с запятой».

2. The width attribute on the td element is obsolete. Use CSS instead.

td valign=»center» width=»80″ height=»80″ >

Подобное преобразуем к виду

td style=»align:center; width:80; height: 80;»>

3. An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

Одна из самых частых ошибок. Просто не хватает альтернативного текста для картинки. Прописываем тег alt.

4. Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

section id=»comments» >

Внутри блока section должны содержаться что-то из тегов h2-h6, если их нет, просто переименовываем слово section на div

 5. The hgroup element is obsolete. To mark up subheadings, consider either just putting the subheading into a p element after the h1-h6 element containing the main heading,

or else putting the subheading directly within the h1-h6 element containing the main heading, but separated from the main heading by punctuation and/or within, for example, a span class=»subheading» element with differentiated styling. To group headings and subheadings, alternative titles, or taglines, consider using the header or div elements.

Аналогично предыдущему пункту. Просто меняем фразу hgroup на div. Вы можете использовать инструмент «Найти/заменить все» в текстовом редакторе, чтобы ускорить подобные процессы.

6. Element «noindex» undefined

Чтобы тег noindex стал валидным, пишем его в виде комментирования, то есть так:

<!--noindex-->Неиндексируем<!--/noindex-->

7. End tag for element «div» which is not open

Закрывающий тег div лишний. Убираем его.

8. Document type does not allow element «li» here; missing one of «ul», «ol», «menu», «dir» start-tag

Неправильное использование тега «li»: отсутствует тег «ul», «ol» и др. Проверьте.

9. End tag for «div» omitted, but OMITTAG NO was specified

Не хватает закрывающего тега div.

10. There is no attribute «border»

alt=»» width=»1″ height=»1″ border=»0″/>

Просто удаляем фразу border=»0″.

11. Character «<» is the first character of a delimiter but occurred as data

Не используйте тег «<» перед обычными словами, используйте лучше разные кавычки.

12. Saw » when expecting an attribute name. Probable cause: = missing immediately before.

Лишняя кавычка, удалите ее.

13. The align attribute on the img element is obsolete. Use CSS instead.

Не используйте значение align внутри тега img. Пропишите ее отдельно, в таком виде:

<div align="center">тут картинка (img src)</div>

14. Bad value for attribute href on element link: Illegal character in path segment: not a URL code point.

То, что идет в href должно быть ссылкой, начинаться с http, но никак не слово.

wpnew.ru

проверка на адаптивностьДавайте с самого начала, определимся, что же означает этот термин. Для чего нужна нам эта валидация и на что она влияет?

Валидность сайта-  это соответствие HTML-кода определенным правилам и стандартам.

Еще — это проверка синтаксических ошибок и вложенности тэгов.

Существуют и другие критерии. Но в них пока вдаваться не будем, а разберем основные.  Есть специальные сервисы  валидаторы, которые проверяют  сайты:

  • на наличие ошибок в структуре документа
  • проверяют HTML-код на соответствие стандарту, который у вас  указан в самом начале любой HTML-страницы. То есть, та версия вашего html документа, которая установлена в вашем шаблоне. Обычно она идет  первой строчкой.

Как узнать какую версию html вы используете?

Это очень просто.  Для этого нужно набрать на главной странице вашего сайта комбинацию клавиш CTRL+U и для поиска CTRL+F.

код главной страницы

А дальше смотрим скриншот.

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

На что влияет валидность сайта?

Правильная валидность сайта позволяет следить за корректным отображением сайта в разных браузерах. Проверить ваш шаблон можно бесплатно  на онлайн сервисе для проверки адаптивности шаблона сайта. Перейдите по этой ссылке и вставьте ваш адрес сайта-  http://quirktools.com/screenfly/(скопируйте ее и вставьте в адресную строку браузера).

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

Отдельно хочу обратить ваше внимание и особо отметить, что валидация прямым образом влияет на поисковые системы:

Поисковые системы отдают предпочтение сайтам с валидным HTML-кодом. Так давайте проверим наш шаблон на валидность.

Способы проверки валидности.

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

Переходим по адресу: validator.w3.org (скопируйте ссылку и вставьте в адресную строку браузера). Перед нами откроется страница, на которой есть 3 вкладки.

  • На первой вкладке вы увидите надпись «Validate by URI»-  это переводится, как «Здесь вы можете проверить валидность сайта размещенного в интернете».
  • На второй «Validate by File Upload» — это означает, что вы  можете загрузить файл с  вашего компьютера.
  • На третьей «Validate by Direct Input» —  это означает, что вы  можете вставить содержимое вашего файла непосредственно в форму для ввода.

Я покажу вам первый вариант.

проверка валидности сайта

И так, ваш сайт размещен в сети интернет. Выбираем — это «Validate by URI».

Переходим по клавише  More options- то есть, это означает выбрать опции. Здесь выставляем следующие значения:

Первая идет кодировка.

Вам необходимо проверить свою на сайте. Это важно! Смотрите ее между тегами <head> и </head>  набором клавиш  CTRL+U,  ищите в начале документа примерно такую строку:

<meta charset=»UTF-8″ /> — если нашли, то в данном пункте оставляем выбранным (detect automatically). Переводится,  как определять автоматически.

Далее  идет Document Type — это тип текущего документа.

Нашли <!DOCTYPE html>, тогда и здесь оставляйте значение detect automatically- автоматически обнаруживать.

Внимание! Если проверили и все у вас это есть, в чикбоксах  ничего не ставите! Оставляете все, как есть!

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

После чего нажимаем на кнопку Check, то есть проверить.

Далее идет проверка валидности вашего сайта и через  время появится результат. Будет  надпись с сообщением This document was successfully checked as HTML5.  Это означает, что этот документ был успешно проверен в HTML5.

Установите переводчик от google  в вашем браузере, и он будет предлагать вам перевод.

скриншот моих ошибок

Если  после проверки вы увидите  надпись на красном фоне — это значит, что у Вас присутствуют ошибки в HTML-документе. Их необходимо исправить.

Я разберу свой скриншот с ошибками. Смотрим внимательно.

У меня ошибка 3 , 4 и 5…

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

Ошибка 4 и 5-  лишние кавычки и нет атрибута. Я знаю, где у меня стоит этот код, поэтому зашла и отредактировала файл.

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

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

Мой совет- используйте только самые необходимые скрипты.

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

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

Для этого просто выделяете название ошибки и вставляете ее, в Google или Yandex.

Далее читаете, как с этой ошибкой справились другие веб-мастера и исправляете ее, следуя их советам.

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

Советую вам прочитать обе мои статьи о валидности и сделать правильный выбор.

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

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

C уважением, Рита Молчанова, автор блога ritabk.ru

You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.