HTML Основы. Элементы

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

Элементы HTML-кода. С чего состоит веб-страница?

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

<Начальный тег> Содержание размещается здесь ... </Конечный тег>

Элемент HTML - это всё от начального тега до конечного тега:

<p>My first paragraph.</p>
Начальный тег Содержание элемента Конечный тег
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br>    

Примечание: Элементы HTML без содержания называются пустыми элементами. Пустые элементы не имеют конечного тега, например элемент <br>, который указывает на разрыв строки (break – разрыв)

Вложенные элементы HTML

Элементы HTML могут быть вложенными (элементы могут содержать элементы). Все документы HTML состоят из вложенных элементов HTML.

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


Пример:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
Попробуйте сами »

Объяснение примера

Элемент <html> определяет весь документ (от HyperText Markup Language). Он имеет начальный тег <html> и конечный тег </html>. Содержание (контент) элемента - это другой элемент HTML (элемент <body>).

Пример:

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

Элемент <body> определяет тело документа (body - тело). Он имеет начальный тег <body> и конечный тег </body>. Содержание (контент) элемента - это два других элемента HTML (<h1> и <p>).

Пример:

<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>

Элемент <h1> определяет заголовок (сокращенно от heading - заголовок). Он имеет начальный тег <h1> и конечный тег </h1>. Содержание (контент) элемента: My First Heading.

Пример:

<h1>My First Heading</h1>

Элемент <p> определяет параграф (сокращенно от paragraph - абзац, параграф). Он имеет начальный тег <p> и конечный тег </p>. Содержание (контент) элемента: My first paragraph.

Пример:

<p>My first paragraph.</p>

Не забывайте конечный тег

Некоторые элементы HTML будут отображаться правильно, даже если вы забыли конечный тег:

Пример:

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>
Попробуйте сами »

Приведённый выше пример работает во всех браузерах, поскольку закрывающий тег считается необязательным.

Никогда не полагайтесь на это. Иначе это может привести к неожиданным результатам и / или ошибкам, если вы забудете конечный тег.

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

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

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

Пример:

<p>This is a <br> paragraph with a line break.</p>
Попробуйте сами »

Пустые элементы могут быть "закрыты" в начальном теге: <br />.

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

Используйте строчные теги

Теги HTML не чувствительны к регистру: <P> (в большом регистре) означает то же, что и <p> (в маленьком регистре).

Стандарт HTML5 не требует использования тегов в нижнем регистре, но W3C рекомендует нижний регистр для написания HTML-кода и требует нижнего регистра для более строгих типов документов, таких как XHTML.

Примечание: В W3Schools всегда используют теги нижнего регистра.