⚖️ Старый и современный подход к вёрстке

⚡ Различия в двух словах

Старый подход: смешать структуру, оформление и выравнивание в одном HTML-коде.

Современный подход: оставить в HTML смысл, а оформление вынести в CSS.

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

📜 Старый подход

В ранних версиях веба часто пытались «собрать» страницу вручную: таблицы использовали для макета, стили писали прямо в атрибутах (<font>, align, bgcolor), а смысл элементов терялся. Визуально результат был приемлемым, но за ним прятался «нечитаемый» код.

Файл: subjects/html-css/course/lessons/01-history-html-css/old-vs-new.html

Заголовок 
<!-- Старый стиль: структура и оформление вперемешку -->
<table width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="background:#f5f8ff; padding:24px;">
      <font color="#1f3b73" size="5">Заголовок</font>
    </td>
  </tr>
</table>

Такой код трудно поддерживать: смысл страницы скрыт за презентационными деталями, тег <table> здесь не означает «таблицу данных», а повторное использование почти невозможно.

❌ Почему это больше не подходит

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

✅ Современный подход

Семантическая HTML-разметка описывает смысл, а CSS отвечает за внешний вид и адаптацию. Визуально результат тот же, но код чище.

Файл: subjects/html-css/course/lessons/01-history-html-css/old-vs-new.html

Заголовок

Короткое описание страницы.

<!-- Современный подход: смысл отдельно, стиль отдельно -->
<header class="hero">
  <h1>Заголовок</h1>
  <p>Короткое описание страницы.</p>
</header>

Файл: subjects/html-css/course/lessons/01-history-html-css/style.css

/* style.css */
.hero {
  background: #f5f8ff;
  border: 1px solid #c7d5ff;
  padding: 24px;
  border-radius: 12px;
}
h1 { color: #1f3b73; }
Что стало лучше:
  • HTML читается как структура документа.
  • CSS можно менять без переписывания контента.
  • Один и тот же блок проще переиспользовать в других страницах.

🕰️ Когда старый подход ещё можно встретить

Legacy-код, старые шаблоны CMS и очень старые учебные примеры могут содержать table-layout, inline-style и устаревшие теги вроде <font>. Для поддержки такого кода полезно понимать, как он устроен, но для новых страниц так делать не стоит.