HTML элементы

В этой главе:

  • Синтаксис элемента

  • Пустые элементы

  • Вложенные элементы

  • Пробельные символы

  • Блочные и строчные элементы

Синтаксис элемента

Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML. Изображение ниже демонстрирует синтаксис элементов. Для большинства тегов синтаксис элементов будет выглядеть одинаково, за исключением одиночных тегов.

синтаксис html-элементов

Все элементы в HTML следуют одному формату:

  • Элемент начинается с открывающего тега.

  • Элемент заканчивается закрывающим тегом.

  • Содержимым элемента является все, что находится между открывающим и закрывающим тегами.

  • Некоторые элементы не имеют содержимого (пустые элементы).

  • Большинство элементов могут содержать атрибуты

Примечание: не забывайте в закрывающем теге ставить символ "/", он указывает браузеру, что ваш элемент закончился и что то, что будет написано после него, является уже другим элементом.

Пустые элементы

В HTML есть несколько элементов, которые не имеют закрывающего тега, например <img> или<br>. Такие элементы называются пустыми, потому что они не содержат в себе никакого содержимого и не имеют закрывающего тега.

Вложенные элементы

Все HTML-документы состоят из вложенных элементов. Большинство из них могут либо содержать в себе другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.

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

1
2
3
4
5
6
7
<html>
  <body>
 
    <p>Мой первый абзац</p>
 
  </body>
</html>

В этом примере элемент <p> вложен в элемент <body>, который, в свою очередь, вложен в элемент <html>.

Когда вы размещаете один элемент внутри другого, стоит быть внимательными и следить за тем, чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, следующий пример является неверным:

1
<p>Это <em>очень</p> интересно</em>

Здесь элемент <em> выходит за пределы элемента <p>:

Пример с неправильно вложенным элементом

Пример с правильной вложенностью:

1
<p>Это <em>очень</em> интересно</p>

Здесь элемент <em> правильно вложен - он находится полностью в элементе <p>:

Пример с правильно вложенным элементом

Пробельные символы

Браузер игнорирует большинство пробельных символов в HTML-коде, поэтому их можно использовать с пользой для себя. В примере, расположенном ниже, представлен код, в котором используются отступы и пробельные символы.

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>Заголовок</title>
  </head>
  <body>
 
    <h1>Мой первый заголовок</h1>
    <p>Мой первый абзац</p>
 
  </body>
</html>

Они добавлены для более удобного зрительного восприятия кода и удобства отслеживания вложенности элементов. Код примера можно было бы написать и в одну строку, но такой код будет менее удобен для чтения и понимания.

1
<html><head><title>Заголовок</title></head><body><h1>Мой первый заголовок</h1><p>Мой первый абзац</p></body></html>

Символы табуляции, перенос строки и пробелы в HTML-документе можно использовать в любом количестве для придания коду удобочитаемого вида. Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность и понимание кода.

Блочные и строчные элементы

Все HTML элементы делятся на две группы:

  • блочные (block)

  • строчные (inline)

Блочные элементы представляют собой большие строительные блоки вашей веб-страницы. При отображении браузер автоматически добавляет разрыв строки до и после блочного элемента, при этом он занимает всю доступную ширину (по умолчанию отображается на веб-странице в виде прямоугольника), а высота блочного элемента вычисляется браузером автоматически, исходя из объема его содержимого. Текст в блочных элементах по умолчанию выравнивается по левому краю.

Обычно блочные элементы используются, чтобы разделить содержимое веб-страницы на логические блоки (например: верхний колонтитул (шапка сайта), меню, блок с контентом, нижний колонтитул (footer) и др.). Блочные элементы нельзя вкладывать в строчные, исключением являются только ссылки и ячейки таблиц, внутри которых по стандарту HTML5 могут быть расположены блочные элементы.

Строчные элементы используются для разметки частей содержимого элементов. Ширина строчного элемента равна объему содержимого. В отличии от блочных элементов браузер не добавляет разрыв строки до и после строчного элемента, поэтому, если несколько строчных элементов идут подряд друг за другом, они располагаются на одной строке и переносятся на другую строку при необходимости. В большинстве случаев внутрь строчных элементов допустимо помещать другие строчные элементы, вставлять блочные элементы внутрь строчных запрещено.

блочные и строчные элементы