Если на сайте часть контента отображается неправильно или элементы медленно загружаются, проблема может быть в коде. В этой статье расскажем, как выполнить проверку HTML-кода за 40 секунд, даже если вы не знаете стандарты наизусть и не обладаете специальными техническими знаниями.
Что такое валидация кода
Валидация — это проверка верстки на корректность. Код считается валидным и качественным, если соответствует стандартам организации W3C и не содержит ошибок.
Ошибкой может быть, например, некорректно составленный тег или непрописанный путь. Представьте, что программист решил добавить к тексту картинку. Он внес в код тег <img>, который позволяет вставить изображение, но не указал путь к нужной иллюстрации и забыл про это. Клиент зашел на веб-ресурс, а вместо фото товара увидел пустое место — из-за ошибок в верстке картинка не смогла подгрузиться.
Код проверяют не только на ошибки, но и на соответствие стандартам HTML, CSS и другим. Если этого не сделать, верстка может некорректно отображаться на мобильном устройстве или не открываться в старых браузерах.
Почему важно проверять код
Проверка кода на ошибки перед публикацией страницы важна по нескольким причинам:
- Нужно убедиться, что сайт будет корректно отображаться в различных браузерах.
- Необходимо понять, что в коде нет неточностей. Если вы начинающий программист, то вполне возможно, что из-за отсутствия опыта могли что-то забыть. Например, не добавили атрибут <alt> для изображения, не закрыли тег или использовали в ссылках не рекомендованные элементы.
- Требуется проверить, что ресурс адаптирован для людей с ограниченными возможностями. В код для каждой картинки должен быть добавлен тег <alt> с текстом, который описывает, что на ней изображено. Так люди со слабым зрением смогут лучше понять контент, находящийся на сайте. Специальная программа — скринридер — зачитает им то, что написано, в том числе и подписи к изображениям.
- Стоит поработать над длиной кода и убрать лишние элементы. Например, удалить ненужные мета-теги и невидимые символы. Чем короче HTML-код, тем быстрее работает ваш сайт. Это положительно сказывается на ранжировании и релевантности веб-ресурса.
- Важно удостовериться, что на странице нет битых ссылок. Их наличие негативно влияет и на продвижение сайта в поисковых системах, и на поведение пользователя. Вполне вероятна ситуация, когда человек хочет посмотреть товар, но ему это не удается из-за некорректной ссылки. Он может воспользоваться поиском на сайте, а может просто перейти к конкурентам.
Что именно проверять и в каких сервисах
Проверяется не только HTML-разметка, но и соответствие кода спецификации CSS, адаптивность верстки и наличие битых ссылок. Расскажем, что такое валидатор кода и как он поможет сделать автоматическую проверку.
Валидация HTML
Рассмотрим, как проверить, работает ли код HTML. Он отвечает за правильное отображение контента во всех браузерах. Для проверки используем валидатор W3C — один из самых популярных, так как разработан авторами стандартов для HTML.
Чтобы выполнить проверку, нужно зайти на сайт, ввести адрес веб-ресурса и нажать кнопку Check
Через 30–40 секунд сервис выдаст результат проверки данных. На сайте, который был взят для примера, мы обнаружили 63 ошибки.
Ошибка 8 не прошла проверку, так как в элементе dl отсутствует обязательный дочерний элемент.
Ошибка 9: атрибут role не разрешен для элемента label
При этом валидатор указывает, с какой по какую строчку содержится ошибка, и предлагает варианты решения. Сервис также предоставляет ссылки на стандарты и правила HTML, чтобы можно было глубже изучить тему и самостоятельно настроить корректный код.
Важно учитывать, что программа проверит только ту страницу, URL-адрес которой вы введете. Если укажете адрес сайта, валидатор проверит главную страницу.
Мы проверили только одну страницу сайта nic.ru — «Блог», введя ссылку на нее. Остальные страницы валидатор не проверял
Проверка HTML-кода может выполняться через расширения в браузерах. Например, в Google Chrome оно установлено по умолчанию и включается сочетанием трех клавиш: Ctrl + Shift + I. Вы увидите значок в строке состояния, который показывает количество ошибок в HTML-странице. Подробная информация об ошибках видна при просмотре исходного HTML-кода.
Значок с количеством ошибок и предупреждений отобразится в правом верхнем углу экрана
Валидация CSS
В сервисе W3C можно проверить код на соответствие требованиям CSS 2.1 или CSS 3. CSS — это язык, который отвечает за внешний вида документа. Благодаря ему вы видите не просто «простыню» текста, а красиво оформленную страницу с таблицами, подзаголовками, разными шрифтами и цветом фона. Чтобы выполнить проверку, достаточно перейти по ссылке и ввести адрес.
Валидатор покажет все ошибки, и вы сможете привести код к нужному виду
Валидация ссылок
Ее важно выполнять по двум причинам:
- Если пользователь нажмет на битую ссылку, он может потерять интерес к сайту и уйти к конкурентам.
- Поисковые роботы могут понизить репутацию сайта, если найдут битые ссылки.
Корректность ссылок проверяют в разных сервисах. Например, это возможно в «Яндекс Вебмастере».
Чтобы проверить ссылки, нужно открыть сайт в «Яндекс Вебмастере» и перейти в раздел «Ссылки»
Программа покажет вам список всех «поломанных» ссылок. Вы сможете скачать файл в формате TSV.
Валидация адаптивности
Большая часть пользователей заходит на сайты и просматривает их контент на смартфонах. Поэтому важно предусмотреть для последних адаптивную версию. Вы можете провести проверку с помощью Google Chrome — нужно запустить режим эмуляции мобильного устройства. Для этого нажмите Ctrl+ Shift+ I, если у вас установлен Windows, и Cmd+ Opt+ I, если — macOS. Затем кликните на иконку смартфона на верхней панели в правом углу экрана и в списке Responsive выберите нужную модель.
При запуске режима эмуляции появляется небольшое окошко, которое симулирует экран мобильного устройства
Как определить валидность HTML-кода
- Проверить корректность HTML-верстки с помощью специального валидатора.
- Проверить код на соответствие спецификации CSS.
- Проверить код на наличие битых ссылок.
- Проверить адаптивность кода.