HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа.
Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет записан как:
Об HTML-атрибутах мы поговорим в следующем разделе.
Не все элементы требуют наличия конечного или закрывающего тега. Часто их называют пустые элементы или самозакрывающиеся элементы.
Разница между HTML-тегом и HTML-элементом
Технически, HTML-элемент — это набор начального тега, его атрибутов, конечного тега и всего, что расположено между ними. В то время как HTML-тег (открывающий или закрывающий) используется для обозначения начала или конца элемента, как вы можете видеть на иллюстрации выше.
Однако в общем использовании термины HTML-элемент и HTML-тег взаимозаменяемы, то есть тег является элементом, а элемент является тегом. Для простоты, мы будем использовать термины «тег» и «элемент» для обозначения одного и того же.
Нечувствительность к регистру в HTML-тегах и атрибутах
В HTML имена тегов и атрибутов не чувствительны к регистру (но большинство значений атрибутов к регистру чувствительны). Это означает, что тег <P> и тег <p> определяют в HTML одно и тоже — абзац.
Но в XHTML теги чувствительны к регистру и тег <P> отличается от тега <p>.
<p>Это абзац.</p>
<P>Это также правильный абзац.</P>Мы рекомендуем использовать строчные буквы для тегов и атрубутов в HTML, тем самым вы делаете свой документ более совместимым для будущих версий.
Пустые HTML-элементы
Пустые элементы (также называемые самозакрывающимися) не являются контейнерными тегами — это означает, что вы не можете писать <hr>некоторый контент</hr> или <br>некоторый контент</br>.
Типичным примером пустого элемента является элемент <br>, представляющий разрыв строки. Некоторые другие общие пустые элементы <img>, <input>, <link>, <meta>, <hr> и т.д.
<p>Этот абзац содержит разрыв строки.</p>
<img src="images/sky.jpg" alt="Cloudy Sky">
<input type="text" name="username">В HTML самозакрывающийся элемент записывается просто как <br>. В XHTML для самозакрывающегося элемента требуются пробел и косая черта, например <br />.
Вложенные HTML-элементы
Большинство HTML-элементов могут содержать любое количество дополнительных элементов, которые, в свою очередь, могут состоять из тегов, атрибутов, содержимого и других элементов.
В следующем примере показаны некоторые элементы, вложенные в элемент <p>.
<p>Это какой-то <b>жирный</b> текст.</p>
<p>Это какой-то <em>наклонный</em> текст.</p>
<p>Это какой-то <mark>выделеный</mark> текст.</p>Размещение одного элемента внутри другого называется вложением. Вложенный элемент, также называемый дочерним элементом, в свою очередь может быть родительским, если в него вложены другие элементы.
HTML-теги должны быть вложены в правильном порядке. Они должны быть закрыты в обратном порядке их определения, это означает, что последний открытый тег должен быть закрыт первым.
<p><strong>Эти теги вложены правильно.</strong></p>
<p><strong>Эти теги вложены не правильно.</p></strong>Написание комментариев в HTML
Комментарии обычно добавляются с целью облегчить понимание исходного кода. Это может помочь другому разработчику (или вам в будущем при редактировании исходного кода) понять, что вы пытались сделать с HTML-разметкой. Комментарии не отображаются в браузере.
Комментарий HTML начинается с <!-- и заканчивается -->, как показано в примере ниже:
<!-- Это HTML-комментарий -->
<!-- Это многострочный HTML-комментарий
который охватывает более чем одну строку -->
<p>Это нормальный кусок текста.</p>Вы также можете закомментировать часть вашего HTML-кода, например, для целей отладки, как показано здесь:
<!-- Скрытое изображение для тестирования
<img src="images/smiley.png" alt="Smiley">
-->Типы HTML-элементов
HTML-элементы могут быть разделены на две отдельные: блочные элементы и строчные элементы. Первые составляют структуру документа, а вторые — содержимое блока.
Блочные элементы занимают 100% доступной ширины, и они отображается с разрывом строки до и после. Строчные элементы занимают столько места, сколько им нужно и не разрывают строку.
Наиболее часто используемыми блочными элементами являются <div>, <p>, <h1> - <h6>, <form>, <ol>, <ul>, <li>, и т.д.; часто используемыми строчными элементами являются <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button> и т.д.
Подробнее об этих элементах вы поговорим в следующих разделах.
Блочные элементы не должны размещаться внутри строчных элементов. Например, элемент <p> не следует размещать внутри элемента <b>.
