Урок 21. Старый vs Новый: Основы макетирования и статичный landing

📁 Раздел: Блочная модель и позиционирование ⏱️ Время изучения: ~70 мин 🎯 Сложность: Средняя
#min #width #margin-inline #padding-block #display #position

⚡ Кратко

Макетирование начинается не с CSS-свойств, а с разбиения страницы на смысловые блоки. В этом уроке собирается статичный landing: header, main, секции, карточки и footer.

Старый подход: таблица для layout

В 2000-х страницы верстали таблицами: ячейки изображали колонки и строки макета. Визуально работало, но <table> предназначена для табличных данных. Для раскладки она ломает семантику, мешает скринридерам и плохо адаптируется под мобильные.

Меню Контент landing
📄 lesson-21/old-table-layout.html
<table>
  <tr>
    <td class="sidebar">Меню</td>
    <td class="content">Контент landing</td>
  </tr>
</table>

Новый подход: семантические блоки

Та же страница на семантических тегах читается как документ: header, main с section и footer. Структура понятна и человеку, и машине; раскладку легко поменять через CSS, не трогая разметку.

<header> — логотип + навигация
<main>
<section class="hero">
<section class="features">
<footer> — контакты
📄 lesson-21/new-semantic-layout.html
<header class="site-header">...</header>
<main>
  <section class="hero">...</section>
  <section class="features">...</section>
</main>
<footer class="site-footer">...</footer>

Навигация