Основные конструкции HTML

На этой странице:

Данные и разметка

Документ HTML со­сто­ит из дан­ных и раз­мет­ки. Дан­ные (cha­rac­ter data) — это обыч­ный текст, ко­то­рый, как пра­ви­ло, ото­бра­жа­ет­ся не­по­средст­вен­но на веб-стра­ни­це. Раз­мет­ка (mark­up) — это управ­ля­ю­щие кон­стру­кции язы­ка HTML (на­при­мер: <body>, </h1>, <a href="index.html">). Раз­мет­ка не ото­бра­жа­ет­ся не­по­средст­вен­но на веб-стра­ни­це, но управ­ля­ет ото­бра­же­ни­ем дан­ных и дру­ги­ми ас­пек­та­ми струк­ту­ры, внеш­не­го ви­да и по­ве­де­ния веб-стра­ни­цы.

В докумен­те HTML мож­но вы­де­лить не­сколь­ко кон­струк­ций, иг­ра­ю­щих осо­бен­но важ­ную роль: тэ­ги, эле­мен­ты, ат­ри­бу­ты, под­ста­нов­ки, ком­ментарии.

Тэги

Тэг (tag) — это кон­струк­ция, со­сто­я­щая из ле­вой уг­ло­вой скоб­ки «<» (она же — знак «мень­ше»), со­от­ветст­ву­ю­щей ей (пáр­ной) пра­вой уг­ло­вой скоб­ки «>» (она же — знак «боль­ше») и все­го, что на­хо­дит­ся меж­ду ними.

Открываю­щий тэг (start-tag) — это тэг, ко­то­рый не со­дер­жит ко­сой чер­ты «/» не­по­средст­вен­но пос­ле ле­вой уг­ло­вой скоб­ки или не­по­средст­вен­но пе­ред пра­вой уг­ло­вой скоб­кой. На­при­мер, это от­кры­ва­ю­щие тэги:

<title>
<h1>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">(1)

Закрываю­щий тэг (end-tag) — это тэг, ко­то­рый со­дер­жит ко­сую чер­ту «/» не­по­средст­вен­но пос­ле ле­вой уг­ло­вой скоб­ки. На­при­мер, это за­кры­ва­ю­щие тэги:

</h1>
</body>

Тэг пустого эле­мен­та (empty-ele­ment tag, ино­гда го­во­рят «пус­той тэг») — это тэг, ко­то­рый со­дер­жит ко­сую чер­ту «/» не­по­средст­вен­но пе­ред пра­вой уг­ло­вой скоб­кой. На­при­мер, это тэ­ги пус­то­го элемента:

<br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />(2)

Для совмес­ти­мо­сти с не­ко­то­ры­ми бра­у­зе­ра­ми пе­ред ко­сой чер­той ре­ко­мен­ду­ет­ся ста­вить пробел.

Чтобы обо­зна­чить тэг (на­при­мер, в уст­ной ре­чи), ис­поль­зу­ют его имя (name) — сло­во, с ко­то­ро­го на­чи­на­ет­ся тэг. На­при­мер, сле­ду­ю­щие тэ­ги обо­зна­ча­ют­ся так:

<h1> — «открывающий тэг h1»;
</html> — «закрывающий тэг html»;
<link rel="stylesheet" type="text/css" href="index.css" media="all" /> — «тэг пустого элемента link».(3)

Элементы

Элемент (ele­ment) — это кон­струк­ция, со­сто­я­щая из от­кры­ва­ю­ще­го тэ­га, со­от­ветст­ву­ю­ще­го ему (пáр­но­го) за­кры­ва­ю­ще­го тэ­га и все­го, что на­хо­дит­ся меж­ду ни­ми (рис. 1). Всё, что на­хо­дит­ся меж­ду от­кры­ва­ю­щим и за­кры­ва­ю­щим тэ­га­ми, на­зы­ва­ет­ся со­дер­жа­ни­ем (con­tent) эле­мен­та. На­при­мер, это элемент:

<h1>Моя страница</h1>

Текст «Моя стра­ни­ца» — со­дер­жа­ние это­го эле­мента.

Рис. 1. Элемент HTML и его составляющие
Рис. 1.
Элемент HTML и его составляющие

Тэг пус­то­го эле­мен­та так­же об­ра­зу­ет эле­мент, ко­то­рый на­зы­ва­ет­ся пус­тым эле­мен­том (empty ele­ment) и не име­ет со­дер­жа­ния. На­при­мер, это пус­той элемент:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Если эле­мент A вхо­дит в со­дер­жа­ние эле­мен­та B, то эле­мент A на­зы­ва­ет­ся вло­жен­ным (nested) в эле­мент B. На­при­мер, эле­мент title вло­жен в эле­мент head, а эле­мент head вло­жен в эле­мент html.

