<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Валидность HTML-кода

Валидность 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-кода. Поэтому писать валидный код или невалидный - это не важно, главное, чтобы сайт был хороший.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (59):

sergeevna sergeevna 03.11.2011 11:57:09

Здравстуйте Михаил. Скажите,существует ли программа по удалению лишних тегов? Или только через валидатор?

Ответить

Admin Admin 03.11.2011 17:27:30

Никаких программ не существует. А если и существует, то сомневаюсь, что они "хорошо удаляют". Валидатор служит лишь для проверки кода. Поэтому только вручную.

Ответить

sergeevna sergeevna 03.11.2011 18:48:37

А как узнать какие теги лишние?

Ответить

Admin Admin 03.11.2011 18:53:53

Те которые закрываются 2 раза, например, либо просто пустые (<div></div>), которые при этом не несут никаких стилей на себе. А вообще, чтобы всё это подправить, нужно знать HTML и CSS.

Ответить

ppk-center ppk-center 21.05.2012 20:26:38

У вас код валидный, а вот ВКонтакте нет! http://validator.w3.org/check?uri=vk.com&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

Ответить

Admin Admin 21.05.2012 22:30:15

Да, и ещё 99% сайтов невалидны, но это не означает, что это хорошо. А контакт - это пример низкокачественного сайта в плане реализации, поэтому и не стоит его в качестве примера приводить.

Ответить

ppk-center ppk-center 23.05.2012 13:24:47

Полностью согласен, Вконтакте даже нет страницы 404 и прочих хороших мелочей. В этом плане сайт очень-очень плох!

Ответить

ppk-center ppk-center 26.05.2012 14:33:45

На моей странице валидатор нашел непонятную мне ошибку: 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. Что это значит?

Ответить

Admin Admin 26.05.2012 14:35:03

У тега <table> нет атрибута height.

Ответить

ppk-center ppk-center 26.05.2012 16:10:02

Удалил атрибут, теперь в браузере таблица отображается неверно!

Ответить

Admin Admin 26.05.2012 16:13:54

Через CSS задавайте высоту.

Ответить

bosna bosna 27.05.2012 19:48:05

