HTML5

duncan · 2 Май 2012

В HTML5 добавили несколько интересных и полезных тегов для структурирования вашей разметки. Многие из этих тегов заменят типичные элементы div которые мы часто используем.

Начнем перечисление тегов:

section - Предназначен для тематический группировки контента, обычно ставится после заголовка, возможно в конце страницы. section может быть вложен в любой другой тег, если понадобится может содержать любое количество типичной разметки.

HTML:

<section></section>

header - Используется для указания заголовка для section (разделов), также для группировки заголовков, но может также содержать дополнительную информацию о разделе.

HTML:

<header></header>

footer - Обычно содержит информацию о разделе, ссылки на похожие документы, копирайты и т.д.

HTML:

<footer></footer>

nav - Определяет область навигации, как правило список ссылок. Как правило должен располагаться между section, header и footer

HTML:

<nav></nav>

article - Независимая запись в блоге, журнале и т.д.

HTML:

<article></article>

aside - Указывает вторичную информацию о записи (пояснение).

HTML:

<aside></aside>

HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Стандартный блог</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Стандартный блог</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Главная</a></li>
        <li><a href="#">Архив</a></li>
        <li><a href="#">О блоге</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Заголовок</a></h1>
        </header>
        <section>
          <p>Тут текст...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights<p>
    </footer>
  </body>
</html>

mxa · 3 Июл 2012

Решил полностью пересесть на HTML5. Единственная проблема это ИЕ до 9-й версии, но это очень легко лечится с помощью подключения js. Привожу лучшие js из тех что я нашел. На жаль добавление новых возможностей из CSS3 реализовано очень слабо. А вообще рекомендую к прочтению Брайан Хоган HTML5 и CSS3. Веб-разработка по стандартам нового поколения. Все очень толково описано и разложено по полочках в отличии от другой литературы, много того что другие не верно истолковывают. Но тут же вылазит проблема CMS которые на данный момент вообще не поддерживают HTML5 и выдают старый добрый xhtml.

HTML5 ★ Boilerplate
Для просмотра ссылки Войди или Зарегистрируйся
Большой шаблон с кучей всего для корректной работы ХТМЛ5. Слишком уж заумно и лень переписывать и разбираться под себя.

html5shiv
Для просмотра ссылки Войди или Зарегистрируйся
Добавляет новые теги из ХТМЛ5.

ie7-js
Для просмотра ссылки Войди или Зарегистрируйся
А вот это по моему самая лучшая реализация потому что включает в себя очень много возможностей (CSS3+HTML5) которых нет в ИЕ6-8. Но надо устанавливать IE9.js, тогда все по максимуму. Возможностей много, вот тут они все описаны Для просмотра ссылки Войди или Зарегистрируйся

Modernizr
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Проверяет какие новые возможности поддерживает ваш браузер.

selectivizr
Для просмотра ссылки Войди или Зарегистрируйся
CSS3 selectors for IE

pie
Для просмотра ссылки Войди или Зарегистрируйся
Добавляет в ie: border-radius box-shadow border-image multiple background images linear-gradient as background image

CSS3 selectors for IE
Для просмотра ссылки Войди или Зарегистрируйся

HTML5

duncan

батяр з личакова

mxa

Постоялец