Всем-всем привет!

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

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

Валидный код — это код, соответствующий всем стандартам .

Для урока Вам понадобиться следующий материал:

Вышеупомянутый онлайн-сервис проводит проверку HTML кода онлайн на всем сайте целиком. Вам нужно просто указать домен своего сайта и нажать кнопку «Check», так Вы запустите проверку HTML-кода сайта.

Также валидатор предоставляет одну очень интересную возможность — проверка файлов сайта с локального компьютера. На мой взгляд, этот инструмент пригодится тем, кто делает сайты на заказ. Перед сдачей заказа нужно все перепроверить, ведь хочется, чтобы твоей работой были всегда были довольны. Проверить файлы можно перейдя на вкладку «Validate by File Upload»:

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

Сервис Validator W3c указал мне на две ошибки и сделал 8 предупреждений. Попробую их исправить и за одно покажу Вам как это делается.

Исправляем ошибку «Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)». Эта ошибка говорит мне о том, что в HTML-коде, а именно в теге прописывать стили не нужно. Следовательно, стили, которые прописаны в данном блоке нужно перенести в файл style.css и все.

Валидатор также указывает, где именно находиться ошибка:


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

Проверка CSS кода на валидность

В валидаторе W3c также можно проверить CSS-код на валидность. Сделать это можно по этой ссылке . Принцип работы все тот же: указываете URL-сайта, либо выбираете файл на компьютере и нажимаете на кнопку «Проверить».

В отличии от того же валидатора HTML, валидатор CSS на русском.

Ошибки и предупреждения CSS

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

В моем случае, большинство предупреждений из 281 — это CSS-свойства для нормального отображения в различных браузерах:

Сервис позиционирует подобные теги, как «неизвестное расширение поставщика». Поэтому если при проверке своих CSS-файлов, Вы видите большое количество таких ошибок, то не пугайтесь. Все нормально.

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

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

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

Ну а сейчас, до свидания!

Предыдущая статья
Следующая статья

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

Цель

Создание html-страницы порой не обходится без запутанных кодов и вечно повторяющихся тегов. Новые классы, селекторы, id-индификаторы и т.д. Все это может в прямом смысле свести с ума. Комментарии в html созданы, чтобы облегчить тяжелую участь веб-разработчиков. Ведь когда код сайта тянется далеко вниз, то трудно бывает вспомнить, что и где находится. Именно комментарии помогают сделать небольшие заметки прямо в html-коде, которые не будут видны вашим пользователям. Новички редко используют этот тег. Но уж опытные специалисты выделяют огромное, полезное свойство комментариев. Особенно эффективен этот тег, когда работу над кодом производят сразу несколько разработчиков. Вместо того чтобы каждый раз задавать вопросы и отрывать своего напарника от работы, нужно просто просмотреть комментарии.

Создание

Чтобы в вашем коде появилась новая строчка с комментарием, необходимо добавить следующую запись: . Именно так выглядит в html этот тег. Все, что находится внутри него, не будет выведено на экран пользователей. Html-комментарии не должны растягиваться на несколько строчек и содержать в себе какой-либо код (это считается дурным тоном). Они должны нести в себе лишь некоторое описание намерений разработчика относительно вставки именно этого тега, атрибута или значения. Хотя среди высокого уровня мастеров бытует мнение, что код должен записываться таким образом, чтобы никаких дополнительных объяснений не требовалось. Но, к сожалению, не все обладают таким даром написания html-страниц.

Особенности

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

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

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

Комментарии в HTML-разметке

Для того чтобы добавить комментарий в HTML-разметку, используем:

Все, что стоит в этих тегах, не видно на экране, но доступно для просмотра в исходном коде.

Комментарии в CSS-стилях

Для того чтобы добавить комментарий в CSS-стили, используем:

Все, что стоит в этих тегах, не учитывается при формировании стилей, но доступно для просмотра в самом файле стилей.

Комментарии в JavaScript-коде

Для добавления комментариев в JavaScript существуют два их типа .

Первый тип:

// Текст, код или прочее

Второй тип:

/* Текст, код или прочее */

Все, что стоит в этих тегах, не учитывается при выполнении скрипта, но доступно для просмотра в самом файле JavaScript.

Комментарии в PHP-коде

Этот язык программирования, в отличие от предыдущих, имеет 3 типа комментариев .

Первый тип:

// Текст, код или прочее

Второй тип:

/* Текст, код или прочее */

И третий тип:

# Текст, код или прочее

Все, что стоит в этих тегах, не учитывается при выполнении скрипта и видно только в самом файле PHP.

Обратите внимание!

/* /* Мой код */ */

выведет вам ошибку.

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

Комментарии в HTML

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

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

Стандартный комментарий

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

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

Ниже представлен пример правильно написания:

Это комментарий.

Тег

В HTML закомментировать строки можно и помощью специальной пары тегов - . Он специально включен в синтаксис языка для этой цели, однако большинство популярных браузеров не поддерживают его работу, за исключением Internet Explorer 8.0. Тег полезно использовать в том случае, когда часть информации необходимо скрыть лишь для браузера IE 8.0, 4.0 и более ранних версий, а также в качестве временного решения при разработке. Специфичным здесь является тот момент, что закомментировать часть кода можно только в теле страницы, то есть, внутри тега .

В приведённом ниже примере, при загрузке страницы в указанных браузерах будет выведен белый лист, в других же программах на странице будет написано :

Это комментарий

.

Нестандартный подход

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

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

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

В представленном примере показан способ нестандартного комментирования: