Валидность HTML-кода
Все мы с Вами знаем, что вольнее языка, чем HTML найти трудно. Однако, и у него существуют определённые правила, которые регулируются различными стандартами (HTML4, XHTML1.1 и другие). Но НЕсоблюдение этих стандартов не означает, что сайт не отобразится. Браузеры ВЫНУЖДЕНЫ отображать даже самый гнилой код. Если они будут отображать только валидный HTML, то примерно 95% сайтов пользователи просто не увидят, и браузер растеряет всю свою долю рынка. Ведь именно столько процентов сайтов не являются валидными вообще. О смысле и значении валидации я решил поговорить в этой статье.
Прежде чем приступать к разговору валидности, давайте с Вами определимся, что это такое. Скажу своими словами, валидный HTML-код - это HTML-код, написание которого соответствует стандарту, указанному в DOCTYPE. Например, у меня на сайте в DOCTYPE стоит XHTML1.1. Проверить валидность HTML-кода можно здесь: http://validator.w3.org - это официальный валидатор.
Так в чём же преимущества валидного кода:
- Немного выше скорость загрузки.
- Лёгкий парсинг сайта.
- Лучшая индексация поисковыми системами, что следует из предыдущего пункта.
- Более высокая кроссбраузерность.
Как видите, преимущества имеются. Но их "плюсовость" не так уж и велика и вот почему:
- Скорость повышается практически незаметно.
- Благодаря хорошему коду, Ваш контент будет проще украсть с использованием автоматизированных средств.
- Поисковые системы стали очень хорошими, поэтому разбираются даже в самом ужасном коде.
- Современные браузеры даже самый ужасный код будут отображать примерно одинаково.
А вот минус у валидации один - это потраченное время. Я добился валидности своего HTML-кода на сайте, причём добился на каждой странице, но стоило мне это 3 дня достаточно упорной работы.
Скажу честно, писать валидный код совсем необязательно. Но есть люди (такие как я), которые любят, чтобы всё было аккуратно, идеально, чтобы код был максимально чистым, даже если это и вовсе не требуется. И вот таких людей по статистике 5%, и именно столько сайтов являются валидными.
Я Вам более того скажу: на данный момент такие сайты как Google, Yandex, Mail, Rambler и другие гиганты не являются валидными и близко. В чём Вы можете убедиться, попытавшись проверить валидность их HTML-кода. Поэтому писать валидный код или невалидный - это не важно, главное, чтобы сайт был хороший.
-
Создано 26.02.2011 15:29:54
-
Михаил Русаков
Комментарии (61):
Здравстуйте Михаил. Скажите,существует ли программа по удалению лишних тегов? Или только через валидатор?
Ответить
Никаких программ не существует. А если и существует, то сомневаюсь, что они "хорошо удаляют". Валидатор служит лишь для проверки кода. Поэтому только вручную.
Ответить
А как узнать какие теги лишние?
Ответить
Те которые закрываются 2 раза, например, либо просто пустые (<div></div>), которые при этом не несут никаких стилей на себе. А вообще, чтобы всё это подправить, нужно знать HTML и CSS.
Ответить
У вас код валидный, а вот ВКонтакте нет! http://validator.w3.org/check?uri=vk.com&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3
Ответить
Да, и ещё 99% сайтов невалидны, но это не означает, что это хорошо. А контакт - это пример низкокачественного сайта в плане реализации, поэтому и не стоит его в качестве примера приводить.
Ответить
Полностью согласен, Вконтакте даже нет страницы 404 и прочих хороших мелочей. В этом плане сайт очень-очень плох!
Ответить
На моей странице валидатор нашел непонятную мне ошибку: Line 10, Column 15: there is no attribute "HEIGHT" <table height="100%" width="100%"> ✉ You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead). This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash. Что это значит?
Ответить
У тега <table> нет атрибута height.
Ответить
Удалил атрибут, теперь в браузере таблица отображается неверно!
Ответить
Через CSS задавайте высоту.
Ответить
вот я только что с этим столкнулась. единственную ошибку выдает валидатор, а я тоже из этих 5% аккуртистов))) подскажите, пожалуйста, чем заменить height в таблице, а то я еще не знаю CSS, а ошибка покоя не дает(((
Ответить
style="height: 100%;" - поставьте этот атрибут.
Ответить
спасибо большое!
Ответить
а я думал, что Павел Дуров, собрал вокруг себя крутых программистов и делает серьезные вещи... Или это не так?
Ответить
Отвечаю на самый первый вопрос: http://dirtymarkup.com/
Ответить
А есть валидатор HTML на русском языке? То есть описание ошибок на русском.
Ответить
К сожалению, на русском языке доступен только валидатор CSS.
Ответить
Михаил, здравствуйте. Никак не могу пройти валидацию. Находить 10 ошибок страницы. 1. [Line 26, Column 11: there is no attribute "id" <audio id="beep-two"><source src="audio/FLS_Gun 001.ogg"></source><source src="…] - что она означает? 2. [Line 26, Column 21: element "audio" undefined <audio id="beep-two"><source src="audio/FLS_Gun 001.ogg"></source><source src="…] - валидатор не воспринимает HTML5? 3. [Line 26, Column 34: there is no attribute "src" <audio id="beep-two"><source src="audio/FLS_Gun 001.ogg"></source><source src="…]- что это значит? 4.[ Line 26, Column 102: element "source" undefined …_Gun 001.ogg"></source><source src="audio/FLS_Gun 001.ogg"></source></audio>] - тоже HTML5. 5. [ Line 31, Column 12: ID "nav-two" already defined <li id="nav-two"><a href="#">Клиенты</a></li> ] - что это значит? 5. [ Line 25, Column 11: ID "nav-two" first defined here <li id="nav-two" ><a href="#">Главный</a>] - что это? Я перечислил все ошибки, некоторые из них повторяются. Надеюсь, Вы подскажете мне, где надо править код.
Ответить
А какой доктайп Вы используете? Выбранный Вами доктайп не поддерживает некоторые атрибуты для этих элементов, вот и выдает кучу ошибок.
Ответить
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Ответить
Подскажите новичку, почему код не валидный? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> </title> <meta name="robots" content="INDEX,FOLLOW"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="Content-Language" content="ru"> <link href="iru.css" rel="stylesheet" type="text/css"> </head> <body> <p>Ни кротостью, ни негой ясной Черты любимых муз не привлекают нас. </p> </body> </html>
Ответить
Стоит лишний слеш после объявления кодировки. Надо так: charset=utf-8">
Ответить
А почему бы просто не использовать <!DOCTYPE html>? Ведь все уже перешли на html5.
Ответить
Можно, более того, последнее время я его и использую. Но только доктайп, а что касается HTML5, то вот: http://myrusakov.ru/html5-ne-rabotaet.html
Ответить
я не прохожу валидатор только по тому, что использую center, font, <body background="fon.gif">
Ответить
Здравствуйте! Никак не могу пройти валидность кода. Показывает много устаревших тегов. Подскажите пожалуйта как решить проблему.
Ответить
Кажется я нашел почему. "HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS." Так ли это?
Ответить
Используйте XHTML 1.1, но валидатор абсолютно прав, оформлением должен заниматься CSS.
Ответить
Здравствуйте Михаил. Одна ошибка висит. Ни как не могу понять "чего ей надо". Помогите пожалуйста. Line 50, Column 117: required attribute "ALT" not specified …" hspace="20" vspace="10" align="left"/><span class="стиль1"><span class="стил… ✉ The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
Ответить
У img должен быть обязательно alt.
Ответить
Благодарю!
Ответить
Михаил! В ниже приведенной строке кода валидатор находит ошибку. Подскажите, что нужно исправить.Заранее благодарен. <td width="162" bgcolor="#000000" background="images/t6.gif" valign="top">
Ответить
Все эти свойства использовать нельзя, за исключением valign="top". Их все нужно задавать через CSS.
Ответить
Добрый вечер, Михаил. Валидатор выдает ошибку document type does not allow element "p" here; missing one of "button", "map", "object", "ins", "del", "noscript" start-tag <p id="date">Loading...</p> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Подскажите пожалуйста, что она означает?
Ответить
Там где Вы вставляете <p>, его нельзя вставлять. Например, <tr><p><td> - вот так нельзя.
Ответить
Спасибо. Я разобрался в чем причина. Оказывается необходимо <p id="date">Loading...</p> затолкать внутрь тега <object></object>. В итоге код получается такой <object><p id="date">Loading...</p></object>. И ошибку валидатор не выдает.
Ответить
Здрасвуите Михаил, что касается валидацие, я проверил ваш блог (blog.myrusakov.ru) в валидаторе (validator.w3.org), и он имеет 9 ошибок, это так и должно быт?
Ответить
Нет, так быть не должно. Там была только 1 ошибка, породившая 9, которую уже исправил. Спасибо, что сообщили!
Ответить
Большое спасибо за статью! Думаю, к плюсу валидного кода можно добавить - что это показатель профессионализма. Написать кривой код могут все, а написать код без ошибок, могут только профи своего дела. В общем валидный код - это плюс для репутации человека.
Ответить
Здравствуйте,Михаил!не могли бы вы мне помочь в валидности? Line 337, Column 9: document type does not allow element "span" here; assuming missing "li" start-tag <span>Tags: </span> Line 341, Column 15: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag <li> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>"). Line 722, Column 7: end tag for "div" omitted, but OMITTAG NO was specified </body> You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
Ответить
Тут всё подробно написано, если не можете перевести, то http://translate.google.com
Ответить
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <link href="images/123.ico" rel="shortout icon" type="image/x-icon" /> <meta http-equiv = "Content-type" content="text/html; charset = UTF-8" /> <style> body { background: url("images/image-504.jpg"); } p {font-size: 14pt; } </style> <title>1</title> </head> <body> </body> </html> Подскажите пожалуйста почему пишет не валидный код, может css надо по другому записывать?
Ответить
Что именно он Вам пишет?
Ответить
required attribute "type" not specified …"text/html; charset = UTF-8" /> <style> body { background: url("images/image-5… The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>. Через гугл переводил, но так и не понял в чем дело
Ответить
Михаил, на некоторых страницах моего сайта есть карты Google. Код которых заключен тегами <iframe></iframe>. Из-за этого страницы не проходят валидность. Есть какое-то решение в данном случае?
Ответить
Здравствуйте Анатолий. Есть два варианта исправления данной проблемы. Первый это решение с помощью JS. <script type="text/javascript"> document.write("<iframe src=\"http://адрес\" frameborder=\"0\" style=\"border:none; overflow:hidden; width:500px; height:27px;\"></iframe>"); </script> Второй вариант, это конфиг nginix. if ($http_user_agent ~ W3C) { add_header Content-Type text/html; return 200 "<!DOCTYPE html><html><head><title>Valid HTML</title></head><body>It's valid HTML. Can trust me!</body></html>"; } Желательно использовать второй вариант.
Ответить
Здравствуйте, Александр. А можно второй вариант рассмотреть подробнее. Я не понял. :-)
Ответить
Читайте про конфигурацию Nginix. Если у Вас конечно сервер на Nginix. Напишите условие: if ($http_user_agent ~ W3C) { add_header Content-Type text/html; return 200 "<!DOCTYPE html><html><head><title>Valid HTML</title></head><body>It's valid HTML. Can trust me!</body></html>"; }
Ответить
Здравствуйте, Михаил. Помогите пожалуйста исправить ошибку в валидности. (XHTML 1.1) <div class="header"> <div id="banner"> <a href="index5.html"><img src="images/Metmeb_015.jpg" height="55" alt="Главная" /></a> <img src="images/kontakti_015.jpg" height="35" alt="Контакты" align= "right" /> </div> <div id="topmenu" align= "center"> <a href="index.html"><img src="images/knopki_Glav5.jpg" height="20" alt="Главная" /></a> <a href="index.html"><img src="images/knopki_O kompany5.jpg" height="20" alt="О компании"/></a> <a href="index.html"><img src="images/knopki_Price5.jpg" height="20" alt="Прайс" /></a> <a href="index.html"><img src="images/knopki_Dostavka5.jpg" height="20" alt="Доставка" /></a> <a href="index.html"><img src="images/knopki_Kontkt5.jpg" height="20" alt="Контакты" /></a> </div> </div> Валидатор пишет 2 одинаковые ошибки: 1) Column 74: there is no attribute "align" …<img src="images/kontakti_015.jpg" height="35" alt="Контакты" align="right" /> 2) there is no attribute "align" <div id="topmenu" align= "center"> Может нужно как-то через CSS правильно задавать?
Ответить
В службу поддержки напишите пожалуйста.
Ответить
Здравствуйте, подскажите где ошибка? Уже голову всю сломал:-) Validation Output: 1 Error Error Line 8, Column 72: Bad value shortuct icon for attribute rel on element link: The string shortuct is not a registered keyword. <link href="favicon.ico.ico" rel="shortuct icon" type="image/x-icon" />
Ответить
У Вас указан DOCTYPE не XHTML, в HTML тег не должен заканчиваться слешем, должно быть вот-так: <link href="favicon.ico.ico" rel="shortuct icon" type="image/x-icon">
Ответить
Здравствуйте,подскажите пожалуйста как эти две ошибки исправить: Error Line 35, Column 162: element "div" undefined …60"></a></center></div><div class="LK"><img src="/style/menu/3.png" alt="Инфор… ✉ You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by: incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead). by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case). Error Line 35, Column 229: element "a" undefined … alt="Информация"/> <a href="/inform/">Информация</a> </div><div class="LK"><i… ✉ You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by: incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead). by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).
Ответить
В службу поддержки обратитесь.
Ответить
Добрый день! Подскажите начинающему. Где на своем сайте искать такую запись, например: Line 35, Column 162:. Что она означает? Я понимаю, что это - ошибка.Но как ее найти на сайте? Спасибо.
Ответить
Здравствуйте. Проверила на http://validator.w3.org/ валидность ( <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Content-Type" cotent = "text/html; charset=windows-1251" /> <title>Телеканал ТНТ</title> </head> <body> <h1>ТНТ</h1> </body> </html> ) Пишет что в коде 2 ошибки. Ведь должно же все быть чисто?
Ответить
На начальном этапе думаю пока не заморачиваться валидностью, иначе мозг вспухнет. Изучить все языки, набраться опыта, набить руку, а потом только заморачиваться, кропотно подстраиваясь под валидность и исправлять ошибки, имея более полное представление о веб- программировании.
Ответить
Добрый день. Скажите пожалуйста по вашей книге "Создание сайта от начала до конца" проверяю на валидность и у меня отображается ошибка Error: Bad value shortuct icon for attribute rel on element link: The string shortuct is not a registered keyword. From line 11, column 1; to line 11, column 73 </title>↩↩<link href="images/simvol.ico" rel="shortuct icon" type="image/x-icon" />↩<link Syntax of list of link-type keywords: A whitespace-separated list of link types listed as allowed on <link> in the HTML specification or listed as an allowed on <link> on the Microformats wiki without duplicate keywords in the list. - В чем заключается ошибка? И второй вопрос: почему, когда я вообще убираю эту строчку, у меня не отображается так как у вас описано в книге( отображается в зеленой полоске Document checking completed. No errors or warnings to show.? Очень хочется понять в чем дело. Буду благодарна за ответ.
Ответить
Михаил, подскажите пожалуйста, много ошибок на сайте но я даже и первой понять не могу. Тут эта часть кода http://pastebin.com/PwRqLrWs тут картинка с ошибкой https://i.imgsafe.org/60ae319317.png
Ответить
Добрый день Михаил. Изучаю Ваш курс по html. решила проверить валидность, закидываю весть текст на проверку, как Вы это показываете в видео, но W3 НИКАК НЕ РЕАГИРУЕТ. Что я делаю не так? проверила на ошибки и вижу что я за Вами повторяю в точь точь. Результата нет не могу идти дальше. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http://www.w3.ord/1999/xhtml"> <head> </head> <body> </body> </html>
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.