HTML-элементы
Узнайте, что такое HTML-элементы: парные и пустые (void), блочные и строчные, как их вкладывать — с запускаемыми примерами.
Элементы — это основа языка разметки гипертекста (HTML). Каждый HTML-документ состоит из элементов, которые задаются с помощью тегов.
HTML-элементы и HTML-теги часто путают. Теги служат для открытия и закрытия объекта, тогда как элемент включает в себя и теги, и их содержимое. Рассмотрим пример с тегом <h1>: <h1> Заголовок документа </h1> — это элемент, а <h1>, </h1> — теги.
Атрибуты элемента также записываются внутри его открывающего тега — подробнее о том, как они добавляют дополнительную информацию, см. в разделе HTML-атрибуты.
Типы HTML-элементов
HTML-элементы бывают двух видов: парные элементы и пустые (void) элементы.
Парный элемент имеет открывающий тег (<tag>) и соответствующий закрывающий тег (</tag>), а содержимое элемента находится между ними. Например, <p>Hello</p> состоит из открывающего тега <p>, текста Hello и закрывающего тега </p>.
Не забывайте закрывающий тег! Хотя некоторые HTML-элементы отображаются корректно даже без закрывающего тега, не полагайтесь на это — это может привести к непредвиденным результатам или ошибкам.
Пример парных HTML-элементов:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p>The second paragraph, <br /> where line break is inserted </p>
</body>
</html>В приведённом примере мы использовали 4 парных элемента:
- элемент
<html>, который включает все остальные HTML-элементы веб-страницы, - элемент
<body>, содержащий тело веб-страницы, - элемент
<p>, который определяет абзац, - элемент
<h1>, содержащий заголовок веб-страницы.
Мы также использовали пустой тег <br> для вставки перевода строки.
Пустые HTML-элементы
Пустые элементы (их также называют void-элементами) не имеют содержимого и, следовательно, закрывающего тега. Хороший пример — элемент <br>, который вставляет перевод строки. В XHTML пустые элементы «самозакрываются» в открывающем теге: <br/>.
Пустые элементы в HTML: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> и <wbr>.
Старый элемент <keygen> тоже был пустым, однако он был удалён из стандарта HTML и больше не должен использоваться.
Слово «пустой» означает лишь отсутствие содержимого — оно ничего не говорит о макете. Некоторые пустые элементы являются блочными (например, <hr> рисует горизонтальную линию на всю ширину), другие — строчными (например, <br> и <img>).
Пример HTML-тега <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML <br> tag</h1>
<p>This tag <br /> defines a line break.</p>
</body>
</html>Блочные и строчные HTML-элементы
Для целей стилизации и вёрстки большинство HTML-элементов относятся к одной из двух категорий в зависимости от их значения display по умолчанию: блочные элементы и строчные элементы. Это поведение по умолчанию важно, поскольку оно управляет тремя вещами до написания какого-либо CSS:
- Поток: блочные элементы начинаются с новой строки и выстраиваются вертикально; строчные элементы располагаются рядом внутри строки текста.
- Ширина и блочная модель: блочный элемент занимает всю доступную ширину и учитывает
width,height, а также вертикальныеmargin/padding. Строчный элемент занимает лишь ширину своего содержимого и игнорируетwidth/heightи вертикальные отступы. - Вложенность: блочный элемент может содержать другие блочные и строчные элементы, но строчный элемент, как правило, должен содержать только другие строчные элементы (и текст), но не блочные.
Вы можете изменить категорию элемента по умолчанию с помощью CSS-свойства display, однако знание значений по умолчанию помогает предсказать, как будет выглядеть страница. Подробнее см. в разделе Блочные и строчные элементы HTML.
Блочные элементы структурируют основную часть веб-страницы, разделяя содержимое на логические блоки. Они всегда начинаются с новой строки, занимают всю доступную ширину, а перед ними и после них стоит разрыв строки.
Блочные элементы: <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> и <video>.
Все блочные элементы имеют открывающий и закрывающий теги.
Пример блочных HTML-элементов:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<footer>
<p>Author: W3docs team</p>
<p><a href="[email protected]">Send message to the author</a>.</p>
</footer>
</body>
</html>В примере мы использовали блочный элемент <footer> для определения подвала веб-страницы и его содержимого.
Строчные элементы используются для выделения части текста, придания ему определённой функции или смысла. Как правило, строчные элементы содержат одно слово или несколько слов. Они не вызывают перевода строки и не занимают всю ширину страницы — только место, ограниченное их содержимым. Строчные элементы обычно применяются внутри других HTML-элементов.
Строчные элементы: <a>, <abbr>, <b>, <bdo>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time> и <var>.
Элементы <acronym>, <big> и <tt> когда-то тоже были строчными, но теперь они устарели. Вместо <acronym> используйте <abbr>, а вместо <big> и <tt> — CSS.
Вложенные HTML-элементы
HTML-элементы могут содержать другие элементы, то есть быть вложенными. Например, если вы хотите выделить текст с особым акцентом и отобразить его жирным, можно использовать тег <strong>, вложенный в тег <p>.
Пример вложенных HTML-элементов:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Title of the document</h1>
<p>The first paragraph</p>
<p><strong>This part of the sentence</strong> has a strong emphasis and is displayed as bold.</p>
</body>
</html>HTML-теги должны быть «вложены» в правильном порядке: тег, открытый последним, всегда должен закрываться первым.
В нашем примере мы сначала закрыли тег <strong>, а затем тег <p>.