# 1. 2. Введение в HTML

Что такое язык HTML? Зачем он нужен? Из чего он состоит? Давайте разбираться.

HTML — это язык разметки. Он описывает не логику или поведение элементов на странице, а сами элементы — содержание страницы. Весь контент, который есть на странице, описывается с помощью элементов языка HTML.

#### Теги <a href="#tegi" id="tegi"></a>

Каждый элемент языка HTML называется тегом. Теги — это такие кирпичики, из которых строится страница. Они состоят из двух знаков «больше» и «меньше», между которыми находится имя тега.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/html-tags.jpg" alt="Примеры тегов"><figcaption><p>Примеры тегов</p></figcaption></figure>

Давайте рассмотрим виды тегов: они бывают парные, а бывают одиночные.

#### Парные теги <a href="#parnie-tegi" id="parnie-tegi"></a>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/pair-tags.jpg" alt="Парные теги"><figcaption><p>Парные теги</p></figcaption></figure>

#### Одиночные теги <a href="#odinochnie-tegi" id="odinochnie-tegi"></a>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/single-tags.jpg" alt="Одиночные теги"><figcaption><p>Одиночные теги</p></figcaption></figure>

Некоторые одиночные теги должны иметь дополнительные атрибуты, чтобы они имели смысл и работали. Самый простой пример — тег `img`, который обозначает изображение. У изображения должен быть адрес, чтобы браузер знал, откуда его скачать. Этот адрес хранится в соответствующем атрибуте тега.

Основная разница между одиночными и парными тегами в том, что у парных есть закрывающий тег, в котором перед именем тега ставится «обратный слеш». Раньше у одиночных тегов тоже ставился закрывающий слеш, сейчас это не требуется.

#### Правила вложенности <a href="#pravila-vlozhennosti" id="pravila-vlozhennosti"></a>

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/nest-tags.jpg" alt="Вложенные теги"><figcaption><p>Вложенные теги</p></figcaption></figure>

Есть и другие правила, которые касаются каких-то конкретных тегов. Например, есть тег `ul`, который обозначает неупорядоченный список. Внутри этого тега могут быть только теги `li` — элементы списка. А вот внутри тегов `li` могут быть другие теги.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/nest-errors.jpg" alt="Ошибочное использование тегов"><figcaption><p>Ошибочное использование тегов</p></figcaption></figure>

С правилами вложенности вы познакомитесь позже, постепенно изучая теги в течение курса и проверяя свой HTML-код в специальном сервисе — валидаторе. О нём мы поговорим позже.

#### Атрибуты тегов <a href="#atributi-tegov" id="atributi-tegov"></a>

Атрибуты — это дополнительные свойства тегов. Атрибуты пишутся внутри тега — рядом с именем тега внутри символов «больше» и «меньше».

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

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/tag-attributes.jpg" alt="Атрибуты"><figcaption><p>Атрибуты</p></figcaption></figure>

Атрибуты бывают обязательные и необязательные. Например, существует обязательный атрибут — `src`, который обозначает адрес картинки в теге. Самый популярный необязательный атрибут — `class`. Мы будем много использовать его.

Существуют атрибуты, которые не имеют значения. Они называются бинарными. Если такой атрибут есть у тега, это что-то означает, если нет атрибута — это тоже что-то означает. Например, атрибут `disabled`. Если он есть, то кнопка или поле ввода могут быть неактивны. И наоборот.

```
<input type="date" disabled class="input-date">
```

#### Простейшая страница <a href="#prosteishaya-stranitsa" id="prosteishaya-stranitsa"></a>

Теперь давайте посмотрим, как выглядит самая простая HTML-страница в самом минимальном варианте. Ниже вы видите код такой страницы. Давайте разберёмся, что в нём есть.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/simple-page.jpg" alt="Простейшая HTML-страница"><figcaption><p>Простейшая HTML-страница</p></figcaption></figure>

Самое первое, что вы видите, и самое первое, что ожидает прочитать браузер — это специальная конструкция (или даже инструкция), которая называется `DOCTYPE` или объявление типа документа.

Прописывая `DOCTYPE` в начале документа, вы декларируете, на какой версии языка HTML вы пишете этот документ. И дальше, в зависимости от того, какая версия языка используется, браузер по-разному может отрисовывать и обрабатывать страницу. `DOCTYPE` пробел `HTML` означает последнюю версию, в нашем случае это HTML5 — мажорная версия.

После определения типа документа идут те самые теги. Самый главный тег — `html`. В нём находятся все остальные HTML-элементы. В `html` есть две части, два тега: `head` и `body`. `head` — это условно «голова», а `body` — «тело». Зачем они нужны?

В `head` размещается служебная информация, которая нужна для того, чтобы влиять на всю страницу. Эту информацию могут использовать браузеры, поисковики или другие сервисы.

Например, браузер смотрит в `head` и видит какую-то кодировку. В зависимости от кодировки, указанной в теге `head`, он меняет отрисовку всей страницы. Если установить неправильную кодировку, то вместо русских символов вы увидите иероглифы.

Ещё пример: в теге `title` пишется заголовок, который отрисовывается у вас на вкладке в браузере.

Ещё в теге `head` можно подключать стили, которые влияют на отображение всего документа, скрипты, влияющие на поведение. Туда можно прописывать метаинформацию для поисковиков и так далее.

То есть `head` — это хранилище для метаинформации. Всё, что находится внутри `head`, не может отрисовываться на самой странице.

В `body` располагаются теги, которые могут отрисоваться на странице. То есть само содержимое. Тегов содержимого достаточно много и постепенно в течение курса вы с ними познакомитесь.

#### Страница сложнее <a href="#stranitsa-slozhnee" id="stranitsa-slozhnee"></a>

Посмотрите на более сложную страницу.

<figure><img src="https://up.htmlacademy.ru/assets/intensives/htmlcss/37/book/html/intro-html/complicated-page.jpg" alt="HTML-страница"><figcaption><p>HTML-страница</p></figcaption></figure>

Давайте подробнее разберём теги внутри `head`. Их два типа. Первый тип — это так называемая метаинформация, которую могут использовать браузеры, поисковики, какие-то другие сервисы.

Второй тип — это теги для подключения внешних ресурсов. Например, тег `link`. В частности, с помощью тега `link` мы подключаем стили. У него есть атрибут `rel`, который означает «отношение». То есть браузер интересуется: «Какое отношение этот ресурс (который вы с помощью `link` подключаете) имеет к этой странице?». И мы говорим: «Этот ресурс (который мы с помощью `link` подключаем) имеет такое отношение к этой странице, что это её стилевые файлы, товарищ Браузер». Он говорит: «Понятно, стили» — из атрибута `href` берёт адрес и скачивает этот стилевой файл, применяет стили и отрисовывает картинку сайта.

Тут у вас может сразу возникнуть вопрос: так, стоп, совсем недавно вы рассказывали про тег `img`, у которого есть атрибут `src`, который тоже обозначает адрес для скачивания картинки. А сейчас появился какой-то тег `link`, у него есть атрибут `href` и это тоже адрес. Почему там `src`, а здесь `href`? Так вышло исторически. У разработчиков спецификации получилось так, что у разных тегов появились разные атрибуты для указания адресов. Для ссылок — `href`, для картинок — `src`.
