Валидность html

Здравствуйте, дорогие друзья! Рад видеть вас на моём блоге! Сегодня речь пойдет про валидность HTML на сайте в целом и его отдельных страницах. Валидность — это соответствие кода определённым стандартам. Над разработкой веб-стандартов работает Консорциум World Wide Web (W3C) — это международное сообщество, в котором состоят организации, штатные сотрудники и общественность.

Миссия консорциума заключается в том, чтобы раскрыть весь потенциал всемирной паутины, разрабатывая и внедряя протоколы и руководящие принципы, обеспечивающие долгосрочный рост сети Интернет.

На официальном сайте W3C предоставлены очень полезные онлайн-инструменты для вебмастеров, одним из них является валидатор Markup Validation Service — это бесплатный сервис, позволяющий проверить приверженность сайта современным веб-стандартам.

К сожалению, сервис полностью на английском языке, но если вы чуточку разбираетесь в разработке и вёрстке, то непременно поймёте его суть и посыл ?

Итак, на главной странице расположены три вкладки:

1. Validate by URI — проверка указанного URL-адреса;
2. Validate by File Upload — проверка загруженного файла;
3. Validate by Direct Input — проверка путем прямого ввода исходного кода.

Для запуска анализатора нужно переключиться на требуемую вкладку, в качестве примера я буду рассматривать проверку по URL-адресу. Под ссылкой More Options скрываются дополнительные опции, нажмите на нее, чтобы получит доступ к настройкам:

• Character Encoding — кодировка символов. WordPress использует UTF-8, но можно оставить стандартное значение «Detect automatically» для автоматического определения кодировки.
• Document Type — тип документа (HTML, XHTML, SVG и др.). Поставьте флажок Only if missing, если тип документа не задан на странице и его нужно задать вручную для проверки.
• List Messages Sequentially — выводить ошибки и предупреждения последовательным списком;
• Group Error Messages by Type — группировать ошибки и предупреждения по типу;
• Show Source — показать исходный код;


• Show Outline — показать структуру документа;
• Clean up Markup with HTML Tidy — очистка разметки с помощью HTML-Tidy;
• Validate error pages — проверять страницы с ошибками, например, несуществующие страницы с 404 ошибкой;
• Verbose Output — подробный вывод. Если честно, я не заметил разницы при включении этой опции, если знаете за что она отвечает — поделитесь в комментариях, буду очень признателен.

Когда все настройки выставлены, нажимайте кнопку Check для старта HTML валидатора. Если документ не имеет ошибок, появится надпись:

В переводе на русский язык это означает: «Проверка документа завершена. Ошибки или предупреждения не найдены». Отлично!

В том случае, если документ не пройдёт проверку, увидим простую надпись об её завершении:

И конечно же список сообщений, которые содержат сведения об ошибках и предупреждениях с пояснениями, а также ссылки на конкретные строки документов, но только в том случае, если была включена опция Show Source.

На скриншоте ниже представлен фрагмент проверки главной страницы Яндекса. Странно это видеть, даже не ожидал, ведь Яндекс сам принимает участие в разработке стандартов W3C… Ну да ладно, соблюдать абсолютно все стандарты действительно сложно, тем более для такого крупного портала.

В начале своего пути Блог Свободного Вебмастера содержал очень много ошибок и предупреждений. По мере изучения мне удалось снизить их количество, а со временем и вовсе избавиться. Впредь буду придерживаться стандартов W3C, хотя некоторые плагины добавляют ложку дёгтя в бочку мёда… Время покажет!

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

webliberty.ru

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

Вышеупомянутый онлайн-сервис проводит проверку 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-коде, а именно в теге <div> прописывать стили не нужно. Следовательно, стили, которые прописаны в данном блоке <div> нужно перенести в файл style.css и все.

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

Далее я проделываю следующее:

