Ярослав Анциферов | Frontend-разработчик

Каждый элемент на веб-странице занимает место в нормальном потоке документа — как книги на полке библиотеки: каждая стоит там, где ей положено по порядку. Свойство position позволяет вырвать элемент из потока (или не вырывать — зависит от значения) и управлять его положением относительно чего-то: родителя, окна, скролла. Это не «переместить пиксель влево» — это изменение контекста позиционирования. Значение по умолчанию. Элемент остаётся в нормальном потоке. Свойства top, right, bottom, left, z-index игнорируются...

В 1996 году W3C в спецификации CSS предложил модель, в которой ширина элемента — это ширина его content-области. Пограничные случаи этой модели начали сыпаться уже к 2002-му: — дизайнер просит блок шириной 300px с 10px padding и 1px border; — вы пишете width: 300px; padding: 10px; border: 1px solid; — браузер выдаёт блок шириной 322px и ломает макет. Это не баг — это content-box в действии. А border-box — это патч, который выправляет поведение. Давайте разберёмся детально. Что происходит внутри? —...

Весь HTML — это коробки. Не «контейнеры», не «блочные элементы», а именно коробки. CSS описывает, как эти коробки устроены физически на странице — в трёхмерном смысле: высота, ширина, толщина стенок, внутреннее пространство. Эту договорённость называют блочной моделью (CSS box model). Она стандартизирована в спецификации CSS и действует одинаково во всех современных браузерах. 📌 Представьте посылку. — Внутри — ваш товар (content). — Вокруг — воздушно-пузырьковая плёнка (padding). — Поверх — картонная коробка (border)...

Вы не просто бросаете всё в кучу. Вы кладёте носки в один ящик, рубашки — в другой, обувь — на полку. Почему? Чтобы найти нужное быстро, без копания в хаосе. Веб-страница — это тоже шкаф. А data-* атрибуты — этикетки на ящиках, которые видите только вы (и JavaScript). Браузер их игнорирует. Пользователь — не замечает. Но они делают ваш код чище, логичнее и управляемее. Это пользовательские атрибуты в HTML, которые начинаются с data-, за которым следует любое имя без заглавных букв и без двойных дефисов...

Когда вы открываете страницу в браузере, HTML-код превращается в DOM-дерево — структуру в памяти, с которой работает JavaScript и которую рисует браузер. Но не вся разметка сразу становится частью этого дерева. Иногда нам нужно заготовить фрагменты разметки, но не рендерить их прямо сейчас. Для этого и существует <template>. Тег <template> — это контейнер для «холодного» HTML. Всё, что внутри него: Этот фрагмент можно клонировать и вставлять в DOM по мере необходимости — например, при клике, при получении данных от сервера, или при создании списка элементов...

Допустим, это — кораблик из спичек. Ты пришёл в класс, поставил его на стол, и тут учитель говорит: — «А где инструкция? Кто это сделал? Из чего? Сколько времени заняло?» А ты только руками разводишь: — «Ну… вот он!» Тут-то и нужна карточка-подпись под поделкой: «Кораблик. Сделал Иван Петров (5 «Б»). Материал: спички, клей, лак. Время: 3 часа.» Без неё — просто вещь. С ней — понятный, самодостаточный элемент выставки. Вот это и есть <figure> + <figcaption> в HTML. <figure> — это «подставка» или «рамка» для чего-то важного, но необязательного для основного текста...

Представь, что ты строишь дом из конструктора LEGO. У тебя есть кирпичики разной формы и цвета — одни для стен, другие для дверей, третьи для окон. Ты же не поставишь дверь на крышу? Нет — всё должно быть на своём месте, чтобы дом был удобным и не рухнул. Вот так же и с сайтом: браузер — это «строитель», а теги — это «кирпичики». Современные сайты строятся не просто из <div> и <p>, а из смысловых блоков — чтобы компьютер понял, что к чему относится. Это помогает: Давай разберём четыре главных «кирпичика» — и для каждого — аналогия из жизни...

HTML — не просто язык разметки. Это язык смысла. Теги вроде <div> — «пустые коробки»: они группируют, но не говорят зачем. Семантические теги (<header>, <main>, <footer>) — как этикетки на коробках в архиве: сразу ясно, что внутри и зачем оно нужно. Браузеры, скринридеры, поисковики — все читают эти метки. Игнорируете их — ломаете доступность, SEO и будущую поддержку кода. Назначение: Контейнер для вводной информации о текущем контексте. Это может быть шапка всего документа (логотип, навигация), но также — шапка статьи, секции, даже <aside>...

Разбираем, как HTML «говорит» с браузером — и почему это важно, даже если текст выглядит одинаково. HTML — это не просто «кто что написал», а режиссёрский сценарий. Каждый тег — это указание актёру (браузеру): «Как это прочитать?», «На чём сделать акцент?», «Кто здесь главный?». А теперь — к звёздам спектакля: <b>, <strong>, <i>, <em>. 💡 <b> — это как надпись на упаковке: «СРОК ГОДНОСТИ: 12.12.2025» — написано жирно, чтобы ты сразу заметил. Но внутри — просто текст. Никакого смысла, кроме «смотри сюда»...

Представь, что ты строишь дом из конструктора. У тебя есть большие коробки-комнаты и маленькие кубики-детали. В веб-разработке есть похожие «детали» — это HTML-теги. И два самых часто используемых — это <div> и <span>. Они вроде бы похожи, но работают совсем по-разному. Давай разберёмся. <div> похож на большую картонную коробку, в которую можно сложить всё, что угодно: книги, игрушки, даже другую коробку. Он сам по себе ничего не делает, но занимает всю ширину строки и начинается с новой строки....