Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов). Как изменить тему WordPress. Веб-инспектор Какой тег определяет тип документа

Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.

Зачем проверять код?

Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте - например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.

Страница HTML, которая не содержит ошибок, в основном будет корректно отображаться в большинстве браузеров, а также будет соответствовать требованиям будущих технологий. Здесь стоит упомянуть поисковые механизмы, действие которых очень важно для целей SEO. Никто не хочет создавать для них препятствий, а чистый и правильный код гораздо легче воспринимается поисковыми ботами.

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

Общие ошибки

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


Самая плохая ошибка - не использовать Doctype ! Отсутствие тега Doctype означает, что браузер будет "догадываться", какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы .

Не закрыт элемент


Если вы открыли тег где-то в вашем документе HTML, его нужно закрыть в соответствующем месте. Забывчивость в данном вопросе не только приводит к ошибкам при проверке кода, но и может вызвать серьезные проблемы с шаблоном. На рисунке представлена ситуация, когда автор забыл закрыть тег

Опускается символ / в самозакрывающихся элементах


Большинство элементов HTML имеет отдельные закрывающие теги, например:

. Но есть элементы, такие как input , img и meta , которые являются самозакрывающимися, это означает, что они должны иметь символ / перед закрывающейся скобкой.

Не произведена конвертация специальных символов


Неконвертированные символы в URL


В соответствии с предыдущим пунктом, специальные символы, особенно амперсанд, должны быть кодированы в строках URL. Ссылки на сайты, построенные с использованием PHP, часто содержат переменные с использованием символа & , их нужно писать с использованием кода HTML & .

Блочные элементы внутри строчных


Одно из основных правил HTML заключается в том, что блочные элементы НИКОГДА не должны находиться внутри строчных элементов.

Популярный пример ошибки - использование ссылки в заголовке:

bananas

- блочный элемент, поэтому он должен оборачиваться вокруг ссылки (строчный элемент):

bananas

.

Отсутствует атрибут alt у изображения


Каждое изображение в документе HTML должно иметь атрибут alt с описанием содержания картинки. Даже если картинка служит для дизайнерских целей, она должна иметь атрибут alt , но в данном случае его надо оставить пустым, например, alt="" . В другом случае нужно представить описание содержание изображения.

Использование атрибутов подобных width и height


Вероятно, такое положение является обратной стороной широкого использования редакторов WYSIWYG, которые имеют тенденцию вставлять излишний код HTML. Атрибуты width и height определяются в переходных стандартах типах документа, но если вы задаетесь целью четко следовать стандартам, то наверняка знаете, что все атрибуты, отвечающие за представление элементов на страницах, должны быть перенесены в таблицу стилей CSS, для разделения содержания и дизайна.

Имя класса или ID начинается с цифры


Имя класса, ID или имя атрибута не может начинаться с цифры. Они могут включать цифры, но не в начале слова.

А какова ситуация с проверкой CSS кода?


В отличие от HTML, CSS используется для визуального представления страницы. Таким образом, вопрос “Если страница выглядит хорошо, то зачем проверять код?” в данном случае звучит более убедительно. Неправильный код CSS не оказывает такого влияния на веб страницы, как неправильный код HTML. Однако проверку стоит проводить на предмет обнаружения опечаток и ошибок в коде. Если вы используете новые свойства CSS3, они сделают ваш документ не прошедшим проверку, так как еще не включены в спецификацию, но если вы уверенны, что все правильно, то на такие ошибки можно не обращать внимание.

Я часто в своих уроках делал такие утверждения, как – «один тэг должен располагаться внутри другого», «у тэга img должен быть атрибут src», «сначала идёт тэг head, а потом body» и так далее. Но я ведь не придумывал всё это на лету, - а руководствовался неким регламентом, автором которого является организация, которая собственно придумывает и утверждает все стандарты, - называется она W3C (Консорциум Всемирной Паутины). Раньше я об этом не упоминал, но стандартов написания HTML существует несколько. И у каждого из них есть свои особенности и правила написания. Связано это с тем, что HTML не стоит на месте, а постоянно развивается.

