В даному проекті ми будемо писати наш код з нуля і пояснювати кожну його частину. Було б неможливо створити такий проект, в якому були б використані всі існуючі нові елементи і техніки, тому також ми пояснимо, які речі не підійдуть під наш проект. Таким чином, у вас буде великий вибір варіантів, як створити свій HTML5 та CSS3 сайт або веб-додаток. Даною статтею можна буде користуватися, як довідником для ряду технік. Почнемо з порожньою HTML5 сторінки:
Ось наш базовий шаблон. Тепер давайте розберемо окремі частини розмітки і подивимося, як вони записувалися до HTML5.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Так як браузери зобов'язані підтримувати всі існуючі типи контенту в Інтернеті, то можна повністю покладатися тільки лише на doctype. Іншими словами, один doctype робить вашу сторінку HTML5 сумісною. Все залежить від браузера. Насправді, можна взагалі використовувати один з doctype'ов вище з новими HTML5 елементами, і сторінка буде відображатися точно так же, як і з новим типом документа.
Наступний за списком в будь-якому HTML документі - тег html. У HTML5 він несильно змінився. У нашому прикладі вище в цьому тезі ми додали атрибут lang зі значенням en, що означає, що наш документ буде англійською мовою. При використанні синтаксису XHTML необхідно додавати атрибут xmlns. У HTML5 цього робити більше не потрібно, і навіть атрибут lang став необов'язковим. Документ пройде валідацію і без цього атрибута. На даний момент ми маємо:
Майже в 100% випадків ви будете використовувати значення utf8. Докладне пояснення відмінностей в кодуваннях виходить за рамки даного розділу, та й воно, швидше за все, буде вам нецікаво. Але якщо ж вам все-таки цікаво, можете почитати про кодування на W3C або WHATWG.
Дані рядка мало відрізняються від попереднього синтаксису. Заголовок сторінки оголошується як зазвичай, а метатеги ми записали просто для прикладу, щоб ви знали, де їх потрібно розміщувати. У даній секції можна розмістити скільки завгодно багато валідних тегів meta.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Підтримка старих браузерів
Даний документ, природно, не пройде валідацію і в ньому будуть проблеми з доступністю, зате Отріс він нормально майже у всіх браузерах - за винятком старих версій IE. У версіях до IE9 до нерозпізнаним тегам стилі не застосовуються. Движок їх бачить як «unknown elements», так що ви не зможете присвоїти їм стилі або якось змінити їх поведінку. Це відноситься не тільки до тегам, які ми придумали, але і до всіх тегам, які були розроблені після виходу даних версій браузера. А значить, до всіх нових тегам в HTML5.
Хороша новина в тому, що на момент написання статті велика частина людей, хто ще користується IE, сидять на IE9 і вище. Так що для більшості розробників дана проблема відпадає сама собою. Однак якщо великий відсоток ваших користувачів сидить на IE8 і старше, вам просто доведеться зробити щось, щоб дизайн не розвалився на частини.
Також варто відзначити, що якщо ви використовуєте JS бібліотеки, які працюють з HTML5 властивостями або новими API, то вони вже можуть містити в собі скрипт, який активує HTML5. Якщо це так, то посилання на цей скрипт потрібно видалити. Один із прикладів - JS бібліотека Modernizr, яка визначає підтримку сучасних HTML тегів і властивостей CSS. На сайті Modernizr можна вибрати варіант бібліотеки з кодом підтримки HTML5 тегів в старих версіях IE. Більш докладно Modernizr ми розглядаємо в Appendix A.
Зверніть увагу: HTML5 Shiv не вирішує всіх проблем
Завжди є група користувачів, для яких HTML5 Shiv марний: ті люди, хто з тієї чи іншої причини відключив JS і сидить через IE8 або нижче. Як веб-дизайнери, ми постійно говоримо, що контент нашого сайту повинен бути повністю доступний для всіх користувачів, навіть для тих, хто відключив JS. Але все не так погано, як здається. Безліч досліджень показали, що число людей, що відключають JS настільки мало, щоб його враховувати, особливо якщо ці люди до того ж ще й сидять через IE8 або нижче.
Все інше вже історія
Так як JS є єдиним сценарним мовою програмування в Інтернеті, який використовується у всіх практичних цілях, а також з огляду на той факт, що всі браузери припускають, що ви використовуєте JS, навіть якщо це явно не задано, в HTML5 документах атрибут type необов'язковий:
Слідуючи кращим практикам, ми помістили тег script в самий низ сторінки. Даний підхід пов'язаний зі швидкістю завантаження сторінки: коли браузер бачить тег script, він зупиняє завантаження і рендеринг сторінки, поки не розпарсити файл скрипта. Це сильно позначається на швидкості завантаження сторінки, особливо при підключенні великих файлів скриптів в верхній частині ще до контенту. Саме тому велика частина скриптів повинна розміщуватися в самому низу сторінки, щоб вони завантажувалися вже після завантаження сторінки.
У деяких випадках доводиться розміщувати скрипти в тезі head (як з HTML5 shiv), якщо потрібно, щоб скрипт почав працювати ще до рендеринга сторінки.
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
