Язык разметки HTML: основы
@davidobryakov
Что такое HTML?
HTML, по сути, самый классический язык (есть так же markdown и прочие языки разметки) для создания разметки сайта, и почти единственный язык разметки, который нативно работает в браузере (есть ещё XML, SHTML и другие вариации, которые нас в рамках данного курса не интересуют).
Декларативность
Язык HTML является декларативным. То есть, мы буквально описываем то, что хотим видеть. Например, если мы хотим сделать текст жирным, мы буквально говорим об этом следующим образом:
Декларативность
Либо так, что более семантично:
Языковые конструкции
Основной и, по сути, единственной конструкцией в языке HTML являются теги. Именно с помощью них и их атрибутов строится вся разметка. Стандартными тегами, которые должен содержать в себе каждый HTML-документ являются теги: doctype, html, head, body. Идут они ровно в таком порядке. Давайте посмотрим как это выглядит.
Языковые конструкции
Языковые конструкции
В теге doctype мы сообщаем браузеру тип документа, который он получает. Чтобы браузер понимал, как он может с этим самым документом работать. Тег html является основной обёрткой всего нашего кода, именно в него и будут помещены все остальные теги. Тег head нужен для того, чтобы указать некую служебную информацию для обработки страницы, это могут быть стили, мета-теги, заголовок страницы, скрипты, фавикон и так далее. Тег body, в свою очередь, отвечает именно за тот контент, который вы сможете на странице увидеть. В него помещается вся вёрстка страницы.
Языковые конструкции
Подробнее о тегах можно узнать здесь:
Языковые конструкции
Живой пример свёрстанного текста, с помощью HTML:
Атрибуты тегов в HTML
У каждого из тегов есть свой набор атрибутов. В основном, мы будем использовать такие атрибуты, как: class, id, name, title, type, placeholder.
Атрибуты тегов в HTML
С помощью атрибута class можно указать CSS-класс, стили которого применятся к этому элементу.
Атрибуты тегов в HTML
Атрибут id так же может стать источником стилей из CSS, но так делать не рекомендуется, потому что в рамках CSS, селектор по id сильнее, чем селектор по классу. В основном, атрибут id используется для якорей и более удобного получения элемента с помощью JS, кроме того атрибут label привязывается к элементу input именно через id. Этот атрибут является уникальным, и один id не может быть присвоен двум и более элементам в рамках одной страницы.
Атрибуты тегов в HTML
Атрибут title используется для вывода подсказок при наведении на любой из элементов.
Атрибуты тегов в HTML
Атрибуты name, placeholder и type, в основном, используются в тегах input и button. Атрибут type регламентирует тип вводимого контента (например, тип email скажет браузеру, что вводимые данные необходимо валидировать как электронный адрес). Именно значение атрибута name в итоге будет являться ключём для значения (берущегося из атрибута value) в объекте формы, которая будет отправляться на бэкенд по адресу, указанному в атрибуте action у тега form.
Атрибуты тегов в HTML
Живой пример можно посмотреть тут:
Что почитать?