Основой языка гипертекстовой разметки является является элемент. HTML элементы определяют структуру HTML документа. Для описания элементов используются HTML теги.

Элементы и теги часто путают. Tеги служат для того, чтобы открывать и закрывать объект, а элемент включает в себя и теги, и их содержимое. Например <h1> Заголовок документа </h1> - элемент, а <h1>, </h1> - теги.

Типы элементов

HTML элементы бывают парные и одинарные. Содержимое парного элемента пишется между открывающим <> и закрывающим </> тегами.

Не забывайте закрывающий тег. Хотя некоторые элементы HTML отображаются правильно, даже без закрывающего тега, не полагайтесь на это. Это может привести к неожиданным результатам или ошибкам.

В одинарных элементах содержимого нет, поэтому их также называют пустыми. Закрывающего тега в этих элементах также нет. К одинарным элементам относится <br/> .

Одинарными элементами HTML являются <area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> и <wbr>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок веб-страницы</title>
  </head>
  <body>
    <h1>Заголовок страницы</h1>
    <p>Первый абзац </p>
    <p>Второй абзац <br/> с переводом строки в тексте.</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>.

У всех блочных элементов есть открывающие и закрывающие теги.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок веб-страницы</title>
  </head>
  <body>
    <footer>
      <p>Автор: Команда W3docs</p>
      <p><a href="[email protected]">Отправить письмо автору</a>.</p>
    </footer>
  </body>
</html>

Результат

Команда W3docs

В этом примере мы использовали блочные элементы <footer> для определения нижнего колонтитула веб-страницы и ее содержимого.

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

К строчным относятся элементы <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <buttom>, <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>.

Пример

<p><strong>Эта часть предложения</strong> выделена жирным шрифтом.</p>
Когда вы вкладываете теги в другие элементы с тегами, то закрывайте теги в последовательности, обратной той, в которой вы их открывали.

В нашем примере, первым мы должны закрыть тег <strong>, а потом тег <p>.

Практикуйте свои знания

Какие из следующих элементов используются в HTML?
Считаете ли это полезным?