Лекции
September 12, 2021

Язык разметки HTML: основы

Введение

HTML, по сути, самый классический язык (есть так же markdown и прочие языки разметки) для создания разметки сайта, и почти единственный язык разметки, который нативно работает в браузере (есть ещё XML, SHTML и другие вариации, которые нас в рамках данного курса не интересуют).

Декларативность

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

Например, если мы хотим сделать текст <b>жирным</b>, мы буквально...

Либо так, что более семантично:

Например, если мы хотим сделать текст <strong>жирным</strong>, мы буквально...

Языковые конструкции

Основной и, по сути, единственной конструкцией в языке HTML являются теги. Именно с помощью них и их атрибутов строится вся разметка. Стандартными тегами, которые должен содержать в себе каждый HTML-документ являются теги: doctype, html, head, body. Идут они ровно в таком порядке. Давайте посмотрим как это выглядит:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

В теге doctype мы сообщаем браузеру тип документа, который он получает. Чтобы браузер понимал, как он может с этим самым документом работать. Тег html является основной обёрткой всего нашего кода, именно в него и будут помещены все остальные теги. Тег head нужен для того, чтобы указать некую служебную информацию для обработки страницы, это могут быть стили, мета-теги, заголовок страницы, скрипты, фавикон и так далее. Тег body, в свою очередь, отвечает именно за тот контент, который вы сможете на странице увидеть. В него помещается вся вёрстка страницы.

Подробнее о тегах можно узнать здесь (перечислить их все нам целого курса не хватит). И вот небольшой пример, как можно с помощью HTML сверстать какой-то текст:

Атрибуты тегов в HTML

У каждого из тегов есть свой набор атрибутов. В основном, мы будем использовать такие атрибуты, как: class, id, name, title, type, placeholder.

С помощью атрибута class можно указать CSS-класс, стили которого применятся к этому элементу. Атрибут id так же может стать источником стилей из CSS, но так делать не рекомендуется, потому что в рамках CSS селектор по id сильнее, чем селектор по классу. В основном, атрибут id используется для якорей и более удобного получения элемента с помощью JS, кроме того атрибут label привязывается к элементу input именно через id. Этот атрибут является уникальным, и один id не может быть присвоен двум и более элементам в рамках одной страницы. Атрибут title используется для вывода подсказок при наведении на любой из элементов. Атрибуты name, placeholder и type, в основном, используются в тегах input и button. Атрибут type регламентирует тип вводимого контента (например, тип email скажет браузеру, что вводимые данные необходимо валидировать как электронный адрес). Именно значение атрибута name в итоге будет являться ключём для значения (берущегося из атрибута value) в объекте формы, которая будет отправляться на бэкенд по адресу, указанному в атрибуте action у тега form.

Живой пример по атрибутам:

Ссылка на презентацию: https://docs.google.com/presentation/d/1aGx_L9KO1T50vMapIcewjgbvB2n-cOmtmgED8h-yqa4/edit?usp=sharing