Основы вёрстки HTML5

Сегодня я покажу основные моменты, которые стоит знать при работе с HTML5, и мы с вами сверстаем базовый HTML5-шаблон.

Начнём работу. Первое, что стоит прописать в новом документе — это DOCTYPE:

<!doctype html>

Сразу же бросаются в глаза длина написания и маленькие буквы. Так теперь можно. От регистра вообще ничего не зависит. В прежнем формате это выглядело примерно так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Чувствуете разницу?

Идём дальше — меняем обозначение кодировки с вот такого

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

на такое:

<meta charset=utf-8>

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

Определяем язык, пишем вместо

<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">

это:

<html lang=ru>

Упростились также и ссылки на стили — атрибут type исчез, теперь это выглядит так

<link rel="stylesheet" href="style.css" />

Вместо прежнего

<link rel="stylesheet" href="style.css" type="text/css" /> 

Не нужно добавлять атрибут type для элементов <script> и <style>. Если, конечно rel не однозначный, например, на rel=alternate.

Прежде чем перейти к контенту, стоит остановиться ещё на 1-м моменте. Это хак под IE. Explorer не понимает новых тегов, так что стоит прописать скрипт для фиксации:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Еще необходимо сделать новые элементы блочными (это уже в css-файле):

aside, nav, footer, header, section { display: block }

Тут вроде всё разобрали, двигаемся дальше. Рассмотрим конструкцию, например, блога, в HTML4 и HTML5, а дальше я поясню различия

HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ru" dir="ltr" class="client-nojs" xmlns="http://www.w3.org/1999/xhtml">
     <head></head>
     <body>
          <div id="header"> Шапка
               <div id="navigation">Навигация</div>
          </div>

          <div id="content">
               <div id="post">Пост</div>
               <div id="sidebar">Боковая колонка</div>
          </div>

          <div id="footer">Подвал</div>
     </body>
</html>
 

И теперь взглянем по-новому:

HTML5

<!doctype html>
    <html lang=ru>
    <head></head>
    <body>
        <header> Шапка
             <nav>Навигация</nav>
        </header>

        <section id="content">
             <article>Пост</article>
             <aside>Боковая колонка</aside>
        </section>

        <footer>Подвал</footer>
    </body>
</html>
 

Как видно, всё порядком упростилось, а также появилось несколько новых тегов, которые более ясно отображают содержимое страницы для поисковых роботов.

  • <header> — шапка сайта.
  • <nav> — блок навигации. Лучше всего подходит для списка главных навигационных ссылок.
  • <aside> — боковая колонка
  • <article> — независимый текст, например, статья или 1-н комментарий.
  • <section> — раздел документа.
  • <footer> — футер сайта (подвал)

Cтоит отметить, что этот тег section во многих случаях заменяет div.

Правила по использованию тега section.

  • Не надо его использовать в качестве обёртки для скриптов или как стилистический блок.
  • Не надо его использовать, если по смыслу больше подходят article, nav или aside
  • Не надо его использовать, если внутри нет логического заголовка.

Тут, кстати, интересный момент — в каждом разделе может быть свой h1, то есть теперь их может быть несколько на странице.

Дополню этот список не столь важными, но тоже полезными тегами

  • <figure> — подпись к картинке или видео.
  • <hgroup> — блок заголовков. Например, заголовок и подзаголовок.
  • <mark> — выделение важного слова (желтенький тут не спроста — это <mark> в действии).
  • <output> — вывод программы или результаты вычислений.
  • <time> — время. Время нельзя писать буквами, например, 12 апреля 2012.

У картинок исчез атрибут title (остался alt). Для полей поиска появился полезный атрибут placeholder — если он установлен, то в поле поиска появляется фраза, которая исчезает при клике на него. Например,

<input type="text" name="s" placeholder="Искать" /> 

Результат вы можете посмотреть у меня в боковой колонке, наверху страницы.

Это, конечно, не весь список, появилось много новых атрибутов, типов <input> и значений rel.

Конечный результат:

 <!doctype html>
<html lang=ru>
  <head>
      <meta charset=utf-8>
      <title>HTML5</title>
      <link rel="stylesheet" href="style.css" />
      <!--[if IE]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
 </head>
 <body>
      <header> Шапка
           <nav>Навигация</nav>
      </header>

      <section id="content">
           <article>Пост</article>
           <aside>Боковая колонка</aside>
      </section>

      <footer>Подвал</footer>
   </body>
</html>
 

Я уже перевёл свой блог на HTML5, дело за вами!

Читателям также нравится:

Обратите внимание!

Запущена новая версия сообщества для творческих людей — TopCreator, которое мой блог всячески поддерживает. Мы верим, что проект нужен российским дизайнерам, иллюстраторам и фотографам — мы хотимы быть вам полезны! Очень интересный проект, будьте среди первых. Заходите сюда

