Энциклопедия HTML5 > Обзор HTML5 > HTML5 шаблон

HTML5 шаблон

Запись создана: 14 Июн 2015
Запись обновлена: 14 Июн 2015

Шаблон для сайта на HTML5

Добрый день дорогие друзья, в данной статье мы изучим код стандартного шаблона HTML5 и рассмотрим из каких частей он состоит.

Шаблон кода на HTML5, может выглядеть следующим образом:

<!DOCTYPE html>
<html lang="ru">
    
    <!-- Голова страницы сайта -->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Название страницы</title>
        <link rel="stylesheet" href="css/normalize.css" />
    </head>
    
    <!-- Тело страницы сайта -->
    <body>
        <div class="wrapper">

            <header>Шапка страницы</header>
            
            <nav>Основное меню страницы</nav>
            
            <div class="main">

                <article>Основная статья страницы</article>
                
                <aside>Сайдбар</aside>

            </div> <!-- .main -->
            
            <footer>Подвал страницы</footer>
        
        </div> <!-- .wrapper -->
    </body>
</html>

Рзберем построчно код шаблона HTML5.

<meta charset="utf-8" /> — назначем кодировку UTF-8.
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> — если страница открыта браузером IE, то браузер должен всегда использовать последний стандартный режим отображения.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> — грамотное отображение сайта на мобильных устройствах.
<link rel="stylesheet" href="css/normalize.css" /> — вам нужно будет найти и скачать себе файл normalize.css или использовать CSS-фреймворк Bootstrap.
.wrapper — обертка для всего кода находящегося в теге body.
header — шапка страницы сайта, в нём обычно содержится логотип сайта, заголовок, телефон, слайдер и т.п.
nav — основное меню страницы сайта.
.main — "срединная" обертка для основного контента (статьи) и сайдбара (боковой панели) сайта.
article — основной контент страницы: статья, запись в блоге, тема форума и т.д. Может содержать текст, изображения, видео, таблицы и т.д.
aside — сайдбар (боковая панель) сайта, обычно содержит различные виджеты типа: рубрики, метки, последние записи/комментарии, дополнительное меню, счетчики и т.д.
footer — подвал страницы сайта, обычно содержит правовую информацию (копирайты), контактную информацию (адреса, телефоны) и т.д.

HTML5

HTML5 шаблон

Шаблон для сайта на HTML5

Добавить комментарий