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

Похожие посты

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Руководство по атрибутам событий в HTML5

Следующие атрибуты событий могут быть применены к большинству HTML-элементов для выполнения JavaScript. Эти атрибуты могут быть указаны для всех элементов, за некоторыми исключениями, где они не имеют смысла, например, к элементам в разделе <head>, таких как <title>, <base>, <link>. События Window События, связанные с объектом window (относится к тегу <body>): Атрибут Значение Описание onafterprint script…

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

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

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

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