Комментарии

  1. 20 Фев
    дарья

    спасибо, как всегда отлично! вопрос: вы пишите, что теперь может быть несколько h1 на одной странице. получается, я была глубоко неправа, когда в своем первом сайте (совсем недавнем) ставила по-многу h1 на одной странице (страница стихов, название каждого h1). И в новом сайте неправа, когда у меня название сайта h1 и на странице опять много стихов с заголовками h1?

  2. 20 Фев
    naikom

    Если у вас там HTML4, то там сразу несколько h1 использовать нельзя.
    Если HTML5 — можно, но посты (стихи) лучше заключать в тег article, и вот тут я, честно говоря, не уверен, что можно несколько раз h1 указывать, надо уточнять этот вопрос. На западных сайтах, как я погляжу, названия постов в HTML5-шаблонах заключают всё-таки в h2

  3. 20 Фев
    batazor

    Хорошо написано, побольше бы…

  4. 20 Фев
    Даня

    Отлично! Именно самая нужная инфа про html5 что хотелось знать, теперь думаю конкретно переходить на него. еще и для ie решение.! Спасибо

  5. 20 Фев
    naikom

    Согласен, надо переходить)

  6. 20 Фев
    дарья

    ооо, как же я была глупа)) а странно, нельзя — но работает. то есть не рекомендуется? а мне казалось это семантически верно — название стиха же важная вещь. ну ладно, исправлю. спасибо еще раз!

  7. 21 Фев
    Настя Манно

    Привет, Михаил! Думаю, здесь ошибка:
    У ссылок исчез атрибут title (остался alt)
    Не у ссылок, а у картинок, наверное?

  8. 21 Фев
    naikom

    Привет! И в правду) Спасибо)

  9. 21 Фев
    Настя Манно

    Да не за что! :) Я пока не рискую переводить блог на пятый html. Прочла книгу Лоусона «Изучаем HTML 5 «. Там все далеко не так просто с новыми тэгами по части семантики. Кстати, валидатор HTML5 жутко не любит тэг noindex. Во всяком случае, в том виде, в котором мы все его привыкли использовать.

  10. 21 Фев
    naikom

    Особенно не просто, как мне показалось, правильное использование section, сначала я запутался и неправильно сверстал.
    а noindex, кажется, не любят поисковики, так что я, например, итак его никогда не использую)

  11. 22 Фев
    Настя Манно

    Да, верно. С section особая замутка, так как по правилам каждая из них должна иметь заголовок как минимум. В общем, поглядим как оно будет дальше )

  12. 13 Июн
    Влад

    Спасибо за статью. Очень интересно. Вот сейчас буду пробывать, новый дизайн верстать на HTML5. Но всё таки ещё не всё понятно, со стороны семантики. Больше бы примеров готовых, эффективных сайтов…:))

  13. 14 Июн
    Дэш

    Спасибо. Есть интересные фишки, которые попробую использовать в работе над новым сайтом.

  14. 25 Сен
    Павел

    Намучился с тэгом куфон. При создании мультиязыкового сайта, кроме английского другие языки не воспринимает.
    На этом http://www.facebook.com/looksogoodclub/app_355182601229091 мини сайте для фэйсбука пытался поменять меню.

  15. 29 Ноя
    Lector

    Да, пора переходить! Скорей бы уже окончательно его утвердили, и чтобы долбанный IE начал его понимать)))

  16. 27 Янв
    Алексей

    Всё замечательно, но как отображать HTML5 в обозревателях IE 7, IE 8?

  17. 14 Июн
    Дмитрий

    Мне кажется, даже с точки зрения SEO тег H1 нельзя несколько раз использовать на странице. С этим моментов не совсем все понятно…

  18. 17 Июн
    Макарий

    Алексей, чтобы HTML5 отображать в IE пропишите в шапке сайта:

  19. 18 Июл
    Олег

    Тег уже отменили, он является невалидным. Зато ввели тег , он указывает на основной контент сайта. Им можно пользоваться как wrap (в идеале).

  20. 18 Июл
    Олег

    Тег hgroup уже отменили, он является невалидным. Зато ввели тег main, он указывает на основной контент сайта. Им можно пользоваться как wrap (в идеале).

  21. 03 Янв
    Сергей

    Настя Манно
    Насколько я знаю тег это тег яндекса и только для него он и понятен, для того чтобы валидаторы не считали его ошибкой — обычно noindex комментируют, так как для яндекса вложенность этого тега роли не играет, он его и в комментах видит. А вот валидаторы ругаться на него в комментах не должны.

  22. 21 Сен
    Демон

    section тут не правильно использован. Он используется в тех случаях, когда статья разделена на параграфы. И каждый section в этом случае содержит название параграфа (заголовок h2).

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1