—»     —»   Структурные тэги в HTML5
  Раздел: Образование и Изучение   Комментариев: 3  

Структурные тэги в HTML5

Структурные тэги в HTML5

Технология HTML5 принесла нам множество интересных функций и полезных тэгов для структуризации ваших проектов. Новые тэги вполне вероятно заменят множественные ухищрения с div’ами. Давайте рассмотрим подробнее.

Определение структуры

«section»

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

«header»

Секция заголовка – это, в основном, заголовок группирования заголовков, но она также может содержать в себе дополнительную информацию о секции.

«footer»

Подвал, в основном, содержит в себе информацию о самой секции (кем был создан проект, ссылки на похожие ресурсы, информация об авторском праве и т.п.).

«nav»

Определяет область с навигацией. Например, список ссылок. Nav должен быть на одном уровне вместе с основным содержимым, заголовком и подвалом.

«article»

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

«aside»

Данный тэг определяет контент, который поверхностно схож с содержимым вокруг него.

Как это всё работает вместе?

Итак, давайте наглядно рассмотрим процесс применения этих новшеств на простой странице блога.

<!DOCTYPE html>
<html>
  <head>
    <title>Standard Blog</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Standard Blog</a></h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Archives</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
      <article>
        <header>
          <h1><a href="#">Title</a></h1>
        </header>
        <section>
          <p>Lorem ipsum...</p>
        </section>
      </article>
    </section>
    <footer>
      <p>Copyright © 2008 All Rights</p>
    </footer>
  </body>
</html>

Заметка: В плане разметки этот пример достаточно прост, но некоторые моменты особенно выделены.

Как видно, сами по себе тэги уже очень наглядны, нежели когда мы задаём ID к DIV’у. Здесь также стоит отметить дополнительное преимущество закрывающего тэга, так как «/article» гораздо легче понять и определить назначение, нежели which «div id="что-то"» с закрывающим тэгом «/div».

Можно ли это применять сейчас?

В целом, можно, но с некоторыми условиями. Кстати, это будет работать во всех браузерах, включая даже IE6. Нам нужно лишь кое-что учесть для того, чтобы новая технология заработала.

Для начала, так как многие браузеры всё ещё плохо справляются с типом документов HTML5, они могут даже и не подозревать о наличии новых тэгов в данной технологии. К счастью, благодаря гибкости браузеров, они отлично справляются и с неизвестными тэгами. Эти новые тэги HTML5 являются структурными, и они, конечно же, являются блочными элементами. Итак, когда мы задаём им стиль CSS, мы обязательно должны включать параметр display: block;.

Включите этот простенький кусочек CSS, и все новые тэги сейчас же станут рабочими. Начиная прямо с сегодняшнего дня. И, конечно же, когда HTML5 будет восприниматься более серьезно и широко, можно будет исключить и этот параметр, так как он будет внесён в набор параметров браузера по умолчанию.

Поддержка IE

Есть ещё кое-что, что нужно знать, если вы собираетесь делать так, чтобы ваш проект работал в IE. Получилось так, что данный браузер будет работать со всеми новыми тэгами, но проблема в том, что он не станет распознавать какую-либо стилизацию CSS, применённую к этим тэгам, и это нехорошо. К счастью, IE нужен всего лишь хороший пинок, а точнее – немного кода javascript. Всё, что нам нужно сделать, это создать DOM с javascript для каждого тэга, и тогда наш любимый Internet Explorer волшебным образом тут же начинает воспринимать стилизацию новых тэгов. Код будет выглядеть примерно так, и он может быть размещен в голове нашего документа, либо содержимое тэга скрипта может быть размещено во внешнем файле, который подключен в документ.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

Перед тем, как мы отойдем от этого кода, нужно учесть ещё кое-что о тэге скрипта в HTML5. HTML5 будет воспринимать type="text/javascript" в любом элементе скрипта, так что это тоже надо использовать. Всё гораздо проще.

Подкрепление

Итак, мы можем начать разработку уже прямо сейчас, и при этом пользоваться новыми тэгами, предложенными в HTML5. Посредством нескольких простых трюков, мы можем заставить эти тэги работать. Так что, когда в следующий раз вы будете браться за разработку веб-сайта, не забудьте применять HTML5, и сделайте разметку своего сайта немного более понятной.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Mysterious Master   Прочитано (раз): 8426   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 апреля 2011 @ 22:38
Написал: player — группа: Читатели  
На сайте с: 16.04.2010   |   Публикаций: 0   |   Комментариев: 35
ICQ: --- не указано ---
Большое спасибо за статью.
Комментарий #2: 2 апреля 2011 @ 22:48
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
player, пожалуйста! Все для вас smile
Комментарий #3: 7 октября 2011 @ 16:17
Написал: NoLogo — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за перевод данной статьи и за ресурс в целом.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031