Приветствую всех подписчиков блога, айтишников и гостей моего сайта. В прошлой статье я рассказывал вам о фундаментальных знаниях создания примитивных html-документов и зачем они нужны. Сегодня же поговорим с вами о таких понятиях, как валидность кода и верификации программ.
Если подробнее, то я в деталях опишу, как и какими программами проверить html код на ошибки, что такое Консорциум Всемирной паутины, который более известный под аббревиатурой W3C и дам определение важным терминам. Предоставляемая информация в статье поможет вам не только проверять страницы сайтов на корректность, а и конкретнее разобраться с понятием валидации в общем. Давайте начнем!
Каждой программе нужно двойное В: валидация и верификация
Каждый написанный программный код проходит проверку корректности семантики и логики связей объектов. Если использовать терминологию, то это называется валидация и верификация. Их используют во многих областях IT: программирование, сайтостроение, тестирование и т. д.
Они необходимы для поддержания качества выпускаемого продукта на высоком уровне. Хочу заметить, что при изучении данных технологий распространенной ошибкой является непонимание их конкретного предназначения. Вследствие этого термины путают и неверно описывают проделанные действия. Поэтому я дам определение каждому значению.
Итак, валидация – это проверка созданного документа с кодом на наличие ошибок в написании элементов, соответствие мировым единым стандартам, которые установлены в W3C, и прописанным спецификациям самого языка.
При помощи проверки кода на валидность, разработчик может исправить найденные так скажем «ляпы» среди написанного текста. Для большей наглядности я перечислю некоторые из них:
Теперь рассмотрим верификацию.
Верификация – это проверка выполнения всех норм качества, реализации требуемых инструментов и методик, а также их корректное взаимодействие друг с другом. В общем, при помощи верификации проверяют код на соответствие установленным критериям выполнения. Сам по себе процесс связан поддержанием соответствующего контроля качества конечного продукта.
С какой целью существует Консорциум Всемирной паутины?
W3 Консорциум – это целая организация, специализирующаяся на разработке и внедрении единых стандартов для интернет-ресурсов и Всемирной паутины в целом. Все принятые стандарты называются W3 рекомендациями и внедряются как во все технологические решения, так и в веб-сервисы.
Это способствует усовершенствованию мировой сети, ее гибкости, универсальности, а также достижению полной совместимости между создаваемой аппаратурой и программными продуктами.
W3C также выпускает свои пакеты программ, среди которых есть и validator. w3.org. Это один из наиболее известных сервисов для проверки валидности кода.
Сайт validator. w3.org поддерживает проверку программ в трех режимах: онлайн-режим проверки вписанного кода в диалоговое окно, валидация по ссылке на ресурс и проверка загруженного файла.
А теперь подробнее познакомимся с работой в данном сервисе.
Во всех трех случаях при успешной проверки ресурса и не обнаружении каких-либо ошибок окно с результатом будет подсвечиваться зеленым цветом, в противном случае – красным цветом и также будет написано количество найденных предупреждений и ошибок.
Расширений мне, побольше!
На сегодняшний день, наверное, для каждого существующего браузера были созданы расширения для валидации онлайн-ресурсов. Так как до этого разговор велся за W3C, то сначала я расскажу вам за продукт, созданный данной организацией.
Так, на сцене появляется HTML Validator для Firefox и Chrome. Так как данные браузер занимают почетные места среди лидеров, всемирная организация создала под них встраиваемый валидатор HTML Validator. Он разработан по принципу сайта validator. w3.org, однако имеет явное преимущество – функционирует без подключения к сети.
Установить представленное расширение можно тремя способами:
После повторного запуска браузера, расширение вступит в силу.
HTML Validator очень прост в использовании. Он не работает на русском языке, однако обладает интуитивно понятным интерфейсом.
После открытия любой веб-страницы в строке состояния показывается с помощью значков состояние ресурса. Зеленый круг с галочкой означает, что документ валидный, желтый треугольник с восклицательным знаком – предупреждение о замечаниях и красный круг с крестом – обнаружены ошибки.
Просмотреть код можно сразу в браузере при помощи функции «Просмотр исходного кода страницы» или горячей клавиши F12.
Еще немного программ для вадидации
Вообще могу сказать, что рассказывать о популярных проверочных программах можно целый день. Но для работы желательно знать всего несколько качественных программных продуктов. Некоторые мы с вами уже обсудили.
А теперь я хочу добавить небольшой бонус в виде описания одного онлайн-сервиса, который проверяет код всех популярных веб-языков, снабжен конвертером и многими другими полезными вещами. Это сайт https://www. freeformatter. com. Он проверяет как html-текст, так и даже запросы на XPath.
Для проверки сайта стоит только или вставить текст документа, или ссылку на проверяемый ресурс.
На этом я закончу публикацию. Делитесь ссылкой на статью с друзьями и не забывайте подписываться на мои обновления. Желаю удачи! Пока-пока!
7 критических ошибок в коде сайта: как найти за пять минут самостоятельно
Предлагаем рассмотреть критические ошибки в коде страницы сайта, которые оказывают влияние на корректность отображения страницы в браузере и степень ее оптимизации.
Какие ошибки мы отнесем к критическим:
Такие ошибки делают невозможным индексирование страницы поисковыми системами или сильно усложняют его. Также эти ошибки могут повлиять на отображение вашего сайта в различных браузерах.
Для начала мы разберем, как проверить наличие таких ошибок самостоятельно, а в конце я дам несколько рекомендаций какими инструментами воспользоваться для полного анализа сайта и нахождения всех ошибок.
Как посмотреть код верстки страницы?
Что бы посмотреть код страницы откройте любой браузер (в данном случае Google Chrome) и нажмите на клавиатуре клавишу F12 или Ctrl+Shift+I.
Появится небольшой окно, в котором Вы можете увидеть HTML-код.
Посмотрим, какие ошибки мы можем быстро найти на сайте самостоятельно.
1. Открыт ли сайт или страница для индексирования.
Сначала открываем файл ВашДомен/robots. txt и смотрим, не закрыта ли интересующая нас страница от индексирования. User-agent * указывает на робота, для которого действуют перечисленные в robots. txt правила. А вот директива Disallow запрещает индексирование разделов или отдельных страниц сайта. Допустим нас интересует страница ВашДомен/catalog/, если в файле robots. txt видим конструкцию типа Disallow: /catalog/, то ее необходимо удалить, что бы открыть доступ поисковым роботам для индексирования страницы. (так же возможен такой вид Disallow: /, такой код тоже следует удалять – он закрывает для поисковиков весь сайт).
Далее открываем код страницы (способом который описывался выше), нажимаем Ctrl+F, появится поле для поиска.
В него вставляем следующий код
и выполняем поиск, если ничего не найдено, то все нормально, если вы видите такую строку
ее необходимо удалить или заменить на
2. <!DOCTYPE>
Элемент <!DOCTYPE> предназначен для указания типа текущего документа. <!DOCTYPE> описывает, какую версию HTML разметки вы используете в документе. Очень важно что бы <!DOCTYPE> был указан в коде, иначе Ваш код не будет считаться валидным. Также браузеры будут делать свои предположения относительно версии HTML-кода, и в итоге страница будет отображаться не так, как было Вами задумано.
3. Адаптивность
Все меньше пользователей, которые не слышали про адаптивность и не знали бы про ее важность для сайта.
Чтобы проверить адаптивность сайта даже необязательно лезть в его код. Достаточно просто изменить размер окна браузера и наблюдать на поведением элементов на сайте.
Ширина окна 1024 px
Проверить, как ваш сайт отображается на мобильных устройствах, можно с помощью инструмента Google Mobile Friendly (Google Search Console).
Адрес инструмента — https://search. google. com/test/mobile-friendly
Просто вбиваем полный URL в строку и получаем результаты. Обычно проверка занимает меньше минуты.
4. Наличие viewport
Так же необходимо проверить поиском по коду наличие мета-тега
который отвечает за оптимизацию сайта для мобильных устройств.
5. h1 на странице
h1 — тег заголовка. Его наличие и содержание критически важно для улучшения позиций сайта в поисковой выдачи. Заголовок h1 на странице:
Пренебрежительное отношение к важности и уникальности заголовков может вызвать проблемы в индексации, даже вплоть до попадания сайта под фильтры поисковых систем. Тег h1 является одной из главных составляющих SEO, так как предоставляет пользователю информацию о том, про что будет страница, на которую он попал с поиска. Поэтому очень важно добавить основной фокус ключ в заголовок h1, чтобы поисковик и пользователь понимали о чем данная страница.
6. Подзаголовки страницы
Подзаголовки размечаются специальными тегами в коде h2. h6. Цифра соответствует важности заголовка. Зачем это необходимо? Поисковые системы не видят как люди глазами, для них дополнительные заголовки показывают, что это та самая страница и её тоже можно показывать по этому ключевому слову. Заголовки h2-h6 помогают положительно усилить внимание поисковиков к этой странице по этим запросам.
Открываете код страницы, поиск по коду и вы туда вбиваете <h2 и видите, есть ли на странице заголовки h2 или нет. Если h2 нет, не страшно. Потому что мы знаем, что должно быть минимум одно упоминание в этом диапазоне. Если заголовков в диапазоне h2-h6 нет, это плохо. Но если хотя бы один раз есть упоминание ключевого слова, это уже хорошо.
7. Проверяйте валидность сверстанных страниц
Чтобы сэкономить время и найти больше ошибок используем автоматические сервисы и инструменты.
Всегда пользуйтесь онлайн HTML/CSS валидатором чтобы определить ошибки в вашей разметке. Вот ссылки на сервисы валидации:
https://romanchueshov. ru/osnovyi-html/proverit-html-kod-na-oshibki. html
https://onvolga. ru/statsozd/2739-7-kriticheskih-oshibok-code-site. html