Разлики в HTML4 и HTML5

Ще поговорим малко за новите тагове в HTML5, разликите им с тези от HTML4, смисълът от тях, преимуществата и недостатъците при използването им.

Първо нека уточним, че в този урок ще говорим наистина за HTML5, а не за всичко ново, което се свързва с него. Нека започнем с това, че най-новите JS API-та, които се предлагат от модерните браузъри както и CSS3 са отделни технологии, които все пак масово се слагат под един общ знаменател с всичките нови възможности, които се предлагат от развиващите се интернет стандарти. Именно това определение — развиващи се интернет стандарти — е най-правилното. Макар и много хора обаче да държат на техническата “изправност” в изказвания и т.н., аз лично също съм готов да говоря за общия знаменател HTML5. По-кратко е и говори нещо повече на широка публика, отколкото JS, CSS и “развиващи се интернет стандарти”.

Да се върнем все пак на същинския HTML5 и новите тагове, които се предлагат в него. За пълен списък винаги най-добре се допитвайте до Google, както направих и аз самият току-що. Справочници има и не е нужно всичко да се помни — все някъде го пише. Със сигурност лесно ще намерите и списъкът с новите тагове в HTML5, представен във w3schools.com. Тук няма да разгледаме всички от тях. Само тези, на които най-много се акцентираше още от самото им предлагане да бъдат включени в новия стандарт.

Нови контейнери

Какво представляват сами по себе си тези тагове и за какво трябва да се използват? Мисля, че е лесно човек да се досети за какво се използват. Самите тагове са лесни думи на английски, които предполагам всички са чували от едно или друго място.

header

<header> е предназначен да замени <div id="header">, който май-май се среща във всеки сайт. Дори и да нямаме точно DIV с ID със стойност HEADER, все ще имаме някакъв заглавен контейнер в сайта си. Идеята е този таг e да улесни търсачките при обработването на информацията на сайта ни. Това е за да могат и те по-лесно и по-правилно да представят информация на хората, които ги използват.

footer

<footer> е много подобно на <header>, просто става въпрос за завършека на страницата.

section

Идеята зад <section> е да се премахнат всички излишни <div>-ове, които изпълват сайтовете. Сигурно половината тагове в един сайт са DIV-ове!

article

<article> би трябвало да се използва, за да отдели секция от сайта със собствена цялостна идея и “история”. При блоговe е много лесно да се определи кое е “статията” ни. Но и при много други сайтове можем даден елемент да го категоризираме по подобен начин. Ако правим електронен магазин може един продукт да го заградим в <article>. Ако представяме календар със списък от събития, може всяко едно събитие отново да е заградено в <article>. Идеята е, че това изразява завършеност, самостоятелност и смислова пълнота.

aside

<aside> е един от най-объркващите тагове. По смисъла на името си може да ни накара да си мислим, че е предназначен за странични ленти (sidebar-и). Даже в едни от първите уроци относно кой нов таг за какво трябва да се използва, бях чел, че е предназначен именно за това. Да обаче в последствие взеха да излизат обяснения, как всъщност <aside>, трябва да се използва за допълнителни и по-маловажни елементи. Такива, които може би носят допълнително информация към статията, но сами по себе си не са пряко ангажирани със съдържанието и биха могли да бъдат пренебрегнати. Със сигурност сте чели статии във вестници, покрай които има малки секции със снимки или любопитна информация. Сами по себе си обаче, тези секции нямат отношение към същинското съдържание. То може да бъде прочетено и самостоятелно. Идеята от <aside> е именно такава.

nav

<nav> е последният таг от тази група, който ще разгледаме. Предназначен е да съдържа в себе си навигация на сайта. Тя може да основна или второстепенна.

Някои други HTML5 тагове

Трудно ми е да дам дефиниция за групата на тези тагове. Само интуитивно ги отделям от предните. Може би заради техния display: inline по подразбиране от браузърите, които ги поддържат или нещо друго.

meter

<meter> е малко объркващ таг, тъй като сам по себе си няма някаква специална презентация на съдържанието си. Идеята му е да представя скаларно количество от известен максимум. Или казано с други думи — отива му да се ползва, да изразява проценти. На места съм срещал препоръки с JavaScript да се заменя обикновения <meter> таг с цялостна съвкупност от други тагове с подходящи стилове. Те от своя страна вече да представят:

• pie chart
• или просто запълнена до определено ниво тръбичка
• или какъвто и да е визуално-приятен начин за представяне на съдържанието

progress

<progress> — мене ако питате — няма разлика от предназначението на <meter>.

mark

<mark> е просто таг, обвиващ се около няколко думи с идеята те след това чрез CSS да бъдат представени по различен начин. Още от по-старите версии на HTML си имаме <strong> и <em>. С тях можем да изразим този различен формат. Още повече, че тези тагове си имат и формат на текста свързан с тях. Ако ни се наложи можем да го променим чрез CSS. Сам по себе си все пак <stgrong> тагът говори, че ще имаме удебелен текст, а <em> — текст в курсив. Ако до такава степен не ни стигат таговете — имаме си и <span>. Той прави точно това, което и <mark>. Маркира част от текст, без да прилага специални стилове. Вместо това ни позволява ние с помощта на CSS да добавим каквито стилове искаме.

time

<time> би трябвало да представя момент от времето. Дали само като дата или пък и с добавен час — идеята е, че става въпрос за измерване на време.

<output> по дефиниция трябва да се използва, за да представя резултат от изчисление. Върви разбери какво е това.

Нужни ли са ни новите тагове?

Преди месец четох статия, в която авторът се изказваше негативно към всички нови тагове. Беше се обосновал много добре.

Нека се върнем на първата група — <header>, <footer>, <section>, <article>, <aside> и <nav>. Първите два, заедно с <article>, внасят една добра семантика. При тях фактор са основните недостатъци при новите тагове, за които ще говоря по-късно. Начинът, по който обаче <section> е описан на мене ми се струва направо смешен. Идеята е да замени голямата употреба на <div> тагове. Добре — представете си една страница, в която всеки един <div> вече е <section>. Най-лошото е, че съм виждал такива. И каква е ползата — отново имаме страница изпълнена с повтарящи се тагове. Функция отново е да бъдат просто контейнери. <section> обаче има един основен недостатък пред <div>. Пише се с над двойно повече букви. Това прави кода дори по-трудно четим.

За <aside>, казахме, че е просто едно объркано недоносче. Със сигурност ще бъде погрешно използвано. По тази причина няма да се считат като по-малко значимо. Съответно — целият смисъл на тага отпада.

<nav> звучи добре, обаче това си остава единствено контейнер за линковете. Тези с опит обаче знаят, че просто линкове в контейнер представляват проблем. Затова е най-удачно за навигация да се използва неподреден списък (<ul>). Е, нека просто заградим списъка в един <nav> таг. Какво печелим — имаме цял един таг в повече! Ако освен <nav> имахме и нови тагове, за елементите в него щеше да има смисъл. Но пак идеята щеше да куца, тъй като вече имаме възможност за една такава структура. А от HTML5 бихме искали нови възможности, а не просто нови тагове, с които да правим същото.

За втората група от тагове изказах негативно отношение още при представянето на идеята им. Затова мисля да им спестя допълнителното неодобрение.

<audio>, <video>, <canvas>

Стигаме и до една друга група обаче, при която горните забележки не важат. Мисля, че на всички е ясно, че <audio> се използва за вмъкване на мукизален player в страницата. А <video> — аналогично за клипове.

За тези, които не са запознати ще поясня каква обаче е функцията на <canvas>. В буквален превод означава “платно” (за рисуване). Дава ни възможност да добавяме графична информация, която е програмно генерирана. В общи линии можем да:

• рисуваме графики на данни, които са представени на страницата
• комбинираме съществуващи снимки
• променяме цвета на картинки и да ги изобразяваме на платното
• създаваме “огледало”, когато един <canvas> таг е разположен в непосредствена близост до изображение

Последното не става от самосебе си де. Трябват стабилни познания по програмиране за постигане на този ефект.

Тези три тага за мене лично са най-стойностните в HTML5. Те наистина дават нови възможности.

Недостатък — в старите браузъри няма как да добавим възможностите на тези тагове. Няма да можем да се насладим напълно на функционалността им, ако трябва да поддържаме стари браузъри.

Бихме могли да използваме Flash Player или някакви други заместителни функционалности. Например Internet Explorer 7 и 8 не поддържат Canvas, но имат поддържа за VML. С подходящи JavaScript библиотеки можем да мигрираме <canvas> функционалност в тях.

Има още какво да се каже по темата, но нека оставим това за втора част на урока.