Meet HTML5

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

Основни концепции и семантика

За да започнем да пишем днес на HTML5 не ни трябва много – просто текстов редактор и известни знания за готовата до момента семантика на езика.

Първото нещо, което трябва да знаете е, че Doctype-a е много по-опростен:

<!DOCTYPE HTML>

За разлика от HTML5 в HTML4 се налага описването на Document Type Definition, защото HTML4 е Standard Generalized Markup Language базиран език. HTML5 се нуждае от DOCTYPE за да могат браузърите да разпознаят документа. Това прави кратък и лесен за запомняне Doctype.

Декларирането на различни елементи в кода като цяло също е доста скъсено. Като например така би изглеждал един примерен снипет:

<html lang=“bg“>
<head>
<meta charset=“UTF-8″>
<script src=“js/myscript.js“></script>
</head>

Както виждаме по-горе няма нужда да декларираме глупости в html тага, само езиковите атрибути, това се отнася и за самото деклариране на charset-а на страницата. По принцип бих препоръчал всички скриптове освен такива, които активират функции (modernizr, etc.) да се декларират в края на документа преди </body> тага, понеже така се подобрява времето за зареждане на страницата, но в този случай като за пример сме сложили нашият скрипт горе и виждате, че не е нужно да се пише излишно type=“text/javascript“.

Освен съкратено деклариране имаме нов начин на структуриране на елементите в страницата:

По-мързеливите кодъри не са си и мечтали за нещо по-добро. Нормално би трябвало да изплюя следният код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
</head>
<body>
<div id="header">
това е header-a
</div>
<div id="navigation">
това пък е навигацията
</div>
<div id="content">
<div class="article">
това е отделна статия
</div>
</div>
<div id="sidebar">
това е сайдбара
</div>
<div id="footer">
това е футъра
</div>
</body>
</html>

Дългичко е, нали ? А сега как би изглеждало всичко това в HTML5:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
Това е header-a
</header>
<nav>
Това пък е навигацията
</nav>
<article>
<section>
това е отделна статия
</section>
</article>
<aside>
това е сайдбара
</aside>
<footer>
това е футъра
</footer>
</body>
</html>

Доста спестено излишно писане на id-та и други глупости и по-лесно разчитане на кода, ако ме питате мен. Сега нека разчепкаме самият код, съставен от така наречените HTML5 псевдо-елементи:

<header>
Това, очевидно е тага, който замества id=“header“ и декларира уводната част на нашият уеб сайт.
<nav>
Тага, който замества id=“navigation“ и декларира контейнерът за навигация на нашият уеб сайт.
<article>
Това служи като id=“content“ елемент или като контейнер за различно съдържание – новини, снимки, etc.
<section>
В случая е използвано като контейнер за отделна статия, но може да се използва за различни контейнери по самият дизайн.
<aside>
Това служи като id=“sidebar“ или страничната лента на нашият уеб сайт.
<footer>
Това служи като id=“footer“ и е предназначен да бъде край на секция или нашият уеб сайт. В него обикновено се посочва името на автора, датата на която документът е създаден или информация за контакт.

Има още доста такива псевдо елементи, с тях можете да се запознаете на следният адрес – HTML5 Tag Reference

Това са основите на HTML5, не съм споменал как да направим нашата страница съвместима със по-стари браузъри, но това занапред. Ако имате някакви въпроси питайте тук като коментар. Следните адреси може да са ви интересни:

Гласувай за тази статия в svejo

Posted on май 18, 2011, in Daily Blogs, Tutorials, Usefull Stuff and tagged , , , , , . Bookmark the permalink. Вашият коментар.

Вашият коментар

Попълнете полетата по-долу или кликнете върху икона, за да влезете:

WordPress.com лого

You are commenting using your WordPress.com account. Log Out / Промяна )

Twitter picture

You are commenting using your Twitter account. Log Out / Промяна )

Facebook photo

You are commenting using your Facebook account. Log Out / Промяна )

Google+ photo

You are commenting using your Google+ account. Log Out / Промяна )

Connecting to %s

%d bloggers like this: