Анонс HTML 5. Часть 1: Структура

Интернет постоянно развивается. Новые и инновационные веб-сайты создаются каждый день, раздвигая границы HTML во всех направлениях. HTML 4 использовался в течении почти десяти лет, и разработчики постоянно ищут новые решения для расширения функциональности, которая в настоящее время сдерживается ограничениями языка и браузеров. Чтобы предоставить авторам больше гибкости и совместимости, и позволить создавать интерактивные и интересные сайты и веб-приложения, в HTML 5 вводится широкий спектр функций, включая формы контроля, средства API, мультимедиа инструменты, новые структурные и семантические элементы.

Работы по HTML 5, которые начались в 2004 г., в настоящее время осуществляется в рамках совместных усилий между W3C HTML WG и WHATWG. В разработке принимают участие многие ключевые фигуры W3C , в том числе представители четырех основных производителей браузеров: Apple, Mozilla, Opera и Microsoft, а также ряд организаций и частных лиц с различными интересами и обширным опытом.

Отметим, что спецификация по-прежнему в процессе разработки и довольно далека от завершения. Таким образом, вполне возможно, что любые функции отмеченные в настоящей статье, могут измениться в будущем. Цель этой статьи — дать краткое представление о некоторых ключевых моментах в текущем состоянии проекта.

Структура


Большинство страниц написанных на HTML 4 включает ряд общих элементов, такие как «шапки», «подвалы» и колонки. Сегодня такое строение является довольно распространенным, с использованием элементов div, описывая каждый элемент идентификатором или классом.



Схема иллюстрирует типичный шаблон с двумя колонками размеченными div'ами с идентификатором класса в качестве атрибута. Он включает в себя «шапку», «подвал», и горизонтальную панель навигации ниже «шапки». Центр шаблона включает в себя блок «articles», и блок справа.

Широкое применение элементы div нашли в основном из-за того что в настоящей версии HTML отсутствуют необходимые семантические элементы для более эффективного описания блоков страницы. В HTML 5 этот вопрос может быть решен за счет введения новых элементов, для разметки каждого из разделов шаблона.



Контейнеры div могут быть заменены новыми: header, nav, section, article, aside и footer.

Код этого документа может выглядеть следующим образом:



<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

Вот несколько преимуществ использования новых элементов. При использовании в сочетании с заголовками (h1-h6), становится возможным разметить вложенные друг в друга разделы шестью уровнями. Спецификация имеет подробный алгоритм построения шаблона, который принимает во внимание структуру новых элементов и делает их обратно совместимыми с предыдущими версиями HTML. Это может быть полезно для создания оглавлений, призванных помочь пользователям в навигации по документу.
Например, следующая структура разметки отмечен с вложенными разделами и заголовками h1:


<section>
  <h1>Level 1</h1>
  <section>
    <h1>Level 2</h1>
    <section>
      <h1>Level 3</h1>
    </section>
  </section>
</section>

Отметим, что для улучшения совместимости с существующими браузерами, можно также использовать другие заголовки (h2-h6) вместо h1.

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

Например, они могут легко перейти в раздел навигации или быстрого перехода от одной статьи к следующему без необходимости делать ссылки на следующий раздел или страницу. Использование новых семантических контейнеров облегчит понимание кода страницы, сделает его более четким и понятным.

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


<header>
  <h1>A Preview of HTML 5</h1>
  <p class="byline">By Lachlan Hunt</p>
</header>

<header>
  <h1>Example Blog</h1>
  <h2>Insert tag line here.</h2>
</header>

Колонтитул («подвал») может содержать в себе все, что касается этого раздела. Обычно колонтитул содержит информацию о разделе, например, авторство, ссылки на документы и тому подобную информацию.

<footer>© 2007 Example Inc.</footer>

Контейнер

метки:

Комментариев нет:

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

Подписаться на: Комментарии к сообщению (Atom)