Шаблони HTML5

Ремі Шарп

Оригінал: http://html5doctor.com/html-5-boilerplates

Переклад: Влад Мержевич

Не вдаваячись в обговорення того, чому HTML5 доступний сьогодні, а не в 2022 році, ця стаття надасть вам набір шаблонів HTML5, які ви можете використовувати в своїх проектах прямо зараз.

HTML5 за 5 секунд

Дуже просто отримати розмітку, яка визначається як HTML5 — достатньо змінити ваш DOCTYPE з наявного на такий:

<!DOCTYPE html>

Ось і все! Більше нічого не потрібно.

Google вже це зробив. Перевірте його домашню сторінку, де все написано в один рядок:

<!doctype html><head><title>HTML5 - Пошук в Google</title><script>...

Найсмішніше, що сама сторінка Google і з результатами пошуку не проходить валідацію, але це нормально. Вони все одно отримують переваги (наприклад, немає атрибута type елементу <script>) за рахунок коректного DOCTYPE.

Мінімізація HTML5

Якщо вам подобаються швидкі прототипи або експерименти, які не вимагають написання довгого коду, вас може зацікавити мініатюрний документ на HTML5:

<!DOCTYPE html>
<title>Малий HTML5</title>
<p>Привіт, світ</p>

Деякі суперечності виникли щодо валідації цього шаблону при видаленні тега <title>. Переглядач DOM від Хіксі вказує, що все в порядку, валідатор W3C також, при введенні розмітки вручну. Але валідатор Генрі Сівонена повідомляє про помилку без тега <title>. Валідатор W3C також говорить про помилку, коли ви вказуєте URL. Сподіваюся, це вирішиться найближчим часом.

Прим. пер. Розібрались. Тепер <title> є обов'язковим елементом.

HTML5 завершений і сумісний

Останній, найбільш повний шаблон також вказує кодування тексту. Без цього деякі символи не будуть відображатися правильно (я витратив занадто багато часу, намагаючись зрозуміти чому!).

Ми також додали HTML5 shiv, щоб можна було додавати стиль до елементів в IE. Зверніть увагу, що ви повинні включити цей скрипт в елемент <head>.

Нарешті, додамо кілька правил CSS, щоб нові блочні елементи відображалися правильно, оскільки деякі браузери спочатку про них не знають.

Ось він — валідний і повний шаблон документу на HTML5.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>HTML5</title>
  <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   article, aside, details, figcaption, figure, footer,header,
   hgroup, menu, nav, section { display: block; }
  </style>
 </head>
 <body>
  <p>Привіт, світ</p>
 </body>
</html>

Якщо ви хочете експериментувати з HTML5, JS Bin за замовчуванням надає шаблон HTML5, з яким можна грати.

HTML5
SEO текст: Навчальна стаття про використання шаблонів HTML5 для ваших проектів. Дізнайтеся, як швидко отримати розмітку HTML5 та зробити її валідною. Використовуйте повний шаблон HTML5 для забезпечення сумісності та правильного відображення елементів на різних браузерах.

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