Создание макета сайта — это процесс позиционирования различных элементов, которые делают веб-страницу хорошо структурированной и придают сайту привлекательный вид.

Большинство веб-сайтов в интернете обычно отображают свой контент в несколько строк и столбцов, чтобы визуально разделять для пользователя пространство контента для чтения, письма, навигацию и т.д. Это легко достичь, используя такие HTML-теги, как <table>, <div>, <header>, <footer>, <section> и т. д., оформив их некоторыми CSS-стилями.

HTML-макеты на основе <table>

Таблица предоставляет самый простой способ создания макетов в HTML. Как правило, она включает процесс размещения содержимого, такого как текст, изображения и т. д. в строках и столбцах.

Следующий макет создается с использованием таблицы HTML с 3 строками и 2 столбцами — первая и последняя строки охватывают оба столбца с использованием атрибута colspan таблицы:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
                <h1 style="font-size:24px; margin:0">Zolin.Digital</h1>
            </td>
        </tr>
        <tr>
            <td style="width: 120px; padding:20px; background-color:#d4d7dc; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:#333;">Главная</a></li>
                    <li><a href="#" style="color:#333;">Статьи</a></li>
                    <li><a href="#" style="color:#333;">Контакты</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
                <h2 style="margin:0">Добро пожаловать на наш сайт</h2>
                <p>Здесь вы научитесь создавать сайты...</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
                <p style="margin:0">copyright &copy; zolin.digital</p>
            </td>
        </tr>
    </table>
</body>
</html>

Приведенный выше HTML-код выдаст следующий результат:

HTML Table Layout

Zolin.Digital

Добро пожаловать на наш сайт

Здесь вы научитесь создавать сайты…

Метод, использованный для создания макета в приведенном выше примере, не является неправильным, но его не рекомендуется использовать. Избегайте tables и inline styles для создания макетов. Макеты, созданные с использованием таблиц медленно рендерятся браузерами. Таблицы должны использоваться только для отображения табличных данных.

HTML-макеты на основе <div>

Использование элементов <div> является наиболее распространенным методом создания макетов в HTML. Элемент <div>используется для выделения блока содержимого или набора других элементов внутри документа HTML. При необходимости он может содержать другие элементы <div>.

В следующем примере элементы <div> используются для создания макета из нескольких столбцов. Он выдаст тот же результат, что и в предыдущем примере, в котором используется элемент таблицы:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2; 
    }
    .nav, .section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {            
        width: 20%;             
        background: #d4d7dc;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    .nav ul li a {
        color: #333;
    }    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Zolin.Digital</h1>
        </div>
        <div class="wrapper clearfix">
            <div class="nav">
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Статьи</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
            <div class="section">
                <h2>Добро пожаловать на наш сайт</h2>
                <p>Здесь вы научитесь создавать сайты...</p>
            </div>
        </div>
        <div class="footer">
            <p>copyright &copy; zolin.digital</p>
        </div>
    </div>
</body>
</html>

Мы создали этот макет, используя CSS-методы float, так как большинство веб-браузеров его поддерживают. Кроме того, вы также можете использовать более современные и гибкие flexbox-элементы для создания макетов.

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

Использование структурных элементов HTML5

В HTML5 появились новые структурные элементы, такие как <header>, <footer>, <nav>, <section> и т. д., чтобы семантически разделять различные части веб-страницы.

В следующем примере используются новые структурные элементы HTML5 для создания того же макета, который мы создали в предыдущих примерах.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;  
    }
    nav, section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;             
        background: #d4d7dc;
    }    
    nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Zolin.Digital</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="#">Главная</a></li>
                    <li><a href="#">Статьи</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </nav>
            <section>
                <h2>Welcome to our site</h2>
                <p>Здесь вы научитесь создавать сайты...</p>
            </section>
        </div>
        <footer>
            <p>copyright &copy; zolin.digital</p>
        </footer>
    </div>
</body>
</html>

В следующей таблице приведен краткий обзор новых структурных элементов HTML5.

Тег	Описание
`<header>`	Представляет заголовок (верхний колонтитул) документа или раздела.
`<footer>`	Представляет подвал (нижний колонтитул) документа или раздела.
`<nav>`	Представляет раздел навигационных ссылок.
`<section>`	Представляет семантически обособленный раздел документа.
`<article>`	Представляет статью, сообщение в блоге или другую автономную единицу информации.
`<aside>`	Представляет некоторый контент, обособленно связанный с содержанием текущей страницы.