Справочник по CMS Atomax version 2.0
 

Предварительный обзор HTML5


Следующая статья: 

Содержание

Актуально на 2008.04.02

Короткое описание основных деталей и параметров как они есть в текущей версии HTML5

1 января 2010 года совсем согласовано аббревиатура html пятой версии.

Верно необходимо писать: HTML5 - без пробела и без приписки, типа 5.0

Вступление

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

Чтоб дать создателям больше гибкости и способностей взаимодействия, методов сделать больше интерактивных и захватывающих web сайтов и приложений - HTML5 предоставляет широкий круг способов, включая управление формами, API, мультимедиа, структуры и семантики.

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

Стоит увидеть, что спецификация все еще в разработке и довольно далека от окончания. Раз так, может быть, что неважно какая деталь, описанная в статье может поменяется. Эта статья призвана предоставить короткое описание самых основных деталей и параметров как они есть в текущей версии HTML5.

Структура

HTML5 представляет полный набор новых частей, делающих его намного проще для сотворения структуры страничек. Большая часть страничек, написанных на HTML 4, включают широкий набор общих блоков – таких как высшая часть, нижняя часть и колонок. И сейчас в порядке вещей размечать их, используя теги div, присваивая каждому описывающий id либо class.

Обычная 2-колоночная раскладка

Обычная 2-колоночная раскладка

Изображение указывает всераспространенную двух колоночную раскладку, сделанную при помощи блоков div с id и class-ами. Она содержит header, footer и горизонтальное навигационное меню под header-ом. Главное содержимое состоит из "статьи" и правой колонки.

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

Новые элементы HTML5

Новые элементы HTML5

Блоки div могут быть изменены новыми элементами: header, footer, nav, section, article, aside и footer.

Разметка этого документа будет таковой:

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

Есть несколько преимуществ использования таких частей. Используя их вместе с заголовками (h1 – h6), можно делать разметку вложенных секций с надлежащими уровнями заголовков. С прошлыми версиями HTML - прямо до 6 уровней. Спецификация содержит в себе детализированный метод сотворения схемы документа, который учитывает структуру таких частей и совместим с прошлыми версиями. Он может быть применен как в инструментах разработки, так и в браузерах для сотворения содержания в помощь пользовательам при навигации по документу.

Например, последующая структура разметки организована при помощи вложенных section и заголовков h1:

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

Заметьте, что для большей сопоставимости с текущими версиями браузеров также может быть внедрение других заголовков (h2 – h6) в подходящих случаях заместо h1.

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

Элементы header представляют собой заглавия разделов. Они могут состоять из нескольких частей – к примеру, было бы оправданно делить блок заголовка на подзаголовки, историю версий либо указание авторства.

<header>  <h1>A Preview of HTML5</h1>  <p class="byline">By Lachlan Hunt</p>  </header>  <header>  <h1>Example Blog</h1>  <h2>Insert tag line here.</h2>  </header>

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

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

Блок nav содержит перечень ссылок для навигации. Подходит, к примеру, для навигации по web сайту, либо для содержания.

<nav>  <ul>  <li><a href="/">Home</a></li>  <li><a href="/products">Products</a></li>  <li><a href="/services">Services</a></li>  <li><a href="/about">About</a></li>  </ul>  </nav>

Элемент aside подходит для размещения содержимого любым образом схожего основному контенту. В обыкновенном случае будет полезен для разметки боковой колонки.

<aside>  <h1>Archives</h1>  <ul>  <li><a href="/2007/09/">September 2007</a></li>  <li><a href="/2007/08/">August 2007</a></li>  <li><a href="/2007/07/">July 2007</a></li>  </ul>  </aside>

Тег section представляет общий раздел документа либо приложения, например, таковой как глава.

<section> <h1>Chapter 1: The Period</h1> <p>It was the best of times, it was the worst of times,  it was the age of wisdom, it was the age of foolishness,  it was the epoch of belief, it was the epoch of incredulity,  it was the season of Light, it was the season of Darkness,  ...</p> </section>

Тег article отмечает независящий раздел документа, странички либо web сайта. Применим для такового содержимого как анонсы, записи блога, сообщения в форуме либо комменты пользователей.

<article id="comment-2">  <header>  <h4><a href="#comment-2" rel="bookmark">Comment #2</a> by <a href="http://example.com/">Jack O'Niell</a></h4>  <p> <time datetime="2007-08-29T13:58Z">August 29th, 2007 at 13:58</time>  </header>  <p>That's another great article!</p>  </article>













© 2008–2018. Korvin Industries. Все права защищены.
 

Я выбираю Хостинг: