Skip to content

Неделя HTML5 - Азы

Привет, друзья! Этим материалом я запускаю цикл статей «Неделя HTML5», в течении которой я буду рассказывать новшества новой версии языка разметки гипертекста. А начнем мы сегодня с самых азов!

Создаем новый HTML5-документ

Итак, с приходом HTML5 несколько изменился код страницы. Для пустого документа, который мы будем  потом наполнять, нам понадобится следующий код:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Страница на HTML5</title>
</head>
<body>
</body>
</html>

Что же у нас здесь нового:

  1. Укоротился доктайп, с помощью которого мы говорим браузеру работать с HTML5 (1-я строка)
  2. Чтобы задать кодировку документа, теперь можно пользоваться коротким мета-тегом <meta charset=»»>. Но не забывайте, что какую кодировку вы вписали, в такой кодировке и должен быть сохранен документ!

А в остальном пока все по старому, те же <html>, <head> и <body>.

Область <head>

Там почти ничего не изменилось. С помощью <link> и <script> вы по прежнему подключаете таблицы стилей и скрипты, а <title> задаст заголовок. Но вот что новенького:

  • <noscript>: подгружает содержащиеся в нем файлы, если JavaScript отключен, например следующая строка подгрузит таблицу стилей no-js.css, предназначенную специально для пользователей без JavaScript:
    <noscript><link rel="stylesheet" href="no-js.css"/></noscript>
  • <base>: позволяет авторам указать главный URL страницы, для правильной работы относительных ссылок. Обязательный атрибут — href (главный URL), и необязательный — target. Пример:
    <base href="http://www.example.com/">

Секции заменяют блоки!

Уже давно блочная верстка заменила табличную. В HTML5 мы будем пользоваться все той же блочной версткой, но некоторые слои <div> будут заменены на другие секции.

Шапка сайта: если раньше шапкой служил div#header (во многих случаях), то сейчас есть секция <header>, которая содержит в себе вводный контент (определение по спецификации). Но раз мы заменяем блок, то в header мы поместим логотип, навигацию, форму поиска и еще чего-нибудь, если захочется. Пример:

<header>
<h1><a href="http://onfire.space">onfire.space</a></h1>
</header>

Подвал сайта: здесь все по аналогии с шапкой. Раньше обычно подвалом был div#footer, а теперь в место него можно использовать <footer>. Например:

<footer>
© 2013 <a href="http://onfire.space">onfire.space</a>
</footer>

Сайдбар: вместо div#sidebar теперь можно использовать секцию <aside>. Из самого названия уже следует, что эта секция должна находиться в стороне, а это ни что иное, как сайдбар. Вот вам пример его использования:

<aside>
<h2>Уроки</h2>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</aside>

Секция: она и есть секция, и может заменить большинство блоков <div>, а тег следующий <section>. Пример:

<section>
<h1>Level 1</h1>
<section>
<h1>Level 2</h1>
<section>
<h1>Level 3</h1>
</section>
</section>
</section>

Заметка: например на блогах часто используют div.post, а теперь его можно заменить на <article>. Вот следующий пример:

<article>
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack Osborne</a></h4>
<time datetime="2007-08-29T13:58Z">August 29th, 2007 at13:58</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eveniet debitis cum assumenda aliquid odio quia ad tempore repellendus molestias quidem ab aut culpa cumque facilis. Eius consequuntur sed tenetur.</p>
</article>

Навигация: теперь ее можно представить тегом <nav>, который группирует ссылки на важные страницы сайта. Вот как навигация будет выглядеть теперь:

<nav>
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<ul>
</nav>

Группировка заголовков: еще один новый тег появился в HTML5, с помощью которого можно группировать заголовки h1-h6, это тег <hgroup>. Его очень часто сейчас помещают в шапку, а в него логотип или форму поиска или еще что-то. Вот пример:

<hgroup>
<h1>onfire.space</h1>
<h2>Неделя HTML5 началась</h2>
</hgroup>

Заключение

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Неделя HTML5 - Азы</title>
<noscript>
<link rel="stylesheet" href="no-js.css"/>
</noscript>
<base href="http://www.example.com/">
</head>
<body>
<header>
<hgroup>
<h1><a href="http://onfire.space">onfire.space</a></h1>
<h2>Неделя HTML5 началась</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
<li><a href="#">Nav Link</a></li>
<ul>
</nav>
</header>
<section id="content">
<section id="articles">
<article>
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack Osborne</a></h4>
<time datetime="2007-08-29T13:58Z">August 29th, 2007 at13:58</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eveniet debitis cum assumenda aliquid odio quia ad tempore repellendus molestias quidem ab aut culpa cumque facilis. Eius consequuntur sed tenetur.</p>
</article>
<article>
<header>
<h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack Osborne</a></h4>
<time datetime="2007-08-29T13:58Z">August 29th, 2007 at13:58</time>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores eveniet debitis cum assumenda aliquid odio quia ad tempore repellendus molestias quidem ab aut culpa cumque facilis. Eius consequuntur sed tenetur.</p>
</article>
</section>
<aside>
<h2>Уроки</h2>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</aside>
</section>

<footer>
© 2013 <a href="http://onfire.space">onfire.space</a>
</footer>
</body>
</html>

На сегодня это все. Продолжим изучать HTML5 завтра!

Данная запись является частью серии "Неделя HTML5".

Неделя HTML5 - Таблицы