Cloxy

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

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

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

HTML5 Лого

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 частта на документа:

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

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

бутон за споделяне
Публикувано от на
Средна оценка 4.44 / 5 (9 гласа)

9 коментара

W-SEO

Име: W-SEO

Дата: 14.11.2010 18:19:48

Оценка: 4 / 5

+ за полезната информация!

Васил Тошков

Име: Васил Тошков

Дата: 14.11.2010 18:27:58

Оценка: 4 / 5

Новата тема по подразбиране на WordPress е написана на HTML5.

Tanko Geritliev

Име: Tanko Geritliev

Дата: 14.11.2010 18:57:55

Оценка: 5 / 5

Много добре, крайно време е дизайнерите да четат малко повече такива неща, това ще облекчи много работата :)

Hristo Hristov

Име: Hristo Hristov

Дата: 15.11.2010 10:48:31

Оценка: 4 / 5

голяма грешка е декларирането на новите тагове като block. Те не са блокови елементи в html 5. Най-добрият вариант е да се декларират като inline-block, въпреки че не се поддържа от IE6. Общо взето докато изчадията на Microsoft не изчезнат забравете за HMTL5 и CSS3

Васил Тошков

Име: Васил Тошков

Дата: 15.11.2010 11:07:53

Оценка: 5 / 5

Защо мислиш, че не са блокови елементи? По дефиниция са си точно такива. Обясни по-подробно защо смяташ така и откъде ти е информацията?

Evgeni Yordanov

Име: Evgeni Yordanov

Дата: 15.11.2010 13:35:44

Оценка: 5 / 5

Нямам думи, за добрата идея. Радвам се, че си я написал Васко. Тъй като в моя блог, аз не таргетирам уебдизайна, а малко или много статия си е HTML ориентирана, въпреки, че се споменава SEO. Наистина се радвам, че има типичен български пример посочващ как се правят нещата за да може "младите" и "старите" (но не-достатъчно активни) колеги да се по-образоват малко.

Digital_Person

Име: Digital_Person

Дата: 19.11.2010 14:28:13

Оценка: 4 / 5

В последно време се старая все повече и повече да използвам HTML5 и CSS3 главно за прогресивно подобряване на дизайна. Статията е страхотна благодаря за което :) HTML5 си е едно просрочено обновление и колкото по-рано започнат да го използват всички толкова по-добре...

Новини от Хасково

Име: Новини от Хасково

Дата: 24.02.2011 12:24:10

Оценка: 5 / 5

Много добра статия Васко =)

Васил Тошков

Име: Васил Тошков

Дата: 05.04.2012 17:20:34

Оценка: 4 / 5

Между другото, CSS-ът за блокови елементи вече не е нужен, защото Гугъл са го вкарали в скрипта. Така че добавянето само на скрипта вече е напълно достатъчно :)

Добавяне на коментар