И если в ранних версиях стандарта, когда не было технологии CSS , с помощью языка разметки можно было создавать как структуру, так и дизайн, то сейчас тенденция намечается совершенно иная, - HTML стал больше ассоциироваться со структурой (фундаментом и кирпичиками), на которых и держится дизайн. CSS здесь - это нечто вроде декоративного элемента, задающего оформительский вид – аналог плитки и обоев, если рассматривать создание сайта как строительство дома. В связи с этим, в новых стандартах HTML, некоторые тэги и атрибуты, отвечающие за дизайн, - объявлены нежелательными (deprecated). То есть, текущая спецификация стандарта их поддерживает, но уже в следующей поддержка будет прекращена.

Есть ещё более строгий стандарт, который называется XHTML , - он так вообще не терпит вольностей с кодом и не прощает грубые ошибки. Самый новый на данный момент – это HTML 5 , за ним будущее, поэтому в дальнейшем мы и будем на него равняться.

С этим вроде бы всё должно быть понятно, - есть несколько стандартов и замечательно. Но вместе с тем, есть браузеры, в задачу которых входит обработка HTML кода, и браузер не всегда может понять, в соответствии с каким стандартом мы пишем и что конкретно имел ввиду пользователь и соответственно как этот код нужно отображать. То ли мы используем переходный HTML (Transitional), и браузер прощает нам многие ошибки, используя «щадящий режим», то ли мы используем режим строгой совместимости XHTML и ошибки нужно обрабатывать со всей строгостью. Иными словами, перед браузером стоит сложная задача.

Как поступает браузер в таком случае? Он отображает код в режиме обратной совместимости , - все явные и неявные ошибки в коде он сглаживает и пытается максимально предугадать что же имел ввиду пользователь. Но тут есть некоторые очевидные недостатки: во-первых, браузер не может знать, что же имел ввиду человек изначально. Во-вторых, у каждого браузера этот режим совместимости может срабатывать по-разному. Что в итоге имеем? Есть код и нету регламента, - на практике это означает что одна и та же разметка, в режиме совместимости, браузером будет отображаться по-разному. Следовательно, нам нужен какой-то способ дать браузеру знать, какой же стандарт мы собираемся использовать.

И такой способ действительно есть, называется он – добавлением определения типа документа .

В коде объявление типа задаётся вот так:

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

На многих сайтах ещё можно встретить такую строчку:

Данная строка означает, что используется стандарт HTML 4.01. Но мы не будем его использовать, поскольку он устаревший. Но тем не менее, он тоже нередко встречается и знать о нём стоит.

Теперь объясню, зачем всё это нужно. Данной строкой мы задали некий стандарт, в соответствии с которым браузер должен выводить наш документ в окно браузера. На практике это означает, что наш HTML код будет более-менее одинаково отображаться во всех браузерах. Всего этого было бы невозможно достичь, если бы мы работали в режиме обратной совместимости (quirks mode ), который включается если объявление типа документа пропускать. В моей практике, связанной с вёрсткой страниц, это было действительно важно. Потому что, объявление DOCTYPE , в итоге решило проблему одинакового отображения страницы во всех браузерах.

Валидация документа.

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

На этой страничке мы сможем найти несколько способов проверки:

  1. Указать реально существующий сайт.
  2. Загрузить файл с вашего компьютера.
  3. Вставить непосредственно сам код, который вы хотите проверить, в соответствующее поле.

В нашем случае, скорее всего подойдёт второй или третий вариант.

Я лично использовал третий способ. Мой документ валидацию прошёл успешно, о чём и отрапортовала программа строкой This document was successfully checked as HTML5! на зелёном фоне.

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

Но в моём случае, программа, помимо того, что объявила о том, что валидация прошла успешно, также выдала мне три предупреждения:

1. Using experimental feature: HTML5 Conformance Checker

Дело в том, что стандарт HTML 5 формально ещё не окончательно утверждён консорциумом, который продолжает в него внедрять новые полезные фишки. Но на практике – всё большее и большее количество разработчиков начинают его использовать уже сейчас, чтобы быть готовым к завтрашнему дню.

2. No Character encoding declared at document level

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

3. Using Direct Input mode: UTF-8 character encoding assumed

