Загрузка...

Вёрстка HTML

После семантики layout собирает области; CSS размещает.

Сначала структура, потом размещение

Проясните историю; потом колонки — не гигантская таблица.

Прямой ответ

Каркас landmarks. Уникальный контент в main. Колонки через CSS. Без layout-table.

📊 HTML structure vs CSS visuals

Layer	Responsibility	Examples
HTML landmarks	Name page regions by meaning	header, nav, main, aside, footer
HTML wrappers	Optional styling hooks with no landmark role	div class="row"
CSS	Visual columns, gaps, widths, order on screen	flex, grid, margin, width
Avoid	Fake layout with data tables	table/tr/td for the whole site chrome

Каркас страницы

Header, ряд, main+article, aside, footer. div.row — только CSS-крючок.

Landmark layout skeleton

html

HTML Code

<body>
<header>
<h1>News</h1>
<nav>
<a href="index.html">Home</a>
<a href="local.html">Local</a>
</nav>
</header>
<div class="row">
<main>
<article>
<h2>Story</h2>
<p>Primary article content goes here.</p>
</article>
</main>
<aside>
<h2>Related</h2>
<p>Side links and notes.</p>
</aside>
</div>
<footer>
<p>Contact</p>
</footer>
</body>

Читаем каркас

История в main
aside рядом
без CSS всё стопкой

Мини-CSS для колонок

Те же landmarks; flex на .row.

Layout skeleton with flex row

html

HTML Code

<body>
<header><h1>News</h1></header>
<div class="row">
<main>
<article><h2>Story</h2><p>Primary content.</p></article>
</main>
<aside><h2>Related</h2><p>Side note.</p></aside>
</div>
<footer><p>Contact</p></footer>
<style>
.row { display: flex; gap: 16px; }
main { flex: 2; }
aside { flex: 1; }
</style>
</body>

Читаем flex-превью

Смысл тот же
main шире
не заменяйте td

Таблицы для данных, не для хрома

Избегайте layout-таблиц.

Практика

header/main/aside/footer
article в main
без layout-table

Частые ошибки

layout-таблица
без main
row как landmark

Кратко

HTML именует; CSS ставит
без layout-таблиц
далее: адаптив

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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

Язык