Как сделать скелет сайта


Правильный «скелет» HTML-страницы для сайта, пример по стандарту HTML5

Структура HTML-документа определяет базовый «скелет» для будущего сайта, вариацию которого мы рассмотрим в данном материале. Код выполнен по стандарту HTML5 и кратко изложены основные тезисы элементов. Он подойдет как для начинающего верстальщика в целях разобраться, что собой представляет каркас страницы, так и профессионального вебмастера в качестве быстро используемого шаблона в своих работах.

Шаблон «скелета» HTML-страницы

Приведем исходный HTML-код с некоторыми дополнительными вставками для дальнейшей визуализации с помощью CSS и JS:

<!DOCTYPE HTML> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Название страницы</title> <meta name="description" content="Описание страницы" /> <link rel="stylesheet" type="text/css" href="/assets/css/style.css" /> <link rel="icon" href="/img/favicon.png"> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <header> Шапка <nav> Навигация </nav> </header> <main> <section> <h2>Заголовок страницы</h2> Основная часть </section> </main> <aside> Боковая колонка (сайдбар) </aside> <footer> Подвал </footer> </body> </html>

В полученном шаблоне наш «скелет», при условии что файл стилей (style.css) составлен верно, преобразуется в страницу такого типа:

Теги и атрибуты

Разберем основные теги и атрибуты, примененные в примере:

  • <!DOCTYPE HTML> – указание браузеру, как интерпретировать данную страницу, к какой версии принадлежит HTML-документ. В нашем случае подразумевается стандарт HTML5.
  • <html lang=”ru”> – контейнер для всего содержимого страницы с указанием принадлежности сайта к конкретному языку.
  • <head> – технический контейнер, направленный на составление информации о странице, подключения стилей и скриптов.
    • <meta charset=”UTF-8″> – кодировка сайта.
    • <title> – название страницы. Придерживайтесь правильного заполнения тега Title.
    • <meta name=”description” content=”” /> – мета-описание документа. Опять же, существуют некоторые правила грамотного заполнения метаданных.
    • <link rel=”stylesheet” type=”text/css” href=”” /> – подключение файла каскадных таблиц стилей (CSS) для стилизации и оформления элементов.
    • <link rel=”icon” href=””> – иконка сайта, отображаемая в браузере.
    • <script type=”text/javascript” src=””> – подключение внешней библиотеки JQuery последней версии.
    • <!–[if lt IE 9]><script src=””> – условие, при котором посетитель, зашедший с браузера Internet Explorer 9, получит поддержку новым тегам, описанным в HTML5.
  • <body> – тело документа, включающее теги, атрибуты, текст и изображения. Отображается в браузере.
    • <header> – шапка сайта.
    • <nav> – навигация по ресурсу непосредственно в шапке. Может быть также использован как в aside, так и в footer.
    • <main> – основной контент документа.
    • <section> – секция для одного типа содержания. Допустимо наличие несколько одноименных тегов.
    • <h2> – заголовок страницы.
    • <aside> – боковая колонка, также именуемая как «сайдбар».
    • <footer> – подвал сайта.

Старайтесь верстать «чистый» код, без дополнительного мусора. Спасибо за внимание.