1. Копирую выделенную желтым цветом кусочек кода в валидаторе W3c;
2. Открываю исходный код страницы в браузере. Сделать это можно щелкнув правой кнопкой мыши на странице сайта и выбрав пункт «Посмотреть исходный текст» (для браузера Opera):Исходный код откроется в новой вкладке.
3. Выполняю поиск по странице (CTRL+F) и вставляю в поисковую строку, скопированный в валидаторе, кусочек кода:Вот и показались те самые стили в блоке <div>. Теперь мы знаем, где примерно находится ошибка и к какому элементу относиться (в моем случае, это форма подписки), значит можно переходить в Notepad++;
4. В текстовом редакторе Notepad++ я открываю файл с ошибкой и с помощью все того же поиска нахожу ошибку:


5. Далее просто копирую эти стили и вставляю в файл style.css:
6. Из файла index.html стили я удаляю и оставляю только самый необходимый HTML-код.
7. Конечно же, отправляю файлы index.html и style.css на сервер, чтобы изменения вступили в силу.

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

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

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

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

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

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

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

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

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

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

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

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

context-up.ru

Что такое валидация html кода?

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

Спецификации. Что это?

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

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

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

Cколько спецификаций существует.

Начиная с HTML5, разработчики и производители браузеров могут выбирать между двумя разновидностями одного и того же языка разметки: спецификациями, разработанными консорциумом W3C, и тех, что разработаны WHATWG.

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

Однако при использовании в своих проектах только что появившихся нововведениях в одной из спецификаций, у вебмастеров могут возникнуть проблемы. Например Дэвид Бэрон из Mozilla заявил:

Если HTML-спецификации W3C и WHATWG различаются, то мы стараемся следовать спецификации WHATWG.

Зачем нужна валидация?

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

klondike-studio.ru

Что такое валидность?

Считается, что валидность кода — это единая, универсальная характеристика любого кода.
На самом деле, валидность это соответствие html кода документа определенному своду правил, указанному в доктайпе или подразумеваемому в HTML5.
То есть, валидность — понятие относительное, поскольку правила бывают разные, и требования у них тоже.
Чтобы было понятнее, приведу пример, который я нашла на сайте css-live.ru:

К строительству жилых домов и атомных электростанций применяются разные СНиПы (строительные нормы и правила), поэтому документ, валидный по одному своду правил, может быть не валидным по другому (хороша была бы АЭС, построенная по нормативам жилого дома!).

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

Валидация — что это?

Простыми словами, валидация — это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).

Как проверяется валидность?

Валидность HTML кода проверяется инструментом, который называется валидатором.
Самый известный валидатор w3c — https://www.w3.org.
Валидатор w3c производит несколько проверок кода.
Главные из них:

1. Проверка на наличие синтаксических ошибок:
   Пример c habrahabr.ru/post/101985:
   <foo bar=»baz»> является корректным синтаксисом, несмотря на то, что <foo> является недопустимым HTML-тэгом
   Так что проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
2. Проверка вложенности тэгов:
   В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
3. Валидация html согласно DTD:
   Проверка того, насколько код соответствует указанному DTD — Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
4. Проверка на наличие посторонних элементов:
   Она обнаружит все, что есть в коде, но отсутствует в доктайпе.
   Например, пользовательские тэги и атрибуты.

Для проверки валидности CSS кода существует валидатор css — http://jigsaw.w3.org/css-validator.
Валидность кода — это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация — инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:

• более удобным и быстрым — пользовательские атрибуты для Javascrip/AJAX или
• SЕО оптимизированным — разметка ARIA.

Понятно, что в валидности ради валидности нет никакого смысла.
Как правило, опытные верстальщики придерживаются следующих правил:
— В коде не должно быть грубых ошибок.
— Незначительные можно допустить, но только по обоснованным причинам.
В отношении допустимости ошибок валидации html/CSS:

Ошибки валидации (ОВ) можно разделить на группы:

• ОВ в файлах шаблона:
  Их не сложно найти и исправить.
  Если, какие то из мелких ошибок помогают сделать сайт более функциональным или быстрым, их можно оставить.
• ОВ в сторонних скриптах, подключенных на сайте:
  Например, виджет Вконтакте, скрипт Твиттера или видео-файлы с ютуб.
  Исправить их никак не удастся, поскольку эти файлы и скрипты находятся на других сайтах и у нас нет к ним доступа.
• CSS-правила, которые валидатор не понимает:
  Валидатор проверяет соответствие кода сайта определенной версии HTML или CSS.
  Если вы использовали в шаблоне правила CSS версии 3, а валидатор проверяет на соответствие версии 2.1, то все правила CSS3 он будет считать ошибками, хотя они таковыми не являются.
• ОВ, которые поневоле приходится оставлять на сайте, чтобы получить нужный результат. Например:
  • теги noindex. Они не валидны, но очень нужны и с этим приходится мириться.
  • хаки. Чтобы получить корректное отображение сайта в некоторых браузерах, иногда, приходится использовать хаки — код, который понимает только определенный браузер.
• Ошибки самого валидатора.
  Часто он не видит каких то тегов (например, закрывающих) и сообщает об ОВ там, где ее нет.

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

В сложных темах есть:

• WordPress функции (например the_category()), которые дают невалидный код.
• Вывод видео с видеохостингов, например, с YouTube, а в коде YouTube очень много ОВ, на которые ни вы, ни я не можем влиять.
• Кнопки социальных сетей, которые подключаются при помощи скриптов этих сетей и содержат ОВ.
• Правила CSS3 и HTML5, которые валидаторы старых версий считают ошибками.
  В то же время, валидаторы версий CSS3 и HTML5 считают ошибками старые правила :).
• Иногда, чтобы добиться корректного отображения в браузере Internet Explorer или старых версиях других браузеров приходится использовать, так называемые хаки — код, который понимает только определенный браузер, чтобы написать правила отображения сайта именно для этого браузера.

В итоге получить полностью валидный код можно только при верстке очень простых тем, т.е. тем, которые содержат минимальное количество функционала.
После окончания верстки любой своей темы я всегда проверяю ее валидатором и исправляю все ОВ, которые можно исправить без потери работоспособности темы.
Т.е., если стоит выбор между работающим функционалом и валидностью — я выбираю функционал.
Если вы верстаете свои темы, советую поступать так же.
С моей точки зрения (а также, точки зрения большинства верстальщиков) отношение к валидации html/CSS, как к истине в последней инстанции ошибочно. В обязательном порядке нужно исправлять только те ОВ, которые:
— мешают браузеру корректно отобразить страницу (незакрытые и неправильно вложенные теги).
— замедляют загрузку страницы (неправильно подключенные скрипты).
— можно исправить, не нарушая работоспособность темы.
Надеюсь, я ответила на все вопросы о валидации.

prodengiblog.ru

Используем CSS

В CSS существует четыре специальных псевдокласса, применимых к полям формы: :valid (валидное поле), :invalid (невалидное), :required (обязательное) и :optional (необязательное). Их можно использовать, чтобы добавлять некоторые — хотя и весьма ограниченные — подсказки пользователям, заполняющим форму.

Используя :valid и :invalid, мы можем показать пользователю, правильно ли заполнено поле по мере ввода.

Однако с этим способом связана одна проблема: стили применяются до того, как пользователь начнёт работу с формой. Поля, обязательные для заполнения, сразу подсветятся нам как :invalid, а необязательные — как :valid. Это значит, что пользователь, даже не приступив к заполнению формы, может сразу же получить негативную обратную связь. Не очень-то хорошо.

Стилизация состояний :required и :optional сама по себе не особо полезна, поскольку эта информация обычно указывается в подписях к полям формы. Однако мы можем объединить эти состояния с псевдоклассами :valid / :invalid и стилизовать их комбинации. Например, мы хотим показывать лишь положительный результат, когда валидно обязательное к заполнению поле.

