html.okpython.net
HTML и CSS для начинающих

HTML :: Виды элементов html-разметки

Вложенные и пустые html-элементы

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

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

Чтобы не путаться в понятиях, обратим внимание на следующее: если мы говорим, например, об элементе «head» (будем записывать их в кавычках), то имеется в виду элемент разметки, образованный парой тегов <head> и </head>, а не сам открывающий тег <head>.

Внимательно посмотрите на код нашей первой веб-страницы (пример №1). Заголовок документа и тело документа являются вложенными в элемент «html», образованный парой тегов <html> и </html>. В тоже время пустой элемент, образованный тегом <meta charset="utf-8">, и элемент «Комментарий» являются вложенными как в элемент «html», так и в заголовок документа. Однако это далеко не предел. Веб-страницы с большим объемом исходного кода могут содержать элементы значительно большего уровня вложенности. Например, в html-коде страницы регистрации нашего сайта уровень вложенности элементов достигает девяти или даже десяти. Поэтому, во избежание ошибок при интерпретации кода браузером, нужно внимательно отслеживать уровень вложенности элементов и следить за тем, чтобы при написании кода теги, которые образуют вложенные элементы, полностью находились между открывающим и закрывающим тегами внешнего элемента.

Основные категории html-элементов

Теперь давайте обратимся к официальной документации и посмотрим, на какие группы делятся html-элементы. Для этого воспользуемся переходом по ссылке здесь. В результате на открывшейся странице мы увидим описание некоторых из категорий, и сообщение о том, что описание остальных категорий можно посмотреть в других разделах. Мы также не будем перечислять их все, уделив немного внимания основным их них.

  • Метаданные (metadata content) предназначены для сообщения браузеру служебной информации. Их мы будем также называть служебными элементами.
  • Потоковые элементы (flow content) - это все элементы, которые содержатся в теле документа и в основном предназначены для обработки и форматирования информации, выводимой на экран пользователя.
  • Секционные элементы (sectioning content) представлены четырьмя элементами разметки, которые позволяют разделить документ на дополнительные логические блоки (секции): «article», «aside», «nav», «section».
  • Заголовки (heading content) используются, когда возникает необходимость как-то назвать часть текста (например, параграф или раздел) и выделить его относительную важность. Всего существует шесть заголовков HTML разного уровня, которые формируются парными тегами от <h1> до <h6>.
  • Элементы текстового содержимого (phrasing content) в основном предназначены для форматирования небольших фрагментов строк внутри абзацев и подобных структурных единиц.
  • Элементы внедрения содержимого (embedded content) отвечают за вставку в документ внешних объектов, например, рисунков или видеороликов.
  • Интерактивные элементы (interactive content) используются специально для взаимодействия с пользователем, например, кнопки, ссылки или поля ввода текста.
  • Корневые элементы (sectioning roots) предназначены для размещения в них остальных секционных элементов. С одним из них мы уже познакомились - это элемент «body», т.е. тело документа. Именно в нем располагаются секционные элементы и заголовки.
  • Элементы форм (form-associated elements) в основном используются в формах, которые мы будем рассматривать в отдельном параграфе.
  • Элементы вывода (palpable content) предназначены для вывода информации на экран.
  • Элементы скриптового содержимого (script-supporting elements) позволяют размещать в них скрипты.

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

Быстрый переход к другим страницам

▲
▼