Насколько важна валидность HTML и CSS
Добро пожаловать! Вот и подошли к концу новогодние каникулы. Впереди целый год плодотворной работы, намечено много интересных идей и теперь дело остается за малым — воплотить их в жизнь 🙂 Вы можете следить за ходом событий и видеть как свобода мысли выражается в действии — достаточно подписаться на блог, уверяю Вас — это не займет много времени.
Сегодня я ставлю задачу выяснить, влияет ли правильный исходный код, который прошел проверку, на что либо и если да, то насколько. И как всегда жду Ваших мнений по этому поводу в комментариях.
В прошлом году я уделил в своих публикациях достаточно много внимания такому термину как валидность, пришло время разобраться какие есть преимущества у валидного HTML. Ранее вместе с Вами мы разобрали как проверить на валидность HTML, CSS, а также RSS каналы и еще несколько интересных моментов.
Четыре основных фактора в пользу валидного сайта
Во-первых, можно со ста процентной уверенность сказать, что страницы, прошедшие испытание на прочность валидатором, будут правильно отображаться в абсолютно всех современных браузерах — а это не менее важно, чем контент. Согласитесь, не очень приятно видеть перед собой верстку с перекосившимися элементами. Да и посетитель вряд ли уже вернется на такой блог, на котором его автор с пренебрежением относится к внешнему виду и дизайну.
Во-вторых, даже если подумать логически, убирая лишние теги и прочий «мусор», мы сокращаем вес страницы и тем самым уменьшаем время загрузки страницы, а браузеры тратят меньше времени на обработку таких страниц. Знаете, есть такая поговорка: «Меньше слов, больше дела», если ее перефразировать и применить к сайтостроению, то получится наподобие «Меньше тегов — больше слов».
И это не пустые слова, все кто когда либо сталкивался с проблемами с Яндексом, получали ответ от техподдержки: улучшайте сайт и работайте над ним. Так например в панели инструментов Яндекс Вебмастер можно найти справку по разделу, в которой присутствуют рекомендации по созданию сайтов.
Если внимательно изучить данный документ, то в пункте 3 «Верстка» изложено следующее:
В-третьих, если Вы занимаетесь созданием сайтов на заказ или продвигаете их, то наверняка должны знать языки HTML и CSS, а если так, то зачем намеренно создавать ошибки? К тому же, заказчики порой ставят перед исполнителем задачу: использовать валидный код, соответственно и расценки будут намного выше на выполняемую работу.
И, наконец, в-четвертых, не самую последнюю роль играет психологический фактор. Приятно осознавать, что проделанная работа соответствует определенные критериям и стандартам, в нашем случае стандартам Консорциума Всемирной паутины. А как известно, психология — великая вещь! Так что не стоит ее игнорировать.
Эх, так приятно видеть такую надпись 😉
Вот такие доводы у меня получились в пользу валидации. А Вы считаете это необходимостью или вовсе не принимаете во внимание? Может у Вас есть другие доводы, которыми хотите поделиться?
Польза определенно должна быть. Только вот найти бы время, чтобы засесть за поиск и устранение ошибок.
Ответить
Валидность не равно кроссбраузерность, даже в современных браузерах.
Ответить
Алексей, тем не менее производители программного обеспечения соблюдают основные положения консорциума. Согласен с тем что валидность и кроссбраузерность — разные вещи, но все же тесно связанные друг с другом, пускай и косвенно 🙂
Ответить
20 ошибок… Хм, я ожидала значительно большего количества. Приятно, будем работать дальше 🙂
Валидация, безусловно важна. А заказчики последнее время даже стали указывать кроссбраузерность отдельным пунктом в ТЗ.
Ответить
Ольга, число ошибок у Вас не критичное, я видал и по 400… Ох уж эти заказчики, вывод: внимательно изучаем техзадание, прежде чем браться за работу…
Ответить
Ольга, как давно вы верстаете? Кроссбраузерность, читай одинаковое отображение во всех (дай бог чтобы только современных) браузерах сверстанного макета всегда было требованием от заказчиков.
Я тоже с этим согласен, но в этом случае ваш первый пункт можно вычеркивать 😉
Ответить
Алексей, а разве есть вероятность того, что страницы с валидным кодом будут «кривыми» в одном из браузеров? 💡
Ответить
Webliberty, есть и иногда даже очень велика 😉 Пример: в каждом браузере есть фиксированные
paddingиmargin, установленные по умолчанию для некоторых элементов, например кbodyнекоторые браузеры добавляют несколько пикселей со всех сторон к свойствуmargin(в разных браузерах количество добавленных пикселей разное), то же касается элемента параграфаp.Если не сбросить в самом начале все
paddingиmarginдо нуля у всех элементов или же просто напросто у всех элементов в css вручную не указывать эти свойства, то сайт может отобразиться коряво и придется его налаживать. Например если у вашего блога в css для элемента body убрать строчкуmargin:0;то сайт съедет вниз пикселей на 5, в других браузерах может съехать на 3 или вообще отобразиться без корявости 🙂Ответить
concrete5russia, большое спасибо, не знал что у браузеров есть свои параметры для некоторых элементов, теперь буду знать 🙂 А эти параметры применяются только в том случае, если они не заданы при верстке шаблона? Или принудительно применяются к элементам?
Ответить
Webliberty, если в CSS их не прописать, то они задаются по умолчанию где-то внутри браузеров, но если вы укажете в CSS определенные margin и padding, то значения, которые были по умолчанию как бы сбросятся и будут применены Ваши цифры. Самый простой способ — это написать в css строчку:
* {margin:0; padding:0;}То есть для всех элементов на странице отступы и поля сбросить на 0. Я могу много написать тут про эти стили, но легче для справки просто зайти в гугл и ввести: «стандартные стили браузера» или просто «стили браузера». А для того, чтобы узнать как сбрасывают стили браузера поищите «сброс стандартных стилей» 🙂
Ответить
concrete5russia, обязательно посмотрю. А Вы по всей видимости разработчик или верстальщик, раз так хорошо разбираетесь?
Ответить
Я верстальщик + разработчик 🙂 Только дизайнерских способностей нет, всё остальное присутствует.
Ответить
concrete5russia пишет:
Подскажите как мне решить проблему с сайтом. При проверке на сайте validator.w3.org в доктайпе XHTML 1.0 Strict у меня выдаёт 279 Errors, 26 warning(s), а в доктайпе HTML5 выдаёт 3 Errors, 4 warning(s), но HTML5 там в экспериментальном режиме. Как быть? Как правильно прописать строку доктайп в коде?
Ответить
Олег, для HTML5 тип документа выглядит следующим образом:
<!DOCTYPE HTML>Ответить
Олег, я думаю пока что рано применять доктайп HTML5, потому что абсолютное большинство пользователей используют версии браузеров, не поддерживающих HTML5 (да что уж говорить, если есть люди, которые до сих пор IE6 используют). Делайте сайт с типом документа XHTML 1.0 Transitional, исправьте наиболее грубые ошибки — alt у картинок не везде прописаны у вас, все теги должны состоять из маленьких букв, все параметры в тегах тоже из маленьких букв, значения параметров должны быть в кавычках.
Ответить
Спасибо за ответы! Буду разбираться.
Ответить
Подскажите пожалуйста, если кто знает влияют ли предупреждения CCS на продвижение сайта и можно как-то от них избавиться? Предупреждение: Одинаковые цвета для текста и фона используются в следующих местах: .header и #autoXML
.header { background:#d60000; padding:22px 0 0 0; color:#000000; }Если исправляю это, то выходит следующее предупреждение при полном отчёте валидатора: Вы не указали цвет фона background-color (или background-color установлен прозрачным), но задали цвет color. Убедитесь, что последовательность цветов сохраняет текст читаемым.
.header { background:#d60000; padding:22px 0 0 0; color:#000000; background-color:transparent; }Ответить
Ренат, официальных подтверждений влияния валидности CSS на продвижение сайта нет, но: Одинаковый цвет фона и текста на нем может восприняться поисковыми системами как поисковый спам (некоторые умельцы прописывают ключевики белым цветом на белом фоне), в результате чего на ресурс могут наложить фильтр или вовсе забанить его.
Задайте для .header и #autoXML разные цвета (чтобы фон и цвет текста не совпадали), ссылку на свой сайт Вы не оставили, поэтому трудно оценить и посоветовать.
Ответить
Имеется в виду что в классе .header с фоном
#d60000находится элемент #autoXML с таким же цветом текста#d60000Решение: определить что такое #autoXML и задать для него цвет текста отличный от #d60000. Т.к. в исходном коде CSS я не нашел этого id, то могу предположить, что его создает движок Вашего сайта. Что за движок я так и не понял, поинтересуйтесь у кого аналогичный.
А так хочу сказать, что в принципе у Вас все нормально, CSS валидный, имеются лишь предупреждения, ошибок нет.
Ответить
В том то и дело что цвета разные
.header { background:#d60000; padding:22px 0 0 0; color:#000000; }И что это такое, откуда берётся для меня так же загадка #autoXML
Ответить
Проверял вилидность на своем сайте — более сотни ошибок. Сам в этом особо не понимаю — нанял спеца, он всё устранил оперативно. Оказалось, что ошибки в большинстве своем появились из-за неправильной настройке в одном из плагинов установленных на моем сайте.
Ответить
Станислав, да, зачастую именно в этом и кроется причина…
Ответить
Валидный код важен, но не обязателен. Главное уж очень грубых ошибок не делать. У меня один из сайтов полностью проходит валидацию (все страницы), но больших преимуществ перед другими не валидными конкурентами я не заметил.
Ответить
Sergei Ivanzov, не обязателен, это точно. Но согласитесь, самому приятно осознавать что все правильно, да и интересно)
Ответить
Кстати, исправился. Городские новости веду на WordPress. Один из косяков по валидации дает сам WP — в проверке логина. Остальное подправил. Ошибок больше нет.
А про обязательность/необязательность валидации — просто у поисковиков есть какой-то лимит ошибок. Они и смотрят, кого в первую очередь обрабатывать. У нас, кстати, есть городской портал с огромной посещаемостью, но валидацию не проходит в принципе. Потому, даже при такой посещаемости, тИЦ всего 40, а PR — 4… Валидатор даже не пишет, какие ошибки. Просто офигевает от этого. На самом деле — не UTF символы (при кодировке UTF). На этом проверка завершается. Впрочем, там я глазами глянул. Ужаснулся. А ведь обычный ВордПресс…
Ответить
RMAx, я встречался с ошибкой во время проверки валидности, например с таким текстом:
Это не означает что проблема очень велика и волноваться не стоит. К тому же, когда проводил обзор сервисов по проверке валидности HTML и CSS, то обращал внимание на то что у Яндекса (а именно его я приводил в примере) ошибки присутствуют, однако все нормально функционирует. Тоже самое касается и других сайтов.
Ответить
Спасибо за статью, но я бы хотел услышать, что думает пс по этому поводу. Сам же стараюсь, чтоб код моего сайта был валиден) Даже иногда становится приятно из-за этого)
Ответить
John, а ПС поступают просто — они рекомендуют придерживаться правил, но сами их в большинстве случаев не придерживаются. Самое главное, чтобы не было критических ошибок, которые способны повлиять на отображение контента, а остальное — мелочи.
Ответить
Психологически может и важно но на самом деле нет. Прогоните через валидаторы разные известные сайты, да тот же VKontakte, и увидите кучу ошибок CSS и HTML и что? Главное самому взять и проверить свой сайт в разных браузерах, чтобы не было косяков разных с тенями, цветами и т.д. Где-то читал про бан за ошибки валидности, так это вообще смешно, писать то надо что-то в блогах вот и пишут страшилки для зеленых 😀
Ответить
Константин, я полностью с Вами согласен! Когда я разбирал на примерах проверку HTML и CSS, то для примера выбирал сайт Яндекса и не случайно каждый раз подчеркивал, что ошибки присутствуют даже у него, впрочем как и у многих крупных сайтов.
Про бан — это конечно сказки) Вот только существует вероятность попадания под фильтры, думаю Вы со мной согласитесь, после следующего примера: если цвет текста и цвет фона на котором он расположен совпадут, то валидатор «заругается». А ПС может счесть это за скрытие информации. Раньше очень часто встречались такие примеры, когда страницы заполнялись скрытым текстом с ключевиками. Казалось бы ничего серьезного, но на санкции нарваться можно…
Ответить
Денис, и насколько эти ошибки «смертельны»? У меня 30-50 штук нашлось. И что значит, если говорят, что закрывающие теги
>неправильные, если визуально — все на месте? И кто занимается исправлением этих ошибок? Я сама в этом точно не разберусь?))Ответить
Я специально проверил как показало что все ошибки создают или счетчики с поисковиков, или сам вордпресс, формы подписок, и прочая хрень как правило очень коряво сделана, а мне лень подправлять )
Ответить
Сделал свой сайт валидным по HTML причем в жестких рамках XHTML 1.1 и по CSS. Да пришлось потратить на это один день, но я не жалею 🙂
Ответить
Я этот валидатор вообще не пойму. Сначала ругался что нет слеша в конце некоторых кодов, поставил слеш. Теперь мне пишет вот такое:
/mootools-1.2.5-core-yc.js» />
И там где подчеркивает красным этот знак
>. Вроде все правильно написано, но в что ему не угодило не пойму. Может какие-то новые правила введены или что, но для меня остается загадкой.Ответить
Александр, ничего нового не появилось. Тег
<script>не является самозакрывающимся, поэтому в приведенном примере слеш в указанном месте не требуется, его роль выполняет</script>.Таким образом, правильно оформленный скрипт должен выглядеть так:
<script src="/mootools-1.2.5-core-yc.js"></script>Ответить
Webliberty, валидатор сначала ругался что нет слеша, я поставил слеш, теперь он ругается на кавычку
>после слеша и на кавычку в закрывающим теге.Ладно, фиг с ним с этим валидатором. Благодарю за ответ.
Ответить