Преминаване към HTML5 - ръководство

Знаете ли, че HTML5 поддържа почти всичко от досегашните версии на HTML и може да се мине на него още сега бързо и безболезнено? Нищо по сайта не се променя визуално, но има възможност да се използват новите неща, като video tag, canvas, новите типове във формите и други удобства, които са част от бъдещето. В тази публикация ще опиша с прости стъпки как може всеки един сайт да се прехвърли към новия стандарт.

1. Новият doctype

<!DOCTYPE html>

Красив е, нали? Само 15 знака, всеки може да го запомни! В същност той след време напълно ще отпадне, но старите браузъри още го очакват в началото на всеки документ, за да започнат да работят в режим на спазване на стандартите. Просто сменете досегашния си doctype, какъвто и да е той, с този и всичко трябва да се валидира успешно като HTML5.

2. Изтриване на xmlns

В отварящия таг <html> има атрибут "xmlns", ако документът е върху XML. Ако няма да качвате всичко върху XML, може просто да изтриете този атрибут заедно със стойността му. Друг излишен атрибут в този таг е "xml:lang". Единственият полезен атрибут остава само "lang", на който е препоръчително да зададете стойност, за да се знае езикът на документа.

3. Charset encoding

Помни ли някой наизуст мета тагът, който фиксира кодировката на страница? Сложен е и дълъг, но е все-още валиден. HTML5 обаче въвежда нова, по-кратка и лесна за запомняне версия, която се поддържа от всички браузъри. Ето я и нея:

<meta charset="utf-8" />

4. Премахване на "type"

CSS и JavaScript стават езици по подразбиране в Интернет, тъй като нямат алтернативи, поддържани от всички браузъри. Затова може да се пропусне атрибутът им за тип при извикване. Следват няколко примера, които вече са напълно валидни:

<link href="style.css" rel="stylesheet" /> <style>@import url(style.css);</style> <script src="script.js"></script>

5. Асинхронен JavaScript

Булевият атрибут "async" е добавен като опция към тага <script>. Той дава възможност на браузъра да зарежда скрипта и в асинхронен режим. Над 90% от съществуващите извиквания на скриптове имат нужда от асинхронизация. Работи на всички браузъри, освен IE. Много полезно, ако извиквате разни уиджети и реклами от други сървъри. Примерно бутонът за споделяне SpodeliMe е такъв скрипт. Пример:

<script src="http://externalserver.com/script.js" async></script>

6. Добавяне на релация "tag"

Релацията при връзки rel="tag" е стандарт при микро форматите, който е съгласуван и със стандарта HTML5. Този атрибут казва на търсачките, че дадена връзка води към страница, която представлява таг или категория. Използва се отдавна в популярните CMS системи. Важно е да не се пропуска, дори в старите версии на HTML. В бъдеще смятаме да отделим една статия специално за микроформатите.

7. Семантика

До тук бяха лесните неща, които трябва всеки да може да направи на сайта си и да премине на HTML5. Ние вече го направихме и може да видите кода на тази страница за пример. За сега това е достатъчно и ни стига, за да можем да се възползваме от повечето нововъведения в стандарта. Всички промени до момента се поддържат от старите и съвременните браузъри успешно.

Но ако искаме да се възползвате от новите семантични тагове, за които писахме в статията HTML5 и SEO, тогава ще трябва да обясним на старите браузъри какво представляват те. Проблемът идва от това, че най-старите браузъри, като IE6 игнорират непознатите тагове. Отделно повечето браузъри, дори да ги разпознаят, ги третират като inline, а не блокови елементи.

За да се оправи последният проблем се добавя просто следния CSS код към стиловете:

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }

А за най-проблемните браузъри, които игнорират непознатите тагове, Google хостват скрипт, който просто трябва да се извика в head частта на документа:

Това е! Оттук нататък имате пълна свобода да творите по стандарта HTML5.