При разметке контента на странице часто возникают проблемы: забыли закрыть тег, вложили элементы, которые вкладывать нельзя, забыли указать обязательные теги.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Примеры ошибок</title>
</head>
<body>
<p>Текст</span> <!-- Закрыли не тот тег -->
<img src="images.png"> <!-- Не указали обязательный атрибут alt -->
</body>
</html>
В большинстве случаев такие ситуации не страшны. Разработчики браузеров внедряют автоматические проверки кода на ошибки, которые могут привести к нарушению отображения разметки, и при их наличии пытаются автоматически исправить проблему. При простых ошибках такой подход оправдан и позволяет разработчикам не беспокоиться о забытом теге <html> или <body>. В сложных же ситуациях такие ошибки могут быть трудно уловимы, и зачастую разработчики долго сидят над кодом и ищут их.
Для решения таких проблем созданы специальные валидаторы HTML-разметки, которые автоматически проверяют код на ошибки. Можно указать ему ссылку на страницу или готовый фрагмент HTML-разметки, после чего валидатор выдаст список предупреждений и ошибок. На примере выше валидатор покажет следующие ошибки:
<span>, который сейчас оказался закрыт. Обычно это означает, что мы или случайно закрыли не тот тег, как в данном случае, или открыли не тот. Современные редакторы кода помогают избежать этой ошибки, так как они автоматически закрывают теги при их создании.alt у тега <img>.Распространённым валидатором является онлайн сервис от W3C, его можно найти по ссылке https://validator.w3.org/. Он поддерживает все стандарты HTML, поэтому важно не забывать проверять разметку с его помощью.
Исправьте ошибки в примере кода из теории. В тексте предполагалось использование тега <p>, а не <span>. Вставьте две исправленные строчки в редактор.
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.