Про HTML

Взаимодействие HTML и JavaScript

HTML является фундаментом для JavaScript, так как именно HTML обеспечивает структуру веб-страницы, создавая её скелет и основное содержимое, в то время как JavaScript добавляет интерактивность и динамическое поведение, оживляя эту структуру.

JavaScript активно работает с HTML, чтобы придавать веб-страницам динамичность, обрабатывать данные и реагировать на действия пользователя, осуществляя чтение, модификацию и общее улучшение HTML-содержимого и его структуры

Теги

Тег (Tag) – это специальная конструкция, которую браузер начинает интерпретировать и обрабатывать определенным образом. Теги являются фундаментальным строительным блоком HTML, определяющим структуру и содержимое веб-страницы.

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

Например, тег <input> показывается как поле ввода, а тег <script> указывает браузеру выполнить находящиеся внутри него команды JavaScript.

Структура Тега

Теги обычно состоят из открывающего тега (например, <p>) и закрывающего тега (например, </p>), который содержит косую черту перед названием тега. Между ними располагается содержимое.

innerHTML

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

<p>
  Hello, it's
  <b> it-kamasutra.com </b>
</p>
 
<p>You can learn JS with our service</p>

Типы Тегов

Теги в HTML делятся на два основных типа: парные (или составные) и одиночные (или автозакрывающиеся). Это фундаментальное различие определяет, как теги обрабатывают содержимое и взаимодействуют с браузером.

Парные теги — это те, которые состоят из двух частей: открывающего тега и закрывающего тега. Главная особенность парных тегов заключается в том, что они подразумевают наличие внутреннего содержимого (innerHTML). Это содержимое может быть обычным текстом или другими вложенными HTML-тегами, позволяя создавать сложную иерархическую структуру. Смысл этих тегов — преобразовать или каким-либо образом воздействовать на этот innerHTML.

Примеры парных тегов:

• <b> </b> - (bold), используется для выделения текста жирным шрифтом
• <i> </i> - (italic), используется для отображения текста курсивом
• <p> </p> - (paragraph), создает абзац, начиная содержимое с новой строки
• <a> </a> - (anchor), тег ссылки. Его innerHTML является текстом, который становится кликабельной ссылкой
• <textarea> </textarea> - Многострочное поле ввода текста. ❗ Отличается от других тегов тем, что внутри него пробелы и переносы строк учитываются

Одиночные теги — это те, которые открываются и сразу же закрываются, часто с использованием косой черты перед закрывающей угловой скобкой (например, <hr />). Они также называются автозакрывающимися. Одиночные теги не подразумевают innerHTML, так как их функция выполняется сама по себе, без необходимости заключать какое-либо содержимое.

Примеры одиночных тегов:

• <hr /> - (horizontal rule), используется для рисования горизонтальной линии*/

• <img /> - (image), используется для вставки изображения

• <input /> - используется для создания поля ввода

Элемент vs Тег

Понятия "элемент" и "тег" являются, по сути, синонимами. Однако, если проводить небольшое различие:

• Тег – это то, что мы пишем в коде.
• Элемент – это то, что уже существует в браузере после обработки кода.

Таким образом, "тег" относится к синтаксической конструкции в коде, а "элемент" — к объекту, который эта конструкция создает в DOM (объектной модели документа) браузера.

Атрибуты

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

<img src="путь_к_картинке.jpg" alt="it-incubator" />
 
<input value="hello" />
 
<a href="http://it-kmasutra.com"> it-kmasutra </a>

Структура Атрибута

Атрибут состоит из названия атрибута, потом сразу, без пробелов, впритык к названию атрибута ставится знак равенства (=). После знака равенства идет значение атрибута, заключенное в кавычки.

Типы Атрибутов

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

Глобальные атрибуты Это атрибуты, которые могут быть использованы с любым HTML-элементом для придания ему универсальных свойств:

• class - Определяет один или несколько классов для элемента, используемых в CSS и JavaScript.
• id - Задает уникальный идентификатор для элемента.

Специфические атрибуты Эти атрибуты являются частью определенных тегов и меняют их функциональность:

• src - Указывает путь к ресурсу, такому как изображение (<img>).
• href - Определяет URL (адрес) ссылки (<a>).

Другие виды атрибутов (по назначению)

Атрибуты событий. Позволяют выполнять JavaScript-код в ответ на действия пользователя, например, клик по кнопке.

Атрибуты форматирования. Влияют на внешний вид элемента, но их использование часто заменяется CSS.

Булевы атрибуты. Атрибуты, которые просто присутствуют или отсутствуют (например, disabled или readonly для полей ввода).

🚀 В следующем уроке будет более детально рассмотрен HTML, а также будет введен "еще один новый игрок", который называется CSS.