Что такое HTML?

Ты каждый день открываешь сайты — Wildberries, ВКонтакте, YouTube. За каждой страницей стоит HTML. Это не язык программирования, это язык разметки — он описывает структуру и содержание страницы.

Три кита веба

Любая современная веб-страница состоит из трёх технологий:

Представь интернет-магазин Wildberries. Список товаров, кнопка «Добавить в корзину», заголовок страницы — всё это HTML. Цвета, шрифты, отступы — CSS. А когда ты нажимаешь кнопку и товар добавляется без перезагрузки — это JavaScript.

Как выглядит HTML

HTML состоит из тегов. Тег — это слово в угловых скобках:

<h1>Привет, мир!</h1>
<p>Это абзац текста.</p>
<a href="https://wildberries.ru">Открыть Wildberries</a>

Большинство тегов парные: открывающий <тег> и закрывающий </тег>. Всё между ними — содержимое.

Что такое тег и элемент

Тег — это сам синтаксис: <h1>, </h1>.

Элемент — это открывающий тег + содержимое + закрывающий тег вместе.

<!-- Это элемент h1 -->
<h1>Заголовок страницы</h1>

<!-- Это элемент p (абзац) -->
<p>Какой-то текст.</p>

tagName — имя тега в JavaScript

Когда ты работаешь с HTML через JavaScript, каждый элемент хранит имя своего тега в свойстве tagName. Оно всегда в верхнем регистре:

const el = document.createElement('h1')
console.log(el.tagName) // 'H1'

const p = document.createElement('p')
console.log(p.tagName) // 'P'

Типичные ошибки

Ошибка 1: Забыть закрывающий тег

<p>Текст без закрытия   <!-- Неверно — браузер попробует угадать -->
<p>Текст</p>            <!-- Верно -->

Ошибка 2: Перепутать регистр

<H1>Заголовок</H1>  <!-- Работает, но плохая практика -->
<h1>Заголовок</h1>  <!-- Правильно — теги пишутся строчными -->

Ошибка 3: Думать, что HTML — это программирование

HTML не умеет считать, принимать решения или реагировать на клики. Для этого нужен JavaScript. HTML только описывает структуру.

В реальных проектах

Любой разработчик начинает с HTML — даже backend-разработчики понимают основы разметки. В команде верстальщик пишет HTML+CSS, а JavaScript-разработчик работает с этими элементами через DOM API. Поэтому знание HTML обязательно для всех, кто работает в вебе.

// Создаём HTML-элементы через JavaScript
const h1 = document.createElement('h1')
h1.textContent = 'Заголовок страницы'

const p = document.createElement('p')
p.textContent = 'Это абзац текста на странице.'

const a = document.createElement('a')
a.textContent = 'Ссылка на Wildberries'

// tagName всегда в верхнем регистре
console.log(h1.tagName)   // H1
console.log(p.tagName)    // P
console.log(a.tagName)    // A

// textContent — текстовое содержимое элемента
console.log(h1.textContent) // Заголовок страницы
console.log(p.textContent)  // Это абзац текста на странице.

// Каждый тег — это объект с кучей свойств
console.log(typeof h1)    // object

// HTML задаёт структуру — создаём кнопку
const button = document.createElement('button')
button.textContent = 'Добавить в корзину'

// CSS задаёт стиль — красим кнопку
button.style.backgroundColor = 'green'
button.style.color = 'white'

// JS задаёт поведение — счётчик корзины
let cartCount = 0

// Имитируем нажатие кнопки
cartCount++
console.log('Товаров в корзине: ' + cartCount) // 1

cartCount++
console.log('Товаров в корзине: ' + cartCount) // 2

// Видим итоговый элемент
console.log('Тег:', button.tagName)           // BUTTON
console.log('Текст:', button.textContent)     // Добавить в корзину
console.log('Фон:', button.style.backgroundColor) // green