НашСамогон - самогонные аппараты, дубовые бочки, винные и турбо дрожжи, электроника и оборудование для производства алкоголя в домашних условиях.

Возврат к основам или как создать HTML5 шаблон?!

4

Разметка HTML – это прекрасная вещь, которая, безусловно, изменилась за эти годы.
В отличие от предыдущих версий HTML, где код по большей части был ограниченной структурой, которая определяла использование классов и ID элементов, HTML5 пытается обеспечить более сложные структуры.

Весь макет может быть создан с помощью семантических тегов и элементов, которые помогут структурировать каждую страницу. Это создает код, который является гораздо более чистым и читаемым чем в предыдущих версиях HTML. Новые метки  требуют, чтобы вы думали о том, как вы структурируете вашу страницу.

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

Одним из главных вопросов о HTML5 являются  <header>, <nav>, <footer> теги. Эти теги кажутся достаточно понятными, но откуда они взялись? На этот вопрос достаточно легко ответить. Они пришли от вас!

В 2005 году Google провел исследование над более чем 3 миллиардов веб-сайтов и обнаружил, что наиболее распространенные классы, используемые в общей разметки были те, которые вы видели на той странице. Footer, menu, title, small, text, content, header, и nav, все они находятся в ТОП чартах по популярности. И, по сути, именно так решил W3C, что стоит использовать для новых семантических тегов HTML5.  Теперь, когда вы узнали об этом, давайте погрузимся в изучение этих тегов и основных фундаментальных изменений в HTML5.

doctype

DOCTYPE это не совсем HTML элемент, а больше как декларация, которая становится все более и более важной. Используя его соответствующе, вы можете помочь браузеру понять какой HTML он пытается разобрать. Поэтому всегда нужно использовать соответствующие DOCTYPEs. На данный момент, вы можете просто использовать HTML5 doctype для всего. Но, давайте также рассмотрим некоторые варианты из прошлого. Вот откуда мы пришли к такой простоте:

HTML2:

HTML3:

HTML4:

HTML5:

Другие упрощения в HTML5

Корневой элемент был упрощен, где вместо того, чтобы писать что-то вроде этого:

мы просто можем написать:

Вещи, которые нам нужно скопировать и вставить, становятся все меньше и меньше с каждым днем. Например, в head элементе, кодировка символов перешла от этого:

к новой версии в HTML5:

И, наконец, наши ссылки сбросили type атрибут. Например это:

стало этим:

Новые теги

“Section” тег

Section элемент, является общей секцией HTML документа. Наиболее типичным, будет тематическая группировка контента, у которого может быть heading, но не обязательно.

Общее правило для использования раздела заголовка (section heading), является его использования, только если на него явно ссылаются в общих набросках документа. Если, в набросках, была ‘section’ , на которую вы ссылались или чувствуете, что все содержимое одной области относится к ‘section’, тогда  включите section тег. Если вы хотите использовать его в основном для стилизации, тогда употребите <div> тег, как вы это обычно делаете.

“nav” тег

“nav” элемент представляет любые части страницы,  которые ссылаются на другие части этой страницы или другие страницы сайта. Когда речь заходит про навигационные ссылки, вы первым делом должны думать про “nav” теги.

nav элементы, предназначены для больших блоков навигации. Любой крупный элемент, который ссылается на другие разделы или страницы сайта. Имейте в виду, что раздел навигации не должен быть в виде списка, хотя это довольно стандартно.

“article” тег

Article элемент, представляет собой автономную композицию в документе, странице или любом сайте. Важно помнить, какой это именно article тег. Обычный, независимо распределенный или контент для повторного использования? Это могут быть сообщения форума, журнала или газеты, статья или запись на блоге, даже комментарии, при условии, что это независимый элемент контента.

Articles могут содержать в себе “section”, “header”, и даже “hgroup”. Но имейте в виду, когда и как вы используете этот элемент, так как он не столь широко используется как тег <div>.

Предположим, что у вас есть блог с комментариями. Вы можете сделать следующее в HTML5:

“aside” тег

aside элемент, представляет раздел страницы, который состоит из контента, косвенно связанного с содержанием вокруг aside элемента. Самое главное помнить, что это, как правило, информация или содержание, которые разделяются по характеристике. Вы будете его часто использовать в боковой панели, так как большинство из них идеально подходят, чтобы быть полностью завернутыми (wrapped) в aside тег. Другие применения могут включать в себя квоты, биты рекламы, группы навигационных ссылок (nav links), или даже адреса рядом с адресом места под вопросом.

Вы, даже можете использовать элемент в aside для больших разделов сайта, таких как вспомогательная панель для Twitter или Facebook, или случайных линков. Сделайте их aside, а затем используйте header и nav раздел в нем, чтобы пояснить, что там происходит. Также его можно использовать в footer блога, чтобы ссылаться на вещи о нем, или почти в любом другом месте, aside может быть отлично реализован.

“hgroup” тег

hgroup элемент, представляет heading (заголовок) раздела. Этот элемент лучше всего использовать для группирования набора h1-h6 элементов, когда заголовок имеет несколько уровней, или подзаголовки (точно такие, как в статье, которую вы сейчас читаете). Это было бы идеально для hgroup. Вы, также можете использовать его для альтернативных названий или tag-lines(тег-линий).

Другой областью применения, может быть блог, где вы размещаете заголовки и подзаголовки для вашего блога. Также можно использовать его для названия книги и описания, для перечня врачей в вашем районе и области их экспертизы, или даже использовать hgroup, чтобы помочь скопировать функциональность таблицы. Давайте взглянем на такой пример:

“Header” тег

header тег, представляет собой любую группу вводных или навигационных средств внутри сайта или его разделов. Теперь, когда формальное определение тега было сделано, давайте его немного разберем. Мы все знаем, что такое заголовок, но, если быть по конкретней, то он включает в себя различные вещи вверху самого сайта. Эти области заголовков обычно включают в себя брендинг разделов (branding sections), элементы призыва к действию (call to action), и, возможно, немного навигации. Там, где вы раньше писали: <div id=”header”>, теперь вы можете написать <header>, и получить ту же семантическую структуру разметки. Важно отметить, W3C заявляет, что header элемент должен содержать либо набор H1, индивидуальные заголовки разделов (h1-h6) или элемент hgroup. Header элементы, также могут использоваться для wrap разделов таблиц контента, формы поиска или любые соответствующие логотипы. Имейте в виду, что заголовок это не секционирование, так как в нем нету замены для “все-в-одном” div. Скорее header, это семантический элемент, который нужно использовать в конкретных ситуациях.

“Footer” тег

Footer элемент, представляет собой “подвал” для своего ближайшего вложенного раздела родитель, и как правило, содержит информацию о разделе родителей (parents section). Footer тег очень похож на header тег, но в противоположной части страницы. Зачастую вы увидете футер страницы, который содержит ссылки, которые были в навигации, и, возможно, логотип или другие подобные вещи (все они могут быть размещенны в <footer> теге). Хотя футер обычно используется в конце сайт, он также может соответствовать концу любого разделу контента. Давайте взглянем на следующий пример:

“address” тег

address элемент, представляет контактную информацию для своего ближайшего article или body элемента. Например:

W3C также хотел бы отметить, что как правило, address элемент будет включен наряду с другой информацией в footer элемента. Это будет хорошо работать специально для электронной почты или about.me ссылок, на днище сайтов (рядом с информацией об авторских правах). Вы можете это поместить в address элемент следующим образом:

шаблон html5

HTML5 Шаблон

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

Теперь давайте добавим stylesheet ссылку

Теперь можно начинать настройку нашего body элемента со структурой,  для использования в других проектах. Так что с учетом этого, давайте сделаем:

Сейчас, как вы видите, у нас появилось место для нашего контента. В наличии есть несколько определенных секций: footer, header и section элемент в документе. Теперь,  давайте добавим элемент навигации.

Мы, добавили навигацию с неупорядоченным списком в заголовке. А что делать, если у вас есть большой подвал (footer )и вы хотите, чтобы те же самые элементы-навигаторы находились там?! Давайте добавим их туда. За исключением того, что на этот раз мы не будем использовать тег <nav>, а вместо этого воспользуемся div с классом “footer_navigation”. И пока мы здесь находимся, давайте заполним footer контентом.

Теперь давайте добавим немного деталей  для IE, и другие тонкости:

Вот и все, стандартный HTML5 шаблон готов!

Поделиться:

Об Авторе

Главный редактор портала WebDesignMagazine.ru. Пишу статьи и делаю переводы для веб-сайта, занимаюсь продвижением журнала в социальных сетях и PR-каналах, а также несу ответственность за маркетинговые стратегии нашего проекта.

  • / Pavel Mikuta

    5+

  • http://plutov.by/ plutov.by

    Спасибо. У меня тоже есть кое-что на эту тему: http://plutov.by/category/html5

  • http://plutov.by/ plutov.by

    Хороший материал. Вот еще пару статей про HTML5: http://plutov.by/category/html5

  • Иван

    А где закрывающий тег?