Вернуться ко всем урокам
html
Типы тегов
HTML
Обновлено
18.08.2023
Просмотров
382
Время прочтения
10 мин.
Сложность
Разделить теги можно по различным критериям. Нет никакого универсального атрибута или правила, по которому можно было бы абсолютно и безоговорочно поделить теги на группы. К тому же всегда стоит учесть обстоятельство, что веб и технологии постоянно развиваются, добавляются новые свойства и стандарты и т.д. Поэтому ответ на вопрос: «Какие бывают типы тегов?» не может быть однозначным и требует уточнения. Мы расскажем об основных классификациях, используемых в практической веб-разработке. Для понимания документации и общения с другими разработчиками этого будет более, чем достаточно.
Теги верхнего уровня.
Мы уже немного об этом говорили в прежних уроках. Это теги, которые являются основой html документа и стоят в самой вершине его иерархии. Это <!DOCTYPE>,<html>,<head>,<body>, а также комментарии <!— комментарий —>. Они не могут быть вложены в другие теги, а также подчиняются особенным правилам, которые не содержат исключений. В предыдущем уроке мы определили, что <!DOCTYPE> это всегда первый тег, <html> всегда второй. Внутри <html> могут находиться только теги <head> и <body>. Всё, что окажется вне этих тегов (кроме комментариев, которые никак не интерпретируются браузером, хотя и видны в разметке), будет перемещено внутрь них. Поэтому мы можем выделить две группы — теги верхнего уровня <!DOCTYPE>,<html>,<head>,<body>,<!— комментарий —> и все остальные.
Парные и одиночные.
Об этом мы уже тоже немного поговорили — в зависимости от требований синтаксиса теги могут иметь или не иметь закрывающую часть. Например, теги <div>,<p>,<span>,<h1> должны закрываться всегда, а вот <img>,<br>,<source> являются одиночными и не имеют закрывающей части. В случае, если вы напишите закрывающую часть, браузер сам исправит разметку на валидную. Таким образом мы вновь можем выделить две различные группы тегов — парные и одиночные.
Стоит отметить, что у одиночных тегов есть ещё один синтаксис, о котором мы ещё не говорили. Это синтаксис одиночного закрывающегося тега:
<br />
<img />
Вы наверняка встретите такой синтаксис описания тегов, однако это ровным счётом ничего не меняет. Тег всё равно остаётся одиночным, хотя и приобретает закрывающий слэш.
Блочные и строчные
По умолчанию многие теги обладают собственным стилем отображения, который предустановлен для них браузером. Так например текстовые параграфы <p> в браузере Google Chrome будут иметь отступы сверху и снизу.
Строка «user agent stylesheet», которую вы видите на скриншоте, означает, что эти стилевые свойства получены тегом из стандартных настроек браузера. Аналогичным образом все теги обладают свойством «отображения», или display, которое определяет, как будет тег отображаться — как блочный, или как строчный. Всё это уже чистой воды CSS, поэтому в подробности сейчас мы вдаваться не будем. Речь об этом пойдёт в уроке CSS по блочной модели, а пока что достаточно просто запомнить, что теги могут быть блочными и строчными в зависимости от значения предопределённого в браузере свойства display. К блочным относятся, например, <section>,<div>,<h1>, а к строчным <span>,<input>,<img>.
Интерактивные теги
Это весьма своеобразная группа, в которую можно в зависимости от условий включать или исключать некоторые элементы. Интерактивными называются элементы, которые подразумевают исполнение каких-либо действий при взаимодействии с ними. Речь идёт например о ссылках (тег <a>) — по клику на ссылку мы должны переместиться куда-либо внутри страницы (в таком случае ссылка называется якорем), или перейти на другую страницу сайта. Соответственно мы можем назвать ссылку интерактивным элементом. Другой пример — тег <video>. Часто он имеет элементы управления (атрибут «controls»), клик по которым может запускать\останавливать видео, отключать звук и т.д. Это означает, что <video> в подобном случае также интерактивный элемент. Мы не будем перечислять в данном уроке все теги, которые являются интерактивными. Сейчас вам необходимо понять суть понятия «интерактивный» — это тот элемент, с которым пользователь может взаимодействовать. Подробнее о каждом из этих тегов будет рассказано далее, и вы во всём разберётесь. Пока что мы просто выделяем ещё одну классификацию — интерактивные теги и не интерактивные.
При работе с интерактивными элементами следует соблюдать несложное, но важное правило: мы должны избегать избыточной интерактивности. Под этим подразумевается вложение одних интерактивных тегов внутрь других, например вложение ссылки <a> внутрь кнопки <button>, или вложение видео <video> внутрь ссылки, и так далее. Браузерные события по умолчанию «всплывают», т.е. элемент, на который мы кликнули, инициирует событие клика на всех своих родителях. Если говорить проще — куда бы мы ни кликнули, событие клика всегда получит <body>, потому что он является родителем для любого отображаемого тега на веб странице. Это справедливо и для всех других элементов: если у нас кнопка вложена внутрь ссылки, то по клику на кнопку мы автоматически кликаем и на ссылку. В таком случае браузер обрабатывает событие для кнопки, а потом ещё и событие для ссылки, вызывая тем самым избыточную интерактивность, которая раздражает пользователя и которой мы должны избегать.
Теги по вложенности
Это не совсем официальная классификация, однако она очень широко распространена, и ежедневно разработчики в своей деятельности оперируют такими понятиями, как «родительский», «дочерний» и пр.
Родительским называется любой тег, в котором находится любой другой тег. Но не просто находится, а находится на первом уровне, т.е. являясь напрямую его «ребёнком».
Так, в примере ниже <div> является родительским, а <p> — дочерним.
<div>
<p>Большо́й Москворе́цкий мост — один из мостов через Москву-реку.
Соединяет <a href="#">Васильевский Спуск</a>, улицу Варварку с улицей
Большой Ордынкой. </p>
</div>
Справедливо и следующее: тег <p> является родительским по отношению к <a>.
Вместе с тем <div> не является родительским для <a>, поскольку они разделены не одним уровнем вложенности, а двумя. <div> в таком случае называется «предком», а тег <a> — «потомком», или вложенным тегом.
В следующем примере оба тега <p> будут дочерними по отношению к <div>. Оба тега <a> будут потомками <div>, и он будет их предком. Все теги, находящиеся
внутри <div>, будут вложенными.
<div>
<p>Большо́й Москворе́цкий мост — один из мостов через Москву-реку. Соединяет
<a href="#">Васильевский Спуск</a>, улицу Варварку с улицей Большой Ордынкой. </p>
<p>Продолжение моста — Малый Москворецкий мост через <a href="#">Водоотводный
канал</a>.
Длина с подходами — 554 м, ширина — 40 м, высота над уровнем реки — 14 м.
Трёхпролётный, монолитно-железобетонный.</p>
</div>
Ещё одно понятие — соседние теги, или «сиблинги» (с англ. sibling — брат или сестра). Так называются теги, имеющие общего родителя, в нашем примере это оба <p>.
Теги по назначению
Возможно, самой важной классификацией тегов является их разделение по роли, которую они выполняют на веб странице. В нашем учебнике мы будем рассказывать о тегах, сгруппировав их именно таким образом. Мы можем выделить, например, теги с метаданными, такие как <title>,<meta>,<base>, теги разделения контента, такие как <section>,<main>,<header> и пр., теги с текстовым содержимым, такие как <p>,<span>,<blockquote> и т.д.
Тест к уроку
html
Основы HTML, синтаксис
25
Проверьте ваши знания структуры HTML документа, основных тегов, синтаксиса языка HTML