вот я только что с этим столкнулась. единственную ошибку выдает валидатор, а я тоже из этих 5% аккуртистов))) подскажите, пожалуйста, чем заменить height в таблице, а то я еще не знаю CSS, а ошибка покоя не дает(((

Ответить

Admin Admin 27.05.2012 20:26:02

style="height: 100%;" - поставьте этот атрибут.

Ответить

bosna bosna 28.05.2012 06:19:47

спасибо большое!

Ответить

lokomanx lokomanx 14.09.2012 20:24:08

а я думал, что Павел Дуров, собрал вокруг себя крутых программистов и делает серьезные вещи... Или это не так?

Ответить

ppk-center ppk-center 09.06.2012 12:14:19

Отвечаю на самый первый вопрос: http://dirtymarkup.com/

Ответить

witja witja 24.07.2012 11:34:50

А есть валидатор HTML на русском языке? То есть описание ошибок на русском.

Ответить

Admin Admin 24.07.2012 16:44:33

К сожалению, на русском языке доступен только валидатор CSS.

Ответить

BotaniQue BotaniQue 03.08.2012 12:39:40

Михаил, здравствуйте. Никак не могу пройти валидацию. Находить 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>] - что это? Я перечислил все ошибки, некоторые из них повторяются. Надеюсь, Вы подскажете мне, где надо править код.

Ответить

Admin Admin 03.08.2012 14:52:29

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

Ответить

BotaniQue BotaniQue 03.08.2012 15:40:32

<!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">

Ответить

arq12 arq12 28.09.2012 23:56:19

Подскажите новичку, почему код не валидный? <!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>

Ответить

Admin Admin 29.09.2012 10:32:01

Стоит лишний слеш после объявления кодировки. Надо так: charset=utf-8">

Ответить

alikhanov_k@mail.ru alikhanov_k@mail.ru 04.04.2013 13:58:18

А почему бы просто не использовать <!DOCTYPE html>? Ведь все уже перешли на html5.

Ответить

Admin Admin 04.04.2013 20:50:56

Можно, более того, последнее время я его и использую. Но только доктайп, а что касается HTML5, то вот: http://myrusakov.ru/html5-ne-rabotaet.html

Ответить

ppk-center ppk-center 01.12.2012 19:45:31

я не прохожу валидатор только по тому, что использую center, font, <body background="fon.gif">

Ответить

f10 f10 28.12.2012 08:44:12

Здравствуйте! Никак не могу пройти валидность кода. Показывает много устаревших тегов. Подскажите пожалуйта как решить проблему.

Ответить

f10 f10 28.12.2012 08:51:16

Кажется я нашел почему. "HTML 4.01 Strict — Не разрешает презентационной (оформительской) разметки, аргументируя тем, что этоим должен заниматься CSS." Так ли это?

Ответить

Admin Admin 12.01.2013 20:55:32

Используйте XHTML 1.1, но валидатор абсолютно прав, оформлением должен заниматься CSS.

Ответить

vorobioff vorobioff 11.01.2013 16:09:44

Здравствуйте Михаил. Одна ошибка висит. Ни как не могу понять "чего ей надо". Помогите пожалуйста. 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>.

Ответить

Admin Admin 11.01.2013 20:48:27

У img должен быть обязательно alt.

Ответить

vorobioff vorobioff 12.01.2013 12:48:50

Благодарю!

Ответить

arq12 arq12 03.02.2013 22:20:01

Михаил! В ниже приведенной строке кода валидатор находит ошибку. Подскажите, что нужно исправить.Заранее благодарен. <td width="162" bgcolor="#000000" background="images/t6.gif" valign="top">

Ответить

Admin Admin 04.02.2013 13:16:13

Все эти свойства использовать нельзя, за исключением valign="top". Их все нужно задавать через CSS.

Ответить

morozov-semen morozov-semen 21.04.2013 17:06:17

Добрый вечер, Михаил. Валидатор выдает ошибку 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>"). Подскажите пожалуйста, что она означает?

Ответить

Admin Admin 21.04.2013 19:09:52

Там где Вы вставляете <p>, его нельзя вставлять. Например, <tr><p><td> - вот так нельзя.

Ответить

morozov-semen morozov-semen 21.04.2013 21:15:40

Спасибо. Я разобрался в чем причина. Оказывается необходимо <p id="date">Loading...</p> затолкать внутрь тега <object></object>. В итоге код получается такой <object><p id="date">Loading...</p></object>. И ошибку валидатор не выдает.

Ответить

creativemaster creativemaster 01.05.2013 19:48:30

Здрасвуите Михаил, что касается валидацие, я проверил ваш блог (blog.myrusakov.ru) в валидаторе (validator.w3.org), и он имеет 9 ошибок, это так и должно быт?

Ответить

Admin Admin 01.05.2013 21:50:14

Нет, так быть не должно. Там была только 1 ошибка, породившая 9, которую уже исправил. Спасибо, что сообщили!

Ответить

Дмитрий184 Дмитрий184 25.06.2013 03:52:14

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

Ответить

vivattanks vivattanks 27.06.2013 19:24:11

Здравствуйте,Михаил!не могли бы вы мне помочь в валидности? 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 ">".

Ответить

Admin Admin 27.06.2013 21:04:08

Тут всё подробно написано, если не можете перевести, то http://translate.google.com

Ответить

Инкогнито Инкогнито 13.09.2013 22:18:14

<!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 надо по другому записывать?

Ответить

Admin Admin 14.09.2013 17:58:49

Что именно он Вам пишет?

Ответить

Инкогнито Инкогнито 14.09.2013 18:16:39

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>. Через гугл переводил, но так и не понял в чем дело

Ответить

GoTo GoTo 18.11.2013 21:39:33

Михаил, на некоторых страницах моего сайта есть карты Google. Код которых заключен тегами <iframe></iframe>. Из-за этого страницы не проходят валидность. Есть какое-то решение в данном случае?

Ответить

tikkiwiki tikkiwiki 18.11.2013 21:48:01

Здравствуйте Анатолий. Есть два варианта исправления данной проблемы. Первый это решение с помощью 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>"; } Желательно использовать второй вариант.

Ответить

GoTo GoTo 18.11.2013 22:29:29

Здравствуйте, Александр. А можно второй вариант рассмотреть подробнее. Я не понял. :-)

Ответить

tikkiwiki tikkiwiki 19.11.2013 11:01:07

Читайте про конфигурацию 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>"; }

Ответить

b.mn@mail.ru b.mn@mail.ru 27.01.2014 16:38:40

Здравствуйте, Михаил. Помогите пожалуйста исправить ошибку в валидности. (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 правильно задавать?

Ответить

tikkiwiki tikkiwiki 31.01.2014 10:52:55

В службу поддержки напишите пожалуйста.

Ответить

kadette kadette 19.04.2014 12:16:18

Здравствуйте, подскажите где ошибка? Уже голову всю сломал:-) 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" />

Ответить

frizoman frizoman 24.06.2014 16:50:05

У Вас указан DOCTYPE не XHTML, в HTML тег не должен заканчиваться слешем, должно быть вот-так: <link href="favicon.ico.ico" rel="shortuct icon" type="image/x-icon">

Ответить

flineo flineo 15.06.2014 09:56:01

Здравствуйте,подскажите пожалуйста как эти две ошибки исправить: 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).

Ответить

tikkiwiki tikkiwiki 25.06.2014 09:49:51

В службу поддержки обратитесь.

Ответить

galoshka1 galoshka1 24.11.2014 10:50:21

Добрый день! Подскажите начинающему. Где на своем сайте искать такую запись, например: Line 35, Column 162:. Что она означает? Я понимаю, что это - ошибка.Но как ее найти на сайте? Спасибо.

Ответить

Pavirina Pavirina 24.11.2014 17:47:32

Здравствуйте. Проверила на 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 ошибки. Ведь должно же все быть чисто?

Ответить

Edwardglv Edwardglv 25.01.2015 02:15:30

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

Ответить

laqno laqno 24.10.2016 12:15:06

Добрый день. Скажите пожалуйста по вашей книге "Создание сайта от начала до конца" проверяю на валидность и у меня отображается ошибка 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.? Очень хочется понять в чем дело. Буду благодарна за ответ.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.