Как показано на примере HTML-кода, помещенного ниже, он всегда начинается с . Для браузера появление этого элемента указывает на то, что ему следует отображать HTML-структуру:
<!DOCTYPE html>
<html>
<body>
<h1>Тут будет размещен заголовок</h1>
<p>А в этом месте будет первый абзац</p>
</body>
</html>
Представленный небольшой вариант простого HTML-кода, содержит несколько элементов, состоящих, в свою очередь, из таких тэгов как:
<body></body> — открывающий и закрывающий тэг, указывающий на начало и окончание той части страницы, в которой будет содержаться ее контент. На русский язык этот тэг переводится словом «тело»;
<h1></h1> — опять таки открывающий и закрывающий тэг, указывающий на начало и окончание заголовка. Всего таких тегов может быть 6, и отличаются они величиной шрифта — чем выше числовой порядок заголовка, тем меньшими буквами он будет отражаться. Вместе с тегом <p>, <h1> формирует структуру самого контента: в частности метки <p></p> определяют начало и конец абзацев текста.
Таким образом один за другим формируются разные элементы, которые впоследствии будут представлены на целевой странице. Как вы, наверное, уже поняли, для того, чтобы указать на закрытие определенного тэга, в HTML принято ставить слэш «/».
Для закрепления только что полученного навыка можно дописать еще несколько строчек кода. До этого мы оперировали в рамках «тела» контента, за которое отвечает тэг , но пока это самое тело у нас без «головы».
Исправить это досадное недоразумение можно добавив следующие строки:
<!DOCTYPE html>
<html>
<head>
<title>
Тут будет название всей страницы
</title>
</head>
<body>
<h1>Тут будет заголовок, написанный самым большим шрифтом</h1>
<p>А это — усовершенствованный, частично <strong>выделенный жирным шрифтом</strong>абзац.</p>
<h3>Тут будет тоже заголовок, но не такой заметный, как предыдущий — он будет выполнен более мелким шрифтом</h3>
<p>Еще один абзац для полноты картины.</p>
</body>
</html>
По сути, приведенный выше второй фрагмент HTML кода — это расширенный вариант первого:
появилось титульное название страницы, которое помещено между тэгами <title></title>, которые, в свою очередь формируют заглавную, а не контентную частью страницы, так как они размещены внутри тега <head></head>, а не <body></body&lgt;;
появился еще один заголовок более низкого порядка (он будет менее заметен), который будет размещен в рамках <h3></h3>;
преобразится часть текста в первом по порядку абзаце: фраза, заключенная в тэг <strong></strong> (на русский язык переводится «сильный»), будет выделена жирным.
Вот так довольно быстро происходит наращивание кода, интерпретируя который интернет-браузер понимает то, чего от него хочет добиться дизайнер и маркетолог.
