HTML5

Тема в разделе "Верстка", создана пользователем duncan, 2 май 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. duncan

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

    Регистр.:
    10 апр 2007
    Сообщения:
    1.590
    Симпатии:
    437
    В 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>
     
    Последнее редактирование модератором: 15 янв 2014
    jusuf нравится это.
  2. mxa

    mxa Постоялец

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

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

    html5shiv
    http://code.google.com/p/html5shiv/
    Добавляет новые теги из ХТМЛ5.

    ie7-js
    https://code.google.com/p/ie7-js/
    А вот это по моему самая лучшая реализация потому что включает в себя очень много возможностей (CSS3+HTML5) которых нет в ИЕ6-8. Но надо устанавливать IE9.js, тогда все по максимуму. Возможностей много, вот тут они все описаны http://ie7-js.googlecode.com/svn/test/index.html

    Modernizr
    http://modernizr.com/
    http://habrahabr.ru/post/144352/
    Проверяет какие новые возможности поддерживает ваш браузер.

    selectivizr
    http://selectivizr.com/
    CSS3 selectors for IE

    pie
    http://css3pie.com
    Добавляет в ie: border-radius box-shadow border-image multiple background images linear-gradient as background image

    CSS3 selectors for IE
    http://selectivizr.com/
     
    dr.Web, crazyzubr и pavel.handleman нравится это.