Программа предупреждает, что она по умолчанию использует utf-8.

Что же, тогда не остаётся ничего, кроме как объявить используемую нами кодировку. Делается это вот таким образом:

Сама строка должна быть вложена в элемент head.

Тэг meta относится к разряду служебных тэгов, он как бы сообщает, что есть какая-то информация о странице, которую мы хотим сообщить браузеру. У него, как и у любого другого тэга, есть атрибуты:

http- equiv – это атрибут, в значении которого мы указываем название заголовка.

content – атрибут, в качестве значения которого мы указываем значение заголовка, в данном случае значение заголовка Content-type.

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

Content- Type – говорим браузеру о том, что будем сообщать о том, какой тип у нашего документа. А также, какая кодировка в нём используется.

text/ html; charset= utf-8 – документ типа text/html, который использует кодировку utf-8.

Попробуйте провести валидацию страницы ещё раз. Предупреждающих сообщений теперь быть не должно. Но они могут всё равно остаться, но уже по другой причине. К примеру:

1. Вы используете в своём документе изображения, и у вас в тэге img не задан атрибут alt .

2. В элемент body вложен строчный элемент. В соответствии со спецификацией, в элементе bodyдолжны быть только блочные элементы. А уже в них, могут находиться строчные.

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

Для комментирования, вам необходимо зарегистрироваться.

Влад Мержевич

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

Посмотреть все возможные сообщения валидатора можно по адресу http://www.htmlpedia.org/wiki/HTML_Tidy , далее приведены основные ошибки с их описанием и решением. Зеленым цветом выделен корректный вариант, другой цвет используется для обозначения ошибки.

Notice: entity "..." doesn"t end in ";"

Это замечание возникает при использовании спецсимволов вроде < при отсутствии на конце точки с запятой.

Решение

Notice: numeric character reference "..." doesn"t end in ";"

Возникает при использовании числовых спецсимволов вроде — когда в конце забыли добавить точку с запятой.

Решение

Добавьте в конце спецсимвола точку с запятой.

unescaped & or unknown entity "&..."

Символ амперсанда (& ) часто применяется в адресах ссылок (атрибут href тега ), поскольку он разделяет несколько параметров. Однако амперсанд зарезервирован для спецсимволов вроде поэтому в ссылках необходимо указывать & вместо & .

Решение

Замените & на & .

missing

Отсутствует обязательный закрывающий тег.

Заголовок

Заголовок</head></p> <h3>Решение</h3> <p>Добавьте закрывающий тег.</p> <h2>missing </aaa> before <bbb></h2> <p>Ошибка возникает при нарушении порядка тегов, когда блочный тег располагается внутри встроенного. В данном случае блочный тег <bbb> находится внутри встроенного тега <aaa> .</p> <p><p>Текст</p></p> <h3>Решение</h3> <p>Поменяйте расположение тегов - перенесите встроенный тег внутрь блочного.</p> <h2>discarding unexpected <...></h2> <p>Обнаружен открывающий или закрывающий тег, у которого нет пары. Подобная ошибка возникает в двух случаях: есть открывающий тег, но нет закрывающего; имеется закрывающий тег, которому не соответствует открывающий.</p> <p><div><div>Текст</div></div></p> <p><div>Текст</div></div></p> <p><div><div>Текст</div></p> <h3>Решение</h3> <p>В зависимости от ситуации добавьте или удалите открывающий или закрывающий тег.</p> <h2>Notice: nested emphasis ...</h2> <p>Контейнер содержит аналогичный тег физического форматирования, который не должен повторяться.</p> <p><p><b>Текст</b></p></p> <p><p><b><b>Текст</b></b></p></p> <h3>Решение</h3> <p>Удалите один из тегов.</p> <h2>replacing unexpected ... by </...></h2> <p>Закрывающий тег не соответствует открывающему тегу.</p> <p><p><b>Текст</b></p></p> <p><p><b>Текст</p></p> <h3>Решение</h3> <p>Замените открывающий или закрывающий тег на парный.</p> <h2>... isn"t allowed in <...> elements</h2> <p>Обнаружены теги, которые запрещено размещать внутри указанных элементов.</p> <p><head> <script data-ad-client="ca-pub-1852622910293794" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><title>Заголовок

