HTML5

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

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

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

    Регистр.:
    10 апр 2007
    Сообщения:
    1.596
    Симпатии:
    441
    В 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
    Перейти по ссылке
    Большой шаблон с кучей всего для корректной работы ХТМЛ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
    Перейти по ссылке
     
    dr.Web, crazyzubr и pavel.handleman нравится это.