HTML элементы
Элемент — это основа языка HTML. Он является основой построения сайта и может описывать документ в целом или способ форматирования текста. Все, что вы захотите создать на вашей веб-странице, будет сделано с помощью элементов.
HTML обеспечивает структуру документа, состоящего из всех отдельных HTML-элементов на странице.
HTML также обеспечивает семантику HTML документа. Элементы, как правило, используются для конкретного назначения. Например, уровень заголовка <h1> является более важным, чем уровень <h2>.
Элементы включают в себя всё, что находится между парными тегами элемента, включая сами теги. Например, элемент "<p>" обозначает параграф; элемент "<img>" обозначает изображение.
Примеры HTML элементов:
Начальный тег | Содержимое элемента | Конечный тег |
---|---|---|
<p> | Это содержание абзаца. | </p> |
<h1> | Это заголовок. | </h1> |
<div> | Это содержимое блока. | </div> |
<br /> |
Здесь <p>....</p> является HTML элементом, <h1>...</h1> тоже HTML элемент.
Элементы представляют собой контейнеры. Вы помещаете текст внутрь контейнера. Если применяются теги <em> и </em>, создается контейнер, задающий курсивный шрифт для текста, находящегося внутри контейнера. Создавая веб-страницы, вы будете использовать контейнеры для хранения различных фрагментов текста. Если вы будете воспринимать элементы таким образом, тогда вам легче будет не пропустить закрывающий тег.
Существует два вида элементов: элементы-контейнеры и пустые элементы.
Элементы, которые представляют из себя контейнеры — это самый распространенный вид элементов. Элементы-контейнеры задают форматирование контента, находящегося между от-крывающим и закрывающим тегами.
Пустые элементы не задают и не отменяют форматирование. Такие элементы вставляют на страницу какой-либо объект, например горизонтальную черту (элемент <hr>).
Пустые элементы не имеют парных тегов и в них нельзя вставить текст, как в элементы-контейнеры.
Вы можете встретить пустые элементы, в которых включен символ слэша перед закрывающей скобкой и без него, например <br/> или <br>. Форма записи пустых элементов с включением слэша называется синтаксисом пустых элементов, который был официальной частью языка XHTML.
Например:
<img src="smile.jpg" alt="Смайлик">
Пустые элементы в режиме XHTML обычно закрываются с помощью знака слэш перед закрывающей угловой скобкой тега
<img src="smile.jpg" alt="Смайлик"/>
В HTML5 применение синтаксиса пустых элементов необязательно и разрешается использовать тот же синтаксис, что и в открывающих тегах (т. е. без слеша). Таким образом пустые элементы не обязательно закрывать в режиме HTML.
Вложенные элементы
Большинство элементов могут быть вложены друг в друга (т.е. в содержимом одного элемента может располагаться другой элемент).
Например вложив элемент <i> в элемент <b> Вы сможете сделать текст одновременно жирным и курсивным.
Большинство элементов в HTML требуют оба, и закрывающий и открывающий теги. Открывающие и закрывающие теги требуют правильного, иерархического вложения — закрывающие теги должны идти в обратном порядке по отношению к открывающим. Правильный порядок вложения тегов следует соблюдать, чтобы писать валидный html-код.Далее пример валидного кода:
<em>Это <strong>важное</strong> правило</em>
А здесь приведён пример неверного вложения тегов:
Invalid: <em>Это <strong>важное</em> правило</strong>
Заметьте, что в валидном примере закрывающий тег вложенного элемента расположен перед закрывающим тегом элемента, в который он вложен. |
Язык HTML предоставляет много вариантов вложения элементов, например, можно вложить один элемент в другой, а затем эту комбинацию вложить в еще один элемент и т. д. до беско-нечности.