Текст

Решение

Переместите HTML-элемент в правильный раздел.

missing <...>

Нет обязательного тега в структуре элементов. Ошибка, к примеру, может возникнуть при формировании таблицы, когда пропущен тег и сразу же после

следует
.

  1. Список

    Список

Решение

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

Notice: inserting implicit <...>

Сообщение возникает из-за предыдущей ошибки на странице.

Решение

Исправьте предыдущие ошибки.

Insert missing element</h2> <p>В коде не вставлен тег <title> .</p> <p><head> <script data-ad-client="ca-pub-1852622910293794" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><title>Заголовок

Решение

Добавьте контейнер .</p> <h2>Multiple <frameset> elements</h2> <p>Тег <frameset> используется в документе более одного раза без вложения. Допускается вставлять несколько элементов <frameset> , но вложенных один в другой.</p> <p><frameset ...><frame ...><br> <frameset ...><frame ...></frameset><br> </frameset></p> <p><frameset ...><frame ...></frameset><br> <frameset ...><frame ...></frameset></p> <h3>Решение</h3> <p>Используйте вложенные теги <frameset> .</p> <h2><...> is not approved by W3C</h2> <p>Указанный тег не входит в спецификацию HTML.</p> <p><span style="white-space: nowrap;">текст без переносов</p> <p><nobr>текст без переносов</nobr></p> <h3>Решение</h3> <p>Удалите тег или замените его подходящим эквивалентом.</p> <h2>Error: <...> is not recognized!</h2> <p>Тег не распознан и не входит в спецификацию HTML.</p> <p>Правильно: </p> <p>Неверно: <p><adres>Текст</adres></p></p> <h3>Решение</h3> <p>Удалите неизвестный тег.</p> <h2>Trimming Empty Tag</h2> <p>Контейнер пустой или содержит только пробел.</p> </p> </p> <h3>Решение</h3> <p>Удалите тег или добавьте внутрь контейнера текст.</p> <h2><a> is probably intended as </a></h2> <p>В закрывающем теге <a> отсутствует слэш.</p> <h3>Решение</h3> <p>Добавьте слэш к закрывающему тегу.</p> <h2>... shouldn"t be nested</h2> <p>Некоторые теги вроде <form> не могут содержать сами себя. Это сообщение также возникает из-за предыдущей ошибки.</p> <p><form action="gb.php" name="guestbook"></form><br> <form action="gb2.php" name="guestbook2"></form></p> <p><form action="gb.php" name="guestbook"><br> <form action="gb2.php" name="guestbook2"></form><br> </form></p> <h3>Решение</h3> <p>Удалите вложенные теги или исправьте предыдущую ошибку.</p> <h2>Text found after closing </body>-tag</h2> <p>Теги или текст добавляется после закрывающего тега </body> .</p> <p><html><br> <head> <script data-ad-client="ca-pub-1852622910293794" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><title>Заголовок

Основной текст



Заголовок

Основной текст


Привет!

Решение

Удалите текст после тега или перенесите этот тег в конец текста.

Adjacent hyphens within comment

Комментарии в коде HTML определяются конструкцией вида . Если в тексте комментария подряд идет два и более дефиса, возникает ошибка.

Решение

Удалите лишние дефисы.

SYSTEM, PUBLIC, W3C, DTD, EN must be upper case

Элемент указан неверно, в частности следующие атрибуты необходимо писать в верхнем регистре: SYSTEM , PUBLIC , W3C , DTD , EN .

Решение

Пишите корректно.

Warning: missing declaration

Не указан элемент .




Заголовок


Основной текст





Untitled Document



Решение

Поместите элемент в самую первую строку кода документа.

Too much <...>-elements

Повторяется тег, который в коде должен быть только один. К таким тегам относится , , и <body> .</p> <p><head> <script data-ad-client="ca-pub-1852622910293794" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><br> <title>Заголовок


Заголовок
Название статьи

Решение

Удалите повторяющийся тег.

<...> inserting "..." attribute

Не указан обязательный атрибут для данного тега.