Меню

Уроци

Влез Излез

Разлики в HTML4 и HTML5

С последния си урок поставих началото на една нова „рубрика“, в която отговарям на въпроси, давам насоки, изказвам мнение по въпроси, които съм видял, че са търсени от посетители на сайта. Тук ще поговорим малко за новите тагове в HTML5, разликите им с тези от HTML4, смисълът от тях, преимуществата и недостатъците при използването им.

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

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

<header>, <footer>, <section>, <article>, <aside>, <nav>

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

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

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

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

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

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

<meter>, <progress>, <mark>, <time>, <output>

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

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

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

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

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

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

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

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

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

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

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

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

<audio>, <video>, <canvas>

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

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

Тези три тага за мене лично са най-стойностните в HTML5, тъй като те наистина дават нови възможности. Недостатък – в старите браузъри няма как да добавим възможностите на тези тагове, така че не можем да се насладим напълно на функционалността им, освен ако не използваме Flash или някакви други заместителни функционалности (например Internet Explorer 7 и 8 не поддържат Canvas, но имат поддържа за VML, а с подходящи JavaScript библиотеки можем да настроим <canvas> тага да работи нормално с всички други браузъри, а за IE 7/8 да използва VML).

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

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

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax