Я часто в своих уроках делал такие утверждения, как – «один тэг должен располагаться внутри другого», «у тэга 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 , в итоге решило проблему одинакового отображения страницы во всех браузерах.

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

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

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

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

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег создаст кнопку с текстом Кнопка внутри.

Теги могут вкладываться друг в друга, например,

Текст

Текст

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

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

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

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

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

Обязательным тегом раздела является тег . Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

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

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

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

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

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

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

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

Заголовок

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

Untitled Document

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

Повторяется тег, который в коде должен быть только один. К таким тегам относится , , и .

Заголовок

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

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

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

Проверьте тег и добавьте недостающие атрибуты.

Атрибут тега не содержит обязательное значение или оно написано с синтаксической ошибкой.

Проверьте атрибуты тега и добавьте недостающие значения.

Атрибут содержит некорректное значение. Ошибка проявляется в тех случаях, когда в значении вместо текста пишется число и наоборот. Так, атрибуты id и name должны начинаться с символа () и могут содержать цифры (), дефис (-), подчеркивание (_), двоеточие (:) и точку (.). Значение ширины и высоты в атрибутах тегов не должно содержать ничего, кроме цифр () и процентов (%).

Слой 1

Слой 2

Проверьте атрибут тега и измените его значение.

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

Пример текста

Для случая 0

Для случая 0 Решение

Вставьте отсутствующую закрывающую скобку.
Замените < на < .

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

Список всех атрибутов, входящих в спецификацию HTML приведен по адресу http://www.w3.org/TR/html4/index/attributes.html

Список наиболее характерных атрибутов тегов приведен в табл. 14.1.

Значение атрибута не входит в спецификацию HTML и является специфичным для браузера Internet Explorer или другого. Например, значение align="absmiddle" тега недопустимо.

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

Атрибут применяется в теге больше одного раза.

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

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

Добавьте парную кавычку к значению атрибута.

Тег содержит атрибут, в котором задано неверное количество кавычек.

Решение

Добавьте или удалите одну из кавычек.

Ошибка возникает, когда значения атрибутов id и name не совпадают между собой, что приводит к конфликту при обращении к свойствам элемента через скрипты.