Используем JavaScript

JavaScript даёт намного больше возможностей для улучшения работы пользователей с формами. Давайте рассмотрим в качестве примера три числовых поля, у каждого из которых установлен минимум в 10, максимум в 100 и шаг в 10 единиц.

Устанавливая атрибуты min, max и step, мы можем быть уверены в правильности значения только тогда, когда пользователь использует специальные контролы числового поля. Но что мешает пользователю ввести вручную некорректные данные? Вот что произойдёт, если он вставит 1, 12 и 123 в три поля и отправит форму:

В результате всё, что получит пользователь — это сообщение об ошибке для первого поля. Кроме того, в этом сообщении будет указано лишь одно несоответствие из двух требуемых. Такое поведение можно исправить, изменяя показываемые валидатором сообщения.

Добавляем несколько сообщений об ошибках в один тултип

Валидируя поля, браузер проверяет их по определённому списку потенциальных ошибок. В каждом поле содержится специальный объект validity, включающий в себя список булевых значений, характеризующих ту или иную проверку на валидность. Например, вот такой validity-объект будет у поля, когда пользователь введёт в него 1:

Примечание переводчика: Слово «mismatch» переводится как «несоответствие». Поэтому в значениях patternMismatch, stepMismatch и typeMismatch обратная логика: true — значение не удовлетворяет атрибуту, false — удовлетворяет.

По умолчанию браузер отобразит лишь одну ошибку. Что мы можем сделать, так это проверить все эти значения самостоятельно и, если найдутся ошибки, сохранить их. Как только мы сохраним все ошибки для одного поля, мы можем отобразить весь их список в виде специального сообщения об ошибке при помощи функции setCustomValidity().

Теперь при попытке отправить форму мы увидим вот это:

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

Это ограничение валидации, устанавливаемое браузером. Чтобы его побороть, нам нужно пойти другим путём.

Показываем все ошибки для всех полей.

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

Этого можно добиться какой-то парой дополнительных строчек в нашем коде:

Вот что происходит при клике на submit теперь:

Используем нестандартные проверки валидности

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

Так как мы уже проверяем все возможные ошибки вручную в нашей функции CustomValidation.prototype.checkValidity, мы можем просто-напросто добавить туда ещё несколько проверок.

htmlacademy.ru

Как проверить валидность кода сайта?

Для того, чтобы проверить код на предмет его структурированности и чистоты (валидности), следует воспользоваться одним из множества онлайн чекеров (валидаторов). На официальном сайте Консорциума Всемирной Паутины также можно проверить валидность кода сайта:

validator.w3.org на валидность HTML и jigsaw.w3.org/css-validator на валидность CSS.

Сервис validator.w3.org дает возможность проверить валидность языка разметки гипертекста сайта одним из трех предложенных способов:

1. Validate by URI — проверка валидности HTML по адресу веб-страницы;
2. Validate by File Upload — проверка валидности HTML загруженного документа;
3. Validate by Direct Input — проверка валидности фрагмента HTML-кода.

Для того, чтобы выбрать нужный способ проверки валидности кода, нужно всего лишь переключиться на соответствующую вкладку:

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

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

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

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

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

Влияет ли валидность кода на поисковое продвижение?

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

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

Несомненно, работать над ошибками в коде нужно, но и ошибки могут быть разные, не все могут привести к плохому ранжированию сайта, если у вас не +100500 и более ошибок, то это не повод для беспокойства! Исправьте те, которые вы (как хозяин своего сайта) считаете наиболее опасными. Это лично моё мнение и оно может не разделять мнение кого либо из читателей.

А вот что Google думает о валидности кода сайтов. Официальная позиция поисковика относительно влияния валидности кода на поисковую оптимизацию представлена в этом коротеньком видео.

babosik.ru

