Від автора: вивчаючи HTML5 і освоюючи все нові техніки, ви, швидше за все, захочете створити собі базовий шаблон, з якого можна буде почати будь-HTML5-проект. Ми підтримуємо ваше бажання.
У даному проекті ми будемо писати наш код з нуля і пояснювати кожну його частину. Було б неможливо створити такий проект, в якому були б використані всі існуючі нові елементи і техніки, тому також ми пояснимо, які речі не підійдуть під наш проект. Таким чином, у вас буде великий вибір варіантів, як створити свій HTML5 і CSS3 сайт або веб-додаток. Цією статтею можна буде користуватися, як довідником для ряду технік. Почнемо з порожньою HTML5 сторінки:
The Herald HTML5
Ось наш базовий шаблон. Тепер давайте розберемо окремі частини розмітки і подивимося, як вони записувалися до HTML5.
Doctype
Перша частина — Document Type Declaration (оголошення типу документа) або doctype. Це просто спосіб сказати браузеру, або будь-якому іншому парсеру, який тип документа розглядається. Для HTML файлів необхідно вказувати версію HTML. Doctype завжди оголошується першим в самому верху HTML документа. Давним-давно оголошення типу документа було важко запам’ятовуються і складним заняттям. Приклад суворого оголошення XHTML 1.0:
Перехідною HTML4:
Ці довгі рядки тексту не впливають на продуктивність (завантажується всього-то пара зайвих байт), але в HTML5 взагалі вирішили позбутися від такої складності. Тепер оголошення типу документа виглядає так:
Просто і зрозуміло. Doctype можна записувати у верхньому регістрі, нижньому або взагалі упереміш, не має значення. Також ви могли звернути увагу, що в оголошенні дивним чином відсутня цифра 5. Поточне покоління веб-розмітки відомо нам під номером «HTML5», але насправді це всього лише результат еволюції попередніх HTML стандартів. Майбутні специфікації також будуть просто розвитком сьогоднішніх технологій.
Так як браузери зобов’язані підтримувати всі існуючі типи контенту в Інтернеті, то не можна повністю покладатися тільки на doctype. Іншими словами, один doctype не робить вашу сторінку HTML5 сумісною. Все залежить від браузера. Насправді, можна взагалі використовувати один з doctype’ов вище з новими HTML5 елементами, і сторінка буде відображатися так само, як і з новим типом документа.
Тег html
Наступний за списком в будь-якому HTML документі – тег html. В HTML5 він змінився несильно. У нашому прикладі вище в цьому теге ми додали атрибут lang зі значенням en, що означає, що наш документ буде англійською мовою. При використанні синтаксису XHTML необхідно додавати атрибут xmlns. В HTML5 цього робити не потрібно, і навіть атрибут lang став необов’язковим. Документ пройде валідацію і без цього атрибуту. На даний момент ми маємо:
Тег head
Наступна частина сторінки – секція head. Перший рядок всередині тега задає кодування символом документа. Даний метатег був спрощений і на даний момент опціональний, але рекомендований. Раніше треба було записувати щось типу:
В HTML5 оголошення кодування звели до мінімуму:
Майже в 100% випадків ви будете використовувати значення utf8. Докладне пояснення відмінностей в кодуваннях виходить за рамки цієї глави, так і воно, швидше за все, буде вам нецікаво. Але якщо ж вам все-таки цікаво, можете почитати про кодуваннях на W3C або WHATWG.
Зверніть увага: Оголошення кодування
Щоб всі браузери правильно зчитували кодування символів, оголошення кодування повинно бути серед перших 512 символів документа. Також вона повинна бути оголошена до будь-якого тега, що виводить контентна екран (типу title, який у нашому прикладі йде слідом після кодування).
На цю тему можна ще багато чого написати, але ми ж не хочемо, щоб ви заснули, так що опустимо деталі! Так що ми просто скористаємось спрощеним оголошенням кодування і перейдемо до наступної частини документа:
The Herald HTML5
Дані рядка мало відрізняються від попереднього синтаксису. Заголовок сторінки оголошується, як зазвичай, а метатеги ми записали просто для прикладу, щоб ви знали, де їх потрібно розміщувати. У цій секції можна розмістити скільки завгодно багато валідних тегів meta.
Найголовніше в коді вище це оголошення стилів, які задаються через звичайний тег link. Крім href і тег rel link не потрібні ніякі атрибути. Атрибут type необов’язковий, та й раніше він не був потрібен для оголошення типу контенту стилів.
Підтримка старих браузерів
Перед оголошенням наступного елемента розмітки необхідно трохи розповісти про нього. У специфікації HTML5 з’явилося багато нових елементів, таких як article та section, які ми розглянемо пізніше. Вам може здатися, що основна проблема для старих браузерів це підтримка нерозпізнаних тегів, але це не так. Здебільшого браузерів відверто все одно, які теги ви використовуєте. Якщо в HTML документ додати тег recipe або ziggy і задати їм стилі, наприклад, майже всі браузери нормально прочитають розмітку і застосують стилі без помилок.
Даний документ, природно, не пройде валідацію і в ньому будуть проблеми з доступністю, зате отрисуется він нормально майже у всіх браузерах – за винятком старих версій IE. У версіях IE9 до нерозпізнаним тегам стилі не застосовуються. Движок їх бачить як «unknown elements», так що ви не зможете присвоїти їм стилі або якось змінити їх поведінку. Це відноситься не тільки до тегам, які ми придумали, але і до всіх тегів, які були розроблені після виходу даних версій браузера. А значить, до всіх новим тегам в HTML5.
Хороша новина в тому, що на момент написання статті більша частина людей, хто ще користується IE, сидять на IE9 і вище. Так що для більшості розробників ця проблема відпадає сама собою. Однак якщо великий відсоток користувачів сидить на IE8 і старше, вам просто доведеться зробити щось, щоб дизайн не розвалився на частини.
На наше щастя є вихід з цієї ситуації, і це невеликий код на JavaScript, написаний John Resig. Натхненний ідеєю Sjoerd Visscher, John Resig написав код, за допомогою якого можна стилізувати теги HTML5 в старих версіях IE.
У нашій розмітці так званий «HTML5 shiv» підключений як тег script всередині умовного коментаря. Умовні коментарі були спеціально розроблені для IE9 і нижче. З їх допомогою можна визначити версію браузера IE і застосувати до неї стилі або скрипти. Коментар нижче стане частиною розмітки, якщо користувач сидить через IE9 і нижче:
Також варто відзначити, що якщо ви використовуєте JS бібліотеки, які працюють з HTML5 властивостями або новими API, то вони можуть містити в собі скрипт, який активує HTML5. Якщо це так, то посилання на цей скрипт потрібно видалити. Один з прикладів – JS бібліотека Modernizr, яка визначає підтримку сучасних HTML тегів і властивостей CSS. На сайті Modernizr можна вибрати варіант бібліотеки з кодом підтримки HTML5 тегів в старих версіях IE. Більш детально Modernizr ми розглядаємо в Appendix A.
Зверніть увагу: HTML5 Shiv не вирішує всіх проблем
Завжди є група користувачів, для яких HTML5 Shiv марний: ті люди, хто з тієї або іншої причини відключив JS і сидить через IE8 або нижче. Як веб-дизайнери, ми постійно говоримо, що контент нашого сайту повинен бути повністю доступний для всіх користувачів, навіть для тих, хто відключив JS. Але все не так погано, як здається. Безліч досліджень показали, що число людей, вимикаючих JS настільки мало, щоб його враховувати, особливо якщо ці люди до того ж ще й сидять через IE8 або нижче.
В результатах дослідження, опублікованих у 2013 році сайт UK Government Digital Service показав, що число людей, що користуються державними веб-сервісами з відключеним JS становить 1.1%. За результатами іншого дослідження, проведеного на сайті Yahoo Developer Network (опубліковано в жовтні 2010) кількість користувачів з відключеним JS становить 1% від світового трафіку.
Все інше вже історія
У решти нашого шаблону розташовується відкриваючий і закриваючий тег body, закриваючий тег html, а також посилання на скрипт. Як і з тегом link, тег script не потрібний атрибут type. Якщо ви писали на XHTML, то повинні пам’ятати, як там записувався скрипт:
Так як JS є єдиним сценарним мовою програмування в Інтернеті, який використовується у всіх практичних цілях, а також враховуючи той факт, що всі браузери припускають, що ви використовуєте JS, навіть якщо це явно не вказано, в HTML5 документах атрибут type необов’язковий:
Слідуючи кращим практикам, ми помістили тег script в самий низ сторінки. Даний підхід пов’язаний зі швидкістю завантаження сторінок: коли браузер бачить тег script, він зупиняє завантаження і рендеринг сторінок, поки не распарсит файл скрипта. Це сильно позначається на швидкості завантаження сторінки, особливо при підключенні великих файлів скриптів у верхній частині ще до контенту. Саме тому більша частина скриптів повинна розміщуватися в самому низу сторінки, щоб вони завантажувалися вже після завантаження сторінки.
У деяких випадках доводиться розміщувати скрипти в тегу head (як HTML5 shiv), якщо потрібно, щоб скрипт почав працювати ще до рендеринга сторінок.