Каждый эле­мент пред­став­ля­ет ка­кой-ли­бо ком­по­нент струк­ту­ры до­ку­мен­та HTML. На­при­мер, эле­мент h1 пред­став­ля­ет за­го­ло­вок пер­во­го уров­ня, эле­мент a пред­став­ля­ет ги­пер­ссыл­ку, эле­мент html пред­став­ля­ет весь до­ку­мент HTML.

Чтобы обо­зна­чить эле­мент (на­при­мер, в уст­ной ре­чи), ис­поль­зу­ют его тип (type) — имя тэ­гов это­го эле­мен­та. На­при­мер, го­во­рят: «эле­мент h1», «эле­мент link», «эле­мент html».

Атрибуты

Атрибут (att­ri­bute) — это кон­струк­ция, ко­то­рая мо­жет со­дер­жать­ся в от­кры­ва­ю­щем тэ­ге или в тэ­ге пус­то­го эле­мен­та и име­ет вид A="B", где A на­зы­ва­ет­ся име­нем (name) ат­ри­бу­та, а B — зна­че­ни­ем (value) ат­ри­бу­та (рис. 2). На­при­мер, это атрибут:

href="index.html"

Здесь href — имя это­го ат­ри­бу­та, index.html — его значение.

Рис. 2. Атрибут HTML и его составляющие
Рис. 2.
Атрибут HTML и его составляющие

У од­но­го эле­мен­та мо­жет быть не­сколь­ко ат­ри­бу­тов, как, на­при­мер, у эле­мен­тов html, meta и link в при­ме­рах (1) – (3). Ат­ри­бу­ты рас­по­ла­га­ют­ся друг за дру­гом в лю­бом по­ряд­ке и от­де­ля­ют­ся про­бе­ла­ми друг от дру­га и от име­ни тэга.

Атрибуты опи­сы­ва­ют раз­лич­ные ха­рак­те­рис­ти­ки эле­мен­тов. На­при­мер, ат­ри­бут xml:lang="ru" эле­мен­та html со­об­ща­ет, что текст до­ку­мен­та на­пи­сан на рус­ском язы­ке; ат­ри­бут href="index.html" эле­мен­та a со­об­ща­ет, что дан­ная ги­пер­ссыл­ка ве­дёт на ре­сурс index.html.

Чтобы обо­зна­чить ат­ри­бут (на­при­мер, в уст­ной ре­чи), ис­поль­зу­ют его имя. На­при­мер, го­во­рят: «ат­ри­бут href», «ат­ри­бут src», «ат­ри­бут id».

Подстановки

Подстанов­ки ис­поль­зу­ют­ся для то­го, что­бы по­мес­тить на веб-стра­ни­цу сим­во­лы, ко­то­рые не­воз­мож­но или не­це­ле­со­об­раз­но встав­лять в код не­по­средственно.

Подстановка (cha­rac­ter refe­rence) со­сто­ит из ам­пер­сан­да «&», ко­да или обо­зна­че­ния сим­во­ла и точ­ки с за­пя­той «;». Под­ста­нов­ки обя­за­тель­но ис­поль­зу­ют­ся для сим­во­лов «<» и «&»:

Символ Подстановка
<
&lt;
&
&amp;

В неко­то­рых слу­ча­ях так­же ис­поль­зу­ют­ся под­ста­нов­ки для сле­ду­ю­щих символов:

Символ Подстановка
>
&gt;
"
&quot;
'
&apos;

Вот при­ме­ры упот­реб­ле­ния под­становок:

Код HTML Веб-страница
Rhythm &amp; Blues
Rhythm & Blues
π<sup><var>e</var></sup> &lt; <var>e</var><sup>π</sup>
πe < eπ

Комментарии

Коммента­рий (com­ment) — это конст­рук­ция, со­сто­я­щая из по­сле­до­ва­тель­но­сти сим­во­лов «<!--», со­от­ветст­ву­ю­щей ей (пáр­ной) по­сле­до­ва­тель­но­сти «-->» и все­го, что на­хо­дит­ся меж­ду ни­ми. На­при­мер, это ком­ментарий:

<!-- Главная страница -->

Внутри ком­мен­та­рия не мо­жет быть двух де­фи­сов под­ряд: «--».

Коммента­рии не об­ра­ба­ты­ва­ют­ся бра­у­зе­ром и не ото­бра­жа­ют­ся на веб-стра­ни­це. Они ис­поль­зу­ют­ся для за­ме­ток раз­ра­бот­чи­ка или в тех­ни­чес­ких це­лях (на­при­мер, для со­кры­тия фраг­мен­тов ко­да при тес­ти­ровании).