От доста време се говори, че HTML 5 е следващата важна стъпка в уеб пространството. Все пак не можем да пренебрегнем и твърденията, че много малко сайтове го използват и плюсовете и минусите му остават до голяма степен неизследвани. Причината за това може би е, че повечето браузъри не поддържат новите структурни елементи, но по-голямата част от тях биха приели нормално всеки елемент/маркер, който създадете. Дори и IE 6 може да се справи с новите елементи, но ако искаме да прилагаме стилове чрез CSS, ще ни е нужна малко JavaScript помощ.
Единственото нещо, което трябва да имаме предвид, когато прилагаме стилове на новите елементи (тагове) е, че браузърите, за които те са неизвестни по подразбиране ги интерпретират като инлайн елементи. И тъй като повечето от новите HTML 5 елементи са от структурен характер, при всички положения ние ще искаме да се държат, като блокови елементи.
<!DOCTYPE html> - Доктайпът, който всеки може да запомни!
Първото нещо, което трябва да направим при създаването на HTML 5 документ, е да изпишем новия DOCTYPE:
<!DOCTYPE html>
За разлика от HTML 5 в HTML 4.01 се налага описването на DTD (Document Type Definition), защото HTML 4.01 е SGML (Standard Generalized Markup Language) базиран език. HTML 5 се нуждае от DOCTYPE за да могат браузърите да разпознаят документа.
Семантичната структура на HTML 5
Вече имаме HTML 5 документ. Дотук добре. Нека преди да се впуснем в обсъждането на новите елементи, да разгледаме една проста структура на обикновена страница.
Изграждането на такъв тип лейаут не е сложно, но с помощта на HTML 5 това става много по-семантично. Нека видим как бихме направили структурата на фигурата горе по познатия ни до сега начин.
Класическият начин
<!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"> <head> <title></title> </head> <body> <div id="header"> <!-- HEADER --> </div> <div id="navigation"> <!-- NAVIGATION --> </div> <div id="content"> <!-- CONTENT --> </div> <div id="footer"> <!-- FOOTER --> </div> </body> </html>
Както се вижда в този пример, добавяме "id" на всички наши структурни елементи или иначе казано блокове (header, navigation, content, footer). Това е доста често срещана практика, която има две предназначения:
- Структурните елементи, които използваме имат "id" или "class", а те от своя страна се използват, за да се прилагат стилове на определени участъци от страницата.
- Тези атрибути (id, class) служат като примитивна, псевдо-семантична структура.
Създателите на HTML 5 са направили още една крачка напред - добавили са нови структурни елементи, които да заменят познатите до сега. Ето един бърз преглед на част от въпросните нови елементи, които са на разположение в HTML 5:
<header>
Този елемент е предназначен да служи, като контейнер за уводна информация в даден уебсайт.
<nav>
Този елемент е предназначен да служи, като контейнер за навигация в даден уебсайт.
<section>
Този елемент е предназначен да служи, като контейнер за определяне на разделите в документа, например chapters, headers, footers или всеки друг раздел.
<article>
Този елемент е предназначен да служи, като контейнер за външно съдържание.
Външното съдържание може да бъде новина от външен източник, текст от блог, текст от форум или др.
<footer>
Този елемент е предназначен да служи, като край на секция или уебсайт. В него обикновено се посочва името на автора, датата на която документът е създаден или информация за контакт.
Разбира се, има още нови елементи, като информация за тях може да намерите тук.
Сега нека пренапишем нашия оригинален пример, като използваме новите елементи от HTML 5:
HTML 5 пример
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> </head> <body> <header> <!-- HEADER --> </header> <nav> <!-- NAVIGATION --> </nav> <section> <!-- CONTENT --> </section> <footer> <!-- FOOTER --> </footer> </body> </html>
Сами виждате резултата - много по-чист и по-лесен за разбиране код, нали? Разбира се, при необходимост можем да използваме атрибутите id и class и на новите маркери:
<nav id="main-menu"> <!-- NAVIGATION --> </nav>
Съвместимост с по-стари браузъри?
Досещате се, че става дума за любимия на всички Internet Explorer 6, но и за него има решение, което не е никак сложно. IE 6 показва новите маркери, но не прилага никакви CSS стилове за тях, но както споменах в началото на статията, ще ни е нужна малко помощ от JavaScript. Всичко, от което имаме нужда, е да използваме метода createElement, за да може IE 6 да "разбере" за новите маркери. Може да добавим JavaScript кода в <head> частта на HTML 5 документа или може да го запишем в отделен файл и да го включим в документа. Нека използваме първия начин:
JavaScript кодът би изглеждал така:
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('footer');
</script>
Разбира се, може да направим нужните проверки за вида на браузъра по много начини, но сега няма да се впускаме в подробности за това. По-важното е, че има решение за по-старите браузъри, като Internet Explorer 6.
Сигурно ви е направило впечатление, че не използваме MIME тип за <script>. Това е така, защото в HTML 5 по подразбиране всички сценарии на <script> се приемат за type="text/javascript", освен ако скриптът е нещо различно от JavaScript.
Тъй като в една статия не могат да се обхванат всички нови и интересни неща за HTML 5, аз се опитах да задържа вниманието ви върху основните неща различаващи HTML 5 от HTML 4.01 и XHTML 1.0.
Искам да завърша с това, че HTML 5 включва и няколко нови APIs, които са свързани с някои от новите елементи/маркери. Пълният списък може да видите направо на W3.org. Oсновната цел на тези интерфейси е да се улесни създаването на уеб приложения, но за тях ще поговорим в някои от следващите статии посветени на HTML 5.
Сами по себе си новите елементи/маркери от HTML 5 не са нищо кой знае какво, но когато се комбинират със силата на CSS3 и JavaScript, могат да ни отведат в една нова ера на уеб технологиите.
Интересно интересно
za kakvo e toz urok kato o6te ne moje da se izpolzva tazi versiq ?
Защо да не може да се използва? Използва си се и колегата по-горе е дал пример как :). Не всички браузъри го поддържат изцяло, но това не бива да ни спира, защото ситуацията ще се промени до няколко месеца и е добре човек да е наясно по-рано.
Mersi!
Bravo! Kakto kaza avtora, moje da ne sa koi znae kakvi promenite, no sa hubavi. Po-udobno e naistina. Spored men, idva novata era! :) Mnogo po-hubavo i podredeno shte izglejda.
Sorry, 4e pi6a na latinica, no tuk nqmam flextype.
PP: btw, moje li da vi popitam ot kade moga da namerq, tazi sistema za komentari ?
Предполагам, че става въпрос за системата с която е направен http://fridaycode.net
Ако е така, отговорът е WordPress.
Несъмнено HTML5 изглежда доста обещаващ, но моето мнение е че HTML5 няма да успее да измести фалаш наскоро имаше сравенние качеството на видето при което HTML5 се представи доста по-зле. Дори от youtube екпериментираха с HTML5 видео и обявиха, че ако сайта премине изцяло на новия стандарт най-популярния видео портал ще трябва да се сбогува с много от своите фунционалности за обработка на видео... Обределено HTML5 ще внесе много "иновации" в уеб пространството но не мисля, че видеото ще е една от тях...
Ето и още един (мързелив) начин как да ви работят таговете при IE
всички се състои във това да вмъкнете следния javascript код
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
http://remysharp.com/2009/01/07/html5-enabling-script/
Аз мисля, че който е неграмотен по темата да не коментира.
Много добра статия.
Евала на автора.
[...] време бяхме пуснали статия за основите на HTML5, която няма да е зле да прочетете преди тази. Някои от [...]
[...] http://fridaycode.net/html-5-basics/ , http://fridaycode.net/html5-elements-part-1/ , http://fridaycode.net/html5-canvas/ , http://fridaycode.net/html5-video-element-and-how-to-create-html5-video-player/ , http://fridaycode.net/category/html/ [...]
Изключително добра статия, браво и от мен!
Добавих линк към статията във форума на текущия "Уеб дизайн с HTML5, CSS и JavaScript" курс към Академията на Телерик:
http://forums.academy.telerik.com/1850/%D0%BA%D0%B0%D0%BA-%D0%B4%D0%B0-%D0%BF%D0%BE%D0%B4%D0%BA%D0%B0%D1%80%D0%B0%D1%82%D0%B5-html5-%D0%BD%D0%B0-ie8-%D0%B8-%D0%BF%D0%BE-%D1%81%D1%82%D0%B0%D1%80%D0%B8-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B8?show=1906#a1906
П.П. Извинявам се, че линка е толкова грозен, но тук не зная как да го вмъкна по друг начин.
[...] и само и единствено с CSS3… или пък да понаучите за основите на HTML5. Преди дни пък се появи и статията Всичко за HTML5 video или [...]