Для начала немного теории. Валидность HTML – это соответствие кодов html и каскадных таблиц стилей CSS неким стандартам, которые задает нам Консорциум Всемирной Паутины (W3C – World Wide Web Consortium). На производстве – ГОСТ, в русском языке – грамматика, а в интернете – валидность. Страницы сайта, прошедшего проверку на соответствие стандартам W3C будут правильно отображаться в современных браузерах, вырастет скорость загрузки и как следствие — маленький плюсик при ранжировании в поисковой выдаче.

Проверить валидность HTML кода сайта можно официальным валидатором стандарта W3C.

Здесь мы видим три вкладки проверки:

• Validate by URL – по URL адресу;
• Validate by File Upload – загруженного файла;
• Validate by Direct Input — непосредственно HTML кода страницы сайта.

Начните проверку по URL с главной страницы своего сайта (блога), а затем проверьте отдельные страницы, на которых вставлены какие-либо скрипты или блоки (голосование, различные сервисы, фотогалереи и т. д.).

Перед проверкой нажмите на кнопку «More Options» и выберите параметры отображения ошибок.

• Show Source – с выводом исходного (с ошибками) кода;
• Validate error pages – проверка страниц вывода ошибок (404 страница);
• Show Outline – вывод строки с ошибкой;
• Verbose Output — отображение заголовков, передаваемых сайтом браузеру: дата изменения документа, его размер и тип, параметры сервера;
• Clean up Markup with HTML Tidy – вывод правильного кода (по версии html Tidy), которым можно заменить неправильный. Полезная функция, должна здорово помочь при исправлении ошибок. По моим наблюдениям, работает только с мелкими ошибками – пропущена кавычка, не закрыт тег, и т. д.
• List messages Sequentially – вывод ошибок и предупреждений по порядку;
• Group Error Messages bu Type – вывод ошибок и предупреждений в группах по типу.

wordpress-book.ru

Доктайп

Первой информацией которую мы пишем, является тип HTML-документа — доктайп.

Подумайте о доктайпе как о версии автомобиля на протяжении многих лет: Ford Fiesta, купленный в 1986 году, был Fiesta 2. Если вы покупаете его сегодня, то это Fiesta 7.

Раньше сосуществовало несколько версий HTML (XHTML и HTML 4.01 были конкурирующими стандартами). В настоящее время нормой является HTML5.

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

<!DOCTYPE html>

Вот и всё. Просто установите и забудьте об этом.

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

Элемент <html>

Помимо строки с доктайпом, весь ваш HTML-документ должен располагаться внутри элемента <html>:

<!DOCTYPE html>  <html>   <!-- Здесь остальная часть вашего кода HTML -->  </html>

<html> технически является предком всех элементов HTML.

<head>

Как атрибуты несут дополнительную информацию для элемента HTML, так и элемент <head> несёт дополнительную информацию для всей веб-страницы.

Например, заголовок страницы (отображается на вкладке) находится в <head>:

<head>   <title>Мой сказочный блог</title>  </head>

Следующие элементы HTML могут появляться в <head> и только в <head>:

• <link>
• <meta>
• <style>

<body>

В то время как <head> содержит только метаданные, не предназначенные для отображения вообще (за исключением <title>), то элемент <body> это место, где мы пишем всё наше содержимое. Всё внутри <body> будет отображаться в окне браузера.

Полностью валидный HTML-документ

Объединив все эти требования, мы можем написать простой и валидный HTML-документ:

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>MarkSheet</title>   <meta name="description" content="Простое руководство по HTML">   </head>   <body>   <p>Привет, мир!</p>   </body>  </html>

Если вы просмотрите этот пример в браузере, то увидите, что:

• «MarkSheet» написано на вкладке браузера;
• «Привет, мир!» — это единственный текст, отображаемый в окне, потому что это единственное содержимое <body>.

W3C предлагает Markup Validation Service для проверки любого HTML-документа на наличие ошибок и предупреждений.

Перейти к заданиям

webref.ru