Макеты веб-страниц

В издательском деле многостолбцовый вывод контента известен уже много лет — узкие столбцы упрощают чтение текста. С переходом на широкоэкранные дисплеи веб-разработчики начали искать способы сохранения комфортной ширины столбцов в своих блогах и сайтах. За последнее десятилетие появился ряд довольно остроумных решений в дизайне многих веб­страниц по созданию многоколоночных макетов. Существуют различные способы создания макетов в HTML.

Макеты на основе таблиц

В недалеком прошлом таблицы были самым простым и самым популярным способом создания многоколоночных макетов в HTML. Вся веб-страница помещалась внутри большой таблицы (<table>). Однако элемент <table> разработан не для создания макетов страниц, его цель — отображение табличных данных.
Следующий макет создается с помощью таблицы, состоящей из 3-х строк и 2 столбцов, где строки содержащие контент заголовка и футера охватывают обе колонки, используя атрибут colspan:

Пример: Макет на основе таблицы

Макет на основе таблицы

Шапка сайта

Основной контент...
Совет: Не используйте таблицы для разметки страницы! W3C осуждает использование таблиц для разметки.

Макеты на основе DIV-элементов

В течение долгого времени веб-дизайнеры используют элементы <div> для группировки элементов на странице (например, оформирующих шапку сайта, статьи, футер или боковую панель). Таким образом разработчики, как правило, помещают эти основные разделы страницы внутри элементов <div> и используют атрибуты class или id, чтобы указать назначение конкретной части страницы.

Ниже приведена визуализация макета с использованием тегов <div> для группировки элементов на странице:

<body>
<div id="page">
<div="header">
<div id="sidebar">
<div id="content">
<div id="footer">

Пример: Макет на основе DIV-элементов

Шапка сайта

Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
  • ...
Основной контент...
Copyright © 2017 wm-school.ru

Новые элементы макета в HTML5

Спецификация HTML5 предоставляет новые семантические теги, описывающие содержащийся в них контент. Так как современные сайты включают в свои страницы боковые панели, заголовки и секции, в спецификацию HTML5 были включены новые теги, предназначенные для деления страницы на логические области. Семантическая разметка предназначена для описания контента. Семантическая разметка упрощает понимание смысла и контекста информации, размещенной на странице — как для поисковиков, так и для разработчиков. Теперь программы экранного доступа могут позволить пользователям проигнорировать заголовки и нижние колонтитулы и сразу перейти к основному контенту. Кроме того, поисковые машины могут придать большее значение содержимому элементов <article>, чем содержимому <header> или <footer>.

Новые элементы разметки в HTML5

Элемент Значение / описание
<header> Определение заголовка страницы или раздела.
<nav> Определение области навигации страницы или раздела.
<section> Определение логической области страницы или группировка контента.
<article> Определение статьи (логически завершенного блока контента).
<aside> Определение вторичного или связанного контента.
<footer> Определение завершителя страницы или раздела.
<details> Определяет дополнительные детали.
<summary> Определяет заголовок для элемента <details>.
Следующий пример имеет такую же структуру, как рассмотренный пример с применением тегов <div>. Однако многие из элементов <div> в нем заменены новыми элементами HTML5. Например заголовок помещен внутри элемента <header>, меню навигации — в элементе <nav>, а статьи — в отдельных элементах <article>.

Ниже приведена визуализация макета с использованием тегов HTML5 для раметки страницы:

<body>
<div id="page">
<header>
<nav>
<section>
<footer>

Пример: Макет на основе элементов HTML5

Шапка сайта

Главное меню
  • HTML Элементы
  • HTML Атрибуты
  • HTML Таблицы
  • ...

Заголовок

Основной контент...
Copyright © 2017 wm-school.ru




Профессия‌ ‌веб-разработчик‌
Веб-разработчик с нуля‌
Старт в программировании‌
Курс HTML/CSS‌
Школа фриланса
Курс Верстальщик 2020 - HTML 5, CSS‌
Профессия‌ тестировщик‌