HTML Обучалка.

Теги

HTML документы представляют собой обыкновенный текст. Они могут быть написаны в любом текстовом редакторе, который позволяет сохранять содержимое как простой текст, например Notepad, Notepad++ или Sublime, но большая часть веб-разработчиков предпочитает использовать специализированные редакторы, которые подсвечивают синтаксис и показывают DOM. Теги могут быть написаны как в верхнем регистре так и в нижнем, но W3C (глобальный консорциум, который занимается поддержкой HTML-стандарта) рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).

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

Простой пример:

<p>This is text within a paragraph.</p>
В приведённом примере есть открывающий тег и закрывающий тег. Закрывающий тег такой же как и открывающий с одним отличием, он содержит символ слэш сразу после знака менее-чем "</p>". Большинство элементов в HTML требуют оба, и закрывающий и открывающий теги. Открывающие и закрывающие теги требуют правильного, иерархического вложения - закрывающие теги должны идти в обратном порядке по отношению к открывающим. Правильный порядок вложения тегов следует соблюдать, чтобы писать валидный html-код.

Далее пример валидного кода:

<em>I <strong>really</strong> mean that</em>.
А здесь приведён пример неверного вложения тегов:

Invalid: <em>I <strong>really</em> mean that</strong>.
Заметьте, что в валидном примере закрывающий тег вложенного элемента расположен перед закрывающим тегом элемента, в который он вложен.

До появления HTML5 с его чёткими правилами парсирования HTML документов, браузеры интерпретировали невалидный код каждый по своему и поэтому результат мог выглядеть по разному. Браузеры прощали веб-разработчикам их ошибки, но к сожалению не одинаково и поэтому в случае невалидного кода результат был непредсказуемым. Теперь все браузеры начиная с Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18, или Safari 5 следуют стандарту, определяющему единый набор правил парсинга невалидного html кода. Поэтому при парсинге невалидного кода все современные браузеры построят одинковое дерево DOM элементов.

Некоторые элементы не содержат текста или других вложенных элементов. Это пустые элементы, которым не нужен закрывающий тег. Например:

<img src="smileyface.jpg">
Пустые элементы в режиме XHTML обычно закрываются с помощью знака слэш перед закрывающей угловой скобкой тега

<img src="smileyface.jpg" />
В HTML этот слэш имеет значение, которое не реализовано в Firefox и поэтому не должен использоваться. Пустые элементы не должны закрываться в режиме HTML.