Урок 4. Элементы HTML

Элемент HTML обычно состоит из открывающего тега и закрывающего тега с содержимым, вставленным между ними, например:

<имя тега> Содержимое идет здесь … </ имя тега>

Элемент  HTML — это все: от начального тега до конечного тега, например:

<p> Мой первый абзац. </ p>

Но бывают и пустые элементы HTML – это теги, не имеющие содержимого, например тег <br>.

Открывающий тег Содержимое Закрывающий тег
<h1> Мой первый заголовок </h1>
<p> Мой первый параграф </p>
<br>

HTML элементы могут быть вложенными.

Все HTML документы состоят из вложенных элементов HTML.

Этот пример содержит четыре элемента HTML:

Попробовать самостоятельно!

Элемент <html> определяет весь документ.

У него есть открывающий тег <html> и закрывающий тег </ html>.

Содержимое элемента — это еще один элемент HTML (элемент <body> — вложенный элемент).

Элемент <body> определяет тело документа.

У него есть открывающий тег <body> и закрывающий  тег </ body>.

Содержимое элемента — это два других элемента HTML ( <h1> и <p> — вложенных ).

Элемент <h1> определяет заголовок.

Он имеет открывающий тег <h1> и закрывающий тег </ h1>.

Содержимое элемента: Мой первый заголовок.

Элемент <p> определяет абзац.

Он имеет открывающий тег <p> и закрывающий  тег </ p>.

Содержимое элемента: Мой первый абзац.

Не забывайте закрывающие теги. Некоторые элементы будут работать без закрывающих тегов корректно.

Пример:

Попробовать самому!

Данный код будет отображаться в браузерах корректно. Но далеко не все теги будут отображаться в браузерах корректно без закрытых тегов!

Пустые элементы HTML

Элементы HTML без содержимого называются пустыми элементами.

<br> — пустой элемент без закрывающего тега (тэг  <br> определяет разрыв строки).

Пустые элементы могут быть «закрыты» в открывающемся теге следующим образом: <br />.

HTML5 не требует, чтобы пустые элементы были закрыты. Но если вы хотите получить более строгую проверку, или если вам нужно сделать ваш документ доступным для чтения парсерами XML, вы должны закрыть все элементы HTML правильно.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *