HTML5, Простий документ
Розглянемо один із найпростіших документів HTML5. Він починається із зазначення типу документа за допомогою спеціального коду опису типу документа (значення цього коду пояснюється в наступному розділі), після чого задається кодування та назва документа, а потім йде його вміст. В даному випадку вміст складається з одного абзацу тексту:
Цей простий документ можна спростити ще більше. Наприклад, кінцевий тег взагалі не є обов'язковим у стандарті HTML5, тому що браузери знають, як закривати всі відкриті елементи в кінці документа (а стандарт HTML5 узаконює цю поведінку). Але подібне зрізання кутів замість спрощення робить розмітку складнішою для розуміння і може спричинити несподівані помилки.
Більшість веб-розробників дотримується думки, що використання традиційних розділів корисно полегшення сприйняття документа, т.к. вони чітко поділяють інформацію про сторінку (заголовок сторінки) та сам вміст (основна частина сторінки). Така структура особливо корисна, коли до сторінки додаються сценарії, таблиці стилів та метаелементи:
Нарешті, весь документ (за винятком рядка doctype) можна одягнути в традиційний елемент, як показано в наступному лістингу:
Аж до HTML5 у кожній версії офіційної специфікації HTML потрібно використання елемента , незважаючи на те, що наявність цього елемента ніяким чином не впливає на обробку браузером решти коду сторінки. У HTML5 використання цього елемента залишено повністю на особистий розсуд розробника.
На даному етапі цей приклад сторінки є середнім між найпростішим HTML5-документом і розширеною відправною точкою практичної веб-сторінки HTML5. У наступних розділах ми додамо до ньогоінші необхідні елементи і копнем глибше в розмітку.
Опис типу документа HTML5
У першому рядку кожного HTML5-документа завжди дається опис типу документа. Цей опис ясно вказує, що далі слідує HTML5-вміст, і виглядає наступним чином:
Перше, що впадає у вічі в описі типу документа HTML5 — це його разюча простота. Порівняйте його, наприклад, з незграбним описом типу документа, який потрібно використовувати веб-розробникам під час роботи зі строгим XHTML 1.0:
Навіть професійні веб-розробники були змушені вставляти опис типу документа XHTML шляхом копіювання та вставки з іншого документа. А опис типу документа HTML5 короткий, чіткий та легко вводиться вручну.
Опис типу документа HTML5 також примітний тим, що він не містить номера офіційної версії HTML (5 для HTML5). У ньому просто вказується, що сторінка є HTML-сторінкою. Це відповідає новій концепції HTML5 як живої мови. Додані до HTML нові можливості автоматично доступні для розміщення на сторінці, не вимагаючи змін у описі типу документа.
Все це породжує непросте питання: якщо HTML5 — жива мова, то навіщо тоді для сторінки взагалі потрібний опис типу документа?
Відповідь це питання таке: опис типу документа продовжує використовуватися з історичних причин. При обробці сторінки з відсутнім описом типу документа більшість браузерів (включно з Internet Explorer і Firefox) переходять у режим сумісності (quirks mode). У цьому режимі вони намагаються відобразити сторінку з урахуванням помилок у правилах, які використовувалися в попередніх версіях. Проблема з цим полягає в тому, що режим сумісності одного браузера може відрізнятись від режимусумісності іншого браузера, внаслідок чого сторінки, розроблені для одного браузера, на іншому браузері будуть швидше відображатися з помилками, такими як неправильний розмір шрифту, порушена структура оформлення і т.п.
А виявивши на сторінці опис типу документа, браузер знає, що обробку цієї сторінки потрібно виконувати, дотримуючись суворіших правил режиму стандартів (standards mode), який забезпечує однакове форматування та структуру сторінки при її відображенні будь-яким сучасним браузером. За деякими винятками, браузеру байдуже, який саме тип документа вказаний в описі. Він просто перевіряє, що сторінка має якийсь опис типу документа. Опис типу документа HTML5 просто найкоротший дійсний опис типу документа, який використовує режим стандартів браузера.
Кодування символів
Кодування — це стандарт, що вказує комп'ютеру, як перетворити текст на послідовність байтів під час запису тексту на файл (і навіть, як виконувати зворотне перетворення під час відкриття файла). З історичних причин у світі існує безліч різних кодувань. В даний час практично на всіх веб-сайтах використовується компактне і швидке кодування UTF-8, що підтримує всі символи інших алфавітів, які вам можуть знадобитися.
Веб-сервери часто налаштовують, щоб повідомляти браузерам, що відвідують їх, що запропоновані сервером сторінки мають певне кодування. Але не можна бути впевненим, що веб-сервер, на якому ви плануєте розмістити свій веб-сайт, буде налаштований таким чином (якщо це не ваш власний сервер). Крім цього, спроба браузера в такому випадку припустити найбільш ймовірне кодування, що використовується, може зазнатиневдачу через якесь маловідоме питання безпеки. З цих причин завжди слід вставляти інформацію про кодування в розмітку сторінки.
HTML5 робить це завдання легким. Для цього потрібно лише вставити елемент на початку блоку (або, якщо елемент не використовується, відразу ж після коду опису типу документа):
Вважається хорошим тоном вказувати природну мову веб-сторінки. Ця інформація може бути корисною для інших, наприклад, пошукові движки можуть використовувати її для фільтрації результатів пошуку, щоб повернути тільки сторінки вказаною мовою.
Щоб вказати мову для будь-якого вмісту, використовується атрибутlang у будь-якому елементі розмітки із завданням коду потрібної мови. Код для української мови – ru, а для англійської – en. Коди для інших мов можна отримати на сторінці people.w3.org/rishida/utils/subtags.
Вставити в веб-сторінку інформацію про мову найлегше через елемент:
Інформація про мову також може бути корисною, якщо сторінка містить текст різними мовами, яку потрібно прочитати за допомогою програми читання екранного тексту. У такому разі атрибут lang з кодом відповідної мови вставляється в потрібному місці документа, наприклад, елементи
Додавання таблиці стилів
Практично у кожній сторінці належно розробленого професійного веб-сайту використовуються таблиці стилів. Для вказівки необхідної таблиці стилів використовується елементу блоці документа HTML5:
Цей спосіб схожий на вказівку таблиць стилів у традиційних HTML-документах, але трохи простіше. Оскільки існує єдина мова каскадних таблиць стилів - CSS, то додавання атрибуту type="text/css", який був потрібний раніше, більше немає потреби.
Всі іншібраузери не звертають уваги на мітку MOTW і використовують одні й ті самі налаштування безпеки як для сторінок, які завантажуються з віддалених веб-сайтів, так і для локальних файлів HTML.