Разметка 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:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN">
HTML3:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN">
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
HTML5:
<!DOCTYPE html>
Другие упрощения в HTML5
Корневой элемент был упрощен, где вместо того, чтобы писать что-то вроде этого:
<html xmlns=”//www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
мы просто можем написать:
<html lang=”en”>
Вещи, которые нам нужно скопировать и вставить, становятся все меньше и меньше с каждым днем. Например, в head элементе, кодировка символов перешла от этого:
<meta http-equiv=”Content-Type” content=”text/html;>
к новой версии в HTML5:
<meta charset=”UTF-8”>
И, наконец, наши ссылки сбросили type атрибут. Например это:
<link rel=”stylesheet” href=”style.css” type=”text/css”>
стало этим:
<link rel=”stylesheet” href=”style.css”>
Новые теги
“Section” тег
Section элемент, является общей секцией HTML документа. Наиболее типичным, будет тематическая группировка контента, у которого может быть heading, но не обязательно.
Общее правило для использования раздела заголовка (section heading), является его использования, только если на него явно ссылаются в общих набросках документа. Если, в набросках, была ‘section’ , на которую вы ссылались или чувствуете, что все содержимое одной области относится к ‘section’, тогда включите section тег. Если вы хотите использовать его в основном для стилизации, тогда употребите <div> тег, как вы это обычно делаете.
“nav” тег
“nav” элемент представляет любые части страницы, которые ссылаются на другие части этой страницы или другие страницы сайта. Когда речь заходит про навигационные ссылки, вы первым делом должны думать про “nav” теги.
nav элементы, предназначены для больших блоков навигации. Любой крупный элемент, который ссылается на другие разделы или страницы сайта. Имейте в виду, что раздел навигации не должен быть в виде списка, хотя это довольно стандартно.
“article” тег
Article элемент, представляет собой автономную композицию в документе, странице или любом сайте. Важно помнить, какой это именно article тег. Обычный, независимо распределенный или контент для повторного использования? Это могут быть сообщения форума, журнала или газеты, статья или запись на блоге, даже комментарии, при условии, что это независимый элемент контента.
Articles могут содержать в себе “section”, “header”, и даже “hgroup”. Но имейте в виду, когда и как вы используете этот элемент, так как он не столь широко используется как тег <div>.
Предположим, что у вас есть блог с комментариями. Вы можете сделать следующее в HTML5:
<article> <header> <h1>Название записи блога</h1> <p>12/25/2045</p> </header> <p>Запись в блоге</p> <p>...</p> <section> <h1>Комментарии</h1> <article> <footer> <p>Написано: <span>Имя человека</span></p> <p>Время: 15 минут назад</p> </footer> <p>Текст комментария здесь /p> </article> <article> <footer> <p>Написано: <span>Имя человека</span></p> <p>Время: 25 минут назад</p> </footer> <p>Другой комментарий здесь</p> </article> </section> </article>
“aside” тег
aside элемент, представляет раздел страницы, который состоит из контента, косвенно связанного с содержанием вокруг aside элемента. Самое главное помнить, что это, как правило, информация или содержание, которые разделяются по характеристике. Вы будете его часто использовать в боковой панели, так как большинство из них идеально подходят, чтобы быть полностью завернутыми (wrapped) в aside тег. Другие применения могут включать в себя квоты, биты рекламы, группы навигационных ссылок (nav links), или даже адреса рядом с адресом места под вопросом.
Вы, даже можете использовать элемент в aside для больших разделов сайта, таких как вспомогательная панель для Twitter или Facebook, или случайных линков. Сделайте их aside, а затем используйте header и nav раздел в нем, чтобы пояснить, что там происходит. Также его можно использовать в footer блога, чтобы ссылаться на вещи о нем, или почти в любом другом месте, aside может быть отлично реализован.
“hgroup” тег
hgroup элемент, представляет heading (заголовок) раздела. Этот элемент лучше всего использовать для группирования набора h1-h6 элементов, когда заголовок имеет несколько уровней, или подзаголовки (точно такие, как в статье, которую вы сейчас читаете). Это было бы идеально для hgroup. Вы, также можете использовать его для альтернативных названий или tag-lines(тег-линий).
Другой областью применения, может быть блог, где вы размещаете заголовки и подзаголовки для вашего блога. Также можно использовать его для названия книги и описания, для перечня врачей в вашем районе и области их экспертизы, или даже использовать hgroup, чтобы помочь скопировать функциональность таблицы. Давайте взглянем на такой пример:
<hgroup> <h1>Имя доктора:</h1> <h3>Иван Петрович</h3> <h2>Область экспертизы</h2> <h3>Человеческая глупость</h3> </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> теге). Хотя футер обычно используется в конце сайт, он также может соответствовать концу любого разделу контента. Давайте взглянем на следующий пример:
<body> <footer><a href=”..”>Back to index...</a></footer> <hgroup> <h1>Lorem</h1> <h2>Ipsum</h2> </hgroup> <p>Какой-то текст.</p> <footer><a href=”..”>Back to index...</a></footer> </body>
“address” тег
address элемент, представляет контактную информацию для своего ближайшего article или body элемента. Например:
<address> <a href="../People/Raggett/">Dave Raggett</a>, <a href="../People/Arnaud/">Arnaud Le Hors</a>, контактные лица для <a href="Activity">W3C HTML Activity</a> </address>
W3C также хотел бы отметить, что как правило, address элемент будет включен наряду с другой информацией в footer элемента. Это будет хорошо работать специально для электронной почты или about.me ссылок, на днище сайтов (рядом с информацией об авторских правах). Вы можете это поместить в address элемент следующим образом:
<footer> <address> Для подробной информации, свяжитесь с <a href="mailto:pm@example.com">Pavel Mikuta</a>. </address> <p><small>© copyright 2038 Example Corp.</small></p> </footer>
HTML5 Шаблон
Итак, после того, как мы узнали о HTML5, давайте перейдем к кодированию нашего собственного HTML5 шаблона. Давайте начнем с обычного документа.
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> </head> <body> </body> </html>
Теперь давайте добавим stylesheet ссылку
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
Теперь можно начинать настройку нашего body элемента со структурой, для использования в других проектах. Так что с учетом этого, давайте сделаем:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup></hgroup> </header> <section> </section> <footer> <hgroup> </hgroup> <address></address> </footer> </body> </html>
Сейчас, как вы видите, у нас появилось место для нашего контента. В наличии есть несколько определенных секций: footer, header и section элемент в документе. Теперь, давайте добавим элемент навигации.
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 шаблон</h1> <h3>стандартный</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <hgroup></hgroup> <address></address> </footer> </body> </html>
Мы, добавили навигацию с неупорядоченным списком в заголовке. А что делать, если у вас есть большой подвал (footer )и вы хотите, чтобы те же самые элементы-навигаторы находились там?! Давайте добавим их туда. За исключением того, что на этот раз мы не будем использовать тег <nav>, а вместо этого воспользуемся div с классом “footer_navigation”. И пока мы здесь находимся, давайте заполним footer контентом.
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 шаблон</h1> <h3>стандартный</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <div class="footer_navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </div> <hgroup> <h3>By Pavel Mikuta </h3> <h4>from Moscow, Russia</h4> </hgroup> <address> <a href="mailto:mikuta.pavel@gmail.com">Email Me</a> </address> </footer> </body> </html>
Теперь давайте добавим немного деталей для IE, и другие тонкости:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>HTML5 шаблон</title> <meta name="description" content=""> <link rel="stylesheet" href="css/style.css"> <!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <header> <hgroup> <h1>HTML5 шаблон</h1> <h3>стандартный</h3> </hgroup> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </nav> </header> <section> </section> <footer> <div class="footer_navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About HTML5</a></li> </ul> </div> <hgroup> <h3>By Pavel Mikuta</h3> <h4>from Moscow, Russia</h4> </hgroup> <address> <a href="mailto:mikuta.pavel@gmail.com">Email Me</a> </address> </footer> </body> </html>
Вот и все, стандартный HTML5 шаблон готов!
