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>.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.