Попередній огляд HTML5

Лаклан Хант

Мережевий простір постійно розвивається. Нові та інноваційні веб-сайти створюються кожен день, розширюючи межі HTML у кожному напрямку. HTML4 був навколо нас протягом майже десяти років, і видавці шукають нові методи для забезпечення розширеної функціональності, яка стримується обмеженнями мови та браузерів.

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

Робота над HTML5 розпочалася у 2004 році і наразі виконується в рамках спільних зусиль між W3C HTML WG та WHATWG. Багато ключових гравців беруть участь у роботі W3C, в тому числі представники чотирьох основних постачальників браузерів: Apple, Mozilla, Opera та Microsoft, а також інші організації та приватні особи із своїми інтересами та досвідом.

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

Структура

HTML5 вводить цілий ряд нових елементів, які спрощують структуру сторінок. Більшість сторінок на HTML4 містять типові елементи, такі як "шапка", "підвал" та колонки. Тепер, як правило, у коді документа вони позначаються за допомогою елементів <div>, описуючи кожен атрибутом id або class.

Використовувати елементи <div> правильно, оскільки в HTML4 не вистачає необхідної семантики для опису цих частин більш конкретно. HTML5 вирішує цю проблему шляхом впровадження нових елементів для представлення кожного з цих різних розділів.

Код для цього документа виглядає так:

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

Ось деякі переваги від застосування цих елементів. Коли вони використовуються в поєднанні з елементами заголовків (від <h1> до <h6>), це дозволяє розмітити вкладені розділи за рівнями заголовків, аж до шостого. Специфікація включає докладний алгоритм для створення схеми документа, який бере до уваги структуру цих елементів та забезпечує зворотню сумісність з попередніми версіями. Це можуть використовувати як засоби розробки, так і браузери для створення змісту, щоб допомогти користувачам з навігацією по документу.

Наприклад, наступний код структурований вкладеними елементами <section> і <h1>.

<section>
  <h1>Рівень 1</h1>
  <section>
    <h1>Рівень 2</h1>
    <section>
      <h1>Рівень 3</h1>
    </section>
  </section>
</section>

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

Позначаючи цільові розділи сторінки за допомогою спеціальних тегів, допоміжні технології можуть допомогти користувачеві легко переміщатися по сторінці. Наприклад, вони можуть просто пропустити розділ навігації або швидко переходити від однієї статті до іншої. Автору не доведеться забезпечувати механізм створення посилань для цього. Також автори отримують перевагу, оскільки заміна багатьох <div> на кілька різних елементів допомагає зробити вихідний код зрозумілішим та простішим.

Елемент <header> визначає заголовок розділу, який може містити більше, ніж просто назву розділу. Наприклад, доцільно для заголовка включити підзаголовок, інформацію про версію історії або авторство.

<header>
  <h1>Попередній огляд HTML5</h1>
    <p class="byline">Лаклан Хант</p>
  </header>
  <header>
    <h1>Блог</h1>
    <h2>Вставте сюди слоган.</h2>
</header>

Елемент <footer> визначає підвал розділу, в якому додається. Підвал зазвичай містить таку інформацію як: хто написав, посилання на відповідні документи, авторські права тощо.

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

Елемент <nav> представляє розділ навігаційних посилань, він підходить для навігації по сайту або змісту.

<nav>
  <ul>
    <li><a href="/">Додому</a></li>
    <li><a href="/products">Продукція</a></li>
    <li><a href="/services">Послуги</a></li>
    <li><a href="/about">Про нас</a></li>
  </ul>
</nav>

Елемент <aside> призначений для вмісту, який має опосередковане відношення до контенту поруч з ним, зазвичай використовується для позначення бічної панелі.

<aside>
  <h1>Архіви</h1>
  <ul>
    <li><a href="/2007/09/">Вересень 2007</a></li>
    <li><a href="/2007/08/">Серпень 2007</a></li>
    <li><a href="/2007/07/">Липень 2007</a></li>
  </ul>
</aside>

Елемент <section> визначає універсальний розділ документа або застосунку, наприклад, розділ.

<section>
  <h1>Розділ 1: Та година</h1>
  <p>Це було краще з усіх часів, це було гірше з усіх часів; 
     це було століття мудрості, це було століття дурощів; 
     це була епоха віри, це була епоха безвіри; 
     це були роки Світла, це були роки Темряви; 
     ...</p>
</section>

(Уривок з "Повість про два міста")

Елемент <article> представляє самостійний розділ документа, сторінки або сайту. Він підходить для вмісту як новини, статті блогу, повідомлення форуму або окремих коментарів.

<article id="comment-2">
  <header>
    <h4><a href="#comment-2" rel="bookmark">Коментар #2</a>
       <a href="http://example.com/">Джек О'Ніл</a></h4>
    <p><time datetime="2007-08-29T13:58Z">29 серпня 2007 о 13:58</time>
  </header>
  <p>Це велика стаття!</p>
</article>

Відео та аудіо

Останнім часом відео та аудіо в Інтернеті стає все більш життєздатним, і сайти типу YouTube, Viddler, Revver, MySpace та десятки інших полегшують життя тим, хто публікує відео та аудіо. HTML наразі не має необхідних засобів для успішного вбудовування та керування мультимедіа, тому багато сайтів покладаються на Flash, щоб забезпечити цю функціональність. Хоча можна вставляти мультимедіа за допомогою різних плагінів (таких як QuickTime, Windows Media та ін.), Flash зараз єдиний широко використовуваний плагін, який забезпечує кросбраузерну сумісність з необхідними для розробників API-інтерфейсами.

Як свідчать різні медіаплеєри на основі Flash, їх автори зацікавлені в підтримці власних користувацьких інтерфейсів, які зазвичай дозволяють користувачам відтворювати, паузувати, зупиняти, шукати та регулювати гучність. Планується забезпечити цю функціональність в браузерах, додавши вбудовану підтримку для відео та

Часті запитання