HTML-элементы
Элементы — это основа HyperText Markup Language (HTML). Каждый HTML-документ состоит из элементов, которые задаются с помощью тегов.
HTML-элементы и HTML-теги часто путают. Теги используются для открытия и закрытия объекта, тогда как элемент включает в себя и теги, и его содержимое. Рассмотрим пример с тегом <h1>: <h1> Заголовок документа </h1> — это элемент, а <h1>, </h1> — это теги.
Типы HTML-элементов
HTML-элементы могут быть парными или пустыми. Парные элементы имеют открывающий и закрывающий теги (</>), а содержимое элемента размещается между ними.
TIP
Не забывайте о закрывающем теге! Хотя некоторые HTML-элементы отображаются корректно даже без закрывающего тега, не стоит на это полагаться. Это может привести к неожиданным результатам или ошибкам.
Пустые элементы не имеют закрывающих тегов. В XHTML пустые элементы «закрываются» в открывающем теге вот так: <br/> .
Пустые элементы в HTML: <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> и <wbr>.
Пример пустых HTML-элементов:
Пример с парными HTML-элементами|HTML Elements|W3Docs
<!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-элементы
В целях стилизации все 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-элементов:
Сообщение автору|Пример блочных элементов|HTML Elements|W3Docs
<!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>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt> и <var>.
Вложенные HTML-элементы
HTML-элементы могут содержать другие элементы, то есть быть вложенными. Например, если вы хотите придать тексту сильное выделение и указать браузеру отображать его полужирным, можно использовать тег <strong>, вложенный в тег <p>.
Пример вложенных HTML-элементов:
HTML Elements
<!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>TIP
HTML-теги должны быть «вложены» в правильном порядке, то есть тег, открытый последним, всегда закрывается следующим.
В нашем примере мы сначала закрыли тег <strong>, а затем тег <p>.
Закрывающий тег
В конце следует поставить закрывающий тег. Однако даже если вы забудете о нём, некоторые HTML-элементы всё равно будут отображаться корректно. Закрывающий тег считается необязательным, поэтому приведённый ниже пример будет работать во всех браузерах. Но не стоит на это полагаться. Если вы хотите избежать неожиданных ошибок, постарайтесь не забывать о закрывающем теге.
Пример, где закрывающий тег HTML отсутствует:
Пример, где закрывающий тег HTML отсутствует
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>HTML end tag </h1>
<p>We forgot to put the end tag.
</body>
</html>Пустые HTML-элементы
HTML-элементы, у которых нет содержимого, называются пустыми элементами. <br>, который определяет разрыв строки, — это пустой элемент, у которого нет закрывающего тега.
Пример тега HTML <br>:
Пример тега 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>Практика
What are some characteristics of HTML elements as described on the given webpage?