Здравейте! Аз съм Васил Тошков от Cloxy, а темата днес е HTML5 семантиката или по-точно новите семантични елементи в HTML5. Преди да започна да говоря за кодове, ще се опитам да го обясня малко по-лесно, как се стига до необходимостта от тези нови семантични елементи, с една кратка история.

Едно време, ако напишете в Google "first website" или "first webpage", няма значение, ще ви излезе един сайт от cern.ch, който е първияй уеб сайт от 85-година някъде. Ако го видите и разгледате, ще  придобиете много голяма представа за това как са функционирали сайтовете през осемдесетте и началото на деведесетте години и каква е била първоначалната концепция за една страница в Интернет.

Тук съм начертал една проста страница, която илюстрира общо взето каква е била идеята на първите HTML документи, тоест те са били първо и преди всичко документи. Имали са заглавие, някакво съдържание, евентуално снимки, макар че на първия уеб сайт аз не видях снимки, тъй като IMG тагът се е появил доста по-късно и това е било голяма иновация.

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

В момента, обаче, документите в интернет изглеждат доста по-сложно от този вариант. Как се е стигнало до това? Ако се разходите из този, първия уеб сайт ще осъзнаете колко е трудна навигацията, тъй като там има просто текст и връзки, натискаш на връзки, попадаш на друг документ, четеш документа, но в един момент навигацията е просто ужасна.

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

Също така, при този първи уеб документ (при него не съм съвсем сигурен), но при всички други подобни ранни документи се е повтаряло едно и също съдържание на края на всяка страница, тоест copyright информацията, информацията за автора и такива други неща. С времето се е обособила секция в сайтовете, която почти всички имат и се нарича footer.

Даже в момента са модерни, така наречените rich footer-и, които след малко ще видим още повече усложняват картината на съвременната уеб страница. След което започват и фирмите да използват Интернет, да си правят сайтове по времето на .com балона, ако мога така да се изразя. И естествено се появяват header секции на документите, където се поставят лога, търсачки и всякакви други подобни неща.

Стигаме до най-простата форма на един съвременен уеб документ, която вече не е просто все едно виждаме документ в някоя офис програма, а в момента вече почти всички страници в Интернет могат да се вкарат в този шаблон, тоест те имат header, навигация, независимо навигацията къде е, тоест може да е вътре в header-а, може да е отстрани.

Изобразил съм го като най-стандартен вариант, но това не означава, че навигацията трябва да се вижда така всеки път. Тя може да е дори в страничната лента, където и да е тя. Основно съдържание, тоест article или група от статии или нещо друго, което няма значение какво е съдържанието. Може да е видео, може да е снимка.

Най-важното е да е съдържание. И Footer, където се повтаря някаква информация, на всяка страница, лицензна информация. В момента са на мода rich footer-ите, най-вече заради мобилни устройства и други. При тях става още по-сложна цялата ситуация. Идеята на всичко това е да покажа едно време, ако търсачките е трябвало да работят с нещо подобно и е било много лесно. "Хващаш" първото ниво на заглавието, ако е заглавие на документа, всичко останало е съдържание на документа и търсачката знае къде е съдържанието, кое да обработва.

Както знаете, все още търсачките обичат много текст. В момента при една такава структура Google много трудно може да разбере къде е съдържанието. Много често, може би, и на вас ви се е случвало. Попадате на snippet в Google, при който вътре вместо съдържанието има някакви изброени в менюто или нещо от страничната лента, дори от footer-а на сайта, някакви списъци, но нищо описателно от съдържанието на тази страница.

Съдържанието е нещо много важно. Вие искате Google да разпознае къде е съдържанието ви, тъй като това е най-важното нещо на страницата. Това е уникалното нещо за всяка една страница. Ако Google не го разпознае правилно и ако разпознае като съдържание нещо, което е в страничната лента и се повтаря, няма проблем да има някакъв widget със текст, който да се повтаря на всяка страница от сайта ни или да се повтаря на група от страници в сайта ни.

Ако това нещо бъде засечено, като основно съдържание на текущата ни страница, която искаме да класираме и индексираме, то това нещо на момента ще обърка търсачката. Ще падне тежестта на цялата страница. Най-важното за нас е да опишем за Google къде е съдържанието и с новите семантични елементи в HTML5 това става много лесно.

Става лесно, защото когато си опишем целия код, който реално погледнато представлява header, слагаме го и в header таг. Целият код, който е навигация, независимо къде се намира, а тя може да се намира на различни места из целия шаблон, го слагаме в nav таг. Навигацията трябва да съдържа най-вероятно в идеалния случай просто един списък с основната навигация. Хубаво е да има една основна навигация в nav таг за една страница, да няма няколко такива навигации.

Ако има други навигации, те вече не са основна. Те са някаква спомагателна информация. Най-важното - article частта или по-точно къде ни се намира уникалното нещо за тази страница. Article - това ни е уникалното съдържание за текущата страница. Всичко останало най-вероятно се повтаря в рамките на всички страници от сайта или на група от страници. Странична лента може да има или пък да няма.

Това не винаги означава странична лента. Може да има допълнителна информация към статията, зависи в какъв случай се използва. И естествено footer. Тъй като технологията е сравнително нова. Аз я използвам от 2009 година, но все пак е нова за някои хора и за някои браузъри, като IE. Ако искате всичкото това нещо да работи и да работи на IE от версия 9 надолу, има библиотека в Google, която се нарича html5shiv.

Тази библиотека решава всички проблеми, които могат да възникнат в старите браузъри като цяло с тези нови елементи. Просто си я включвате в head частта на документа и от там нататък спокойно може да работите с новите елементи. Много по-лесно се работи с тях. Много по-лесно програмистите работят с тях, тъй като в момента, реално погледнато, използват div-ове със същите названия.

Много по-лесно се разбира една страница какво съдържа, просто като и видиш кода. Когато е описана с подобни елементи много по-лесно се разбира. Не е казано, че трябва да се използват в този ред, както стана въпрос за навигацията. Тя може да е в ляво, може да е вътре в header-а, може да нямате странична лента, може да имате rich footer, в който да е навигацията и в който да имате други widget-и .

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

Всичко това го описваме, за да може търсачката да разбере къде ни е основното съдържание. Разбира се, основното съдържание може да не ни е само един article елемент, може основното ни съдържание да е примерно началната страница на блог, където имаме няколко article елемента. Тогава вместо article ще имаме main елемент, в който ще имаме вложени article елементи.

На края искам да кажа, че дори да опишете елементите си по-този начин не е 100% гаранция, че Google ще се съобрази с вашето описание. Първо, защото все още повечето сайтове не ги използват и второ, защото голяма част от тези, които ги използват, го правят по грешен начин. Разбира се, технологията е нова. Няма никаква детайлна документация, така че се бърка.

Google си имат собствен математически алгоритъм и може да го проверите в Интернет. Чрез него се опитва да разпознае къде е основното съдържание на една страница, но този алгоритъм понякога греши, така че не се учудвайте, ако ви даде грешки в description-а си, тоест Google да ни ви е хванал основното съдържание, въпреки че сте го описали по този начин. Това не означава, че не трябва да го описваме с HTML5 елементи.

Това е бъдещето. Моят съвет от сега е да спазвате последователност, когато ги описвате. Google спазва алгоритъм и понякога работим и с много сложни сайтове, ние трябва да се опитваме, дори да не си описваме със семантични елементи нашата страница, да спазваме някаква добра практика за последователността им, за да може, дори Google да не се съобрази с тях, отново да разпознае къде е съдържанието ни.

В кода винаги първото нещо трябва да е header елемента ни. Няма как да го сложим най-накрая. Когато погледнем кода трябва да са подредени така. Навигацията трябва да е втора, независимо дали се намира вътре в header елемента или някъде другаде. Навигацията е второто нещо, което трябва да се вижда в кода.

Разбира се, не е задължително, може да е дори след article-а, но просто не изглежда естествено. Навигацията трябва да е кратка, тоест да е наистина основната навигация на сайта ни, тогава няма никакви рискове да я обърка с основното съдържание.

Основното съдържание, както винаги е бил принципът при оптимизация, трябва да е колкото се може по-близо до началото на документа, но естествено няма логика да е преди header-а и не винаги има логика да е преди навигацията, така че слагам основното съдържание като трети семантичен блок в нашите HTML5 страници. Като четвърти блок нареждаме страничната лента и като пети - footer-а.

Идеята ми е да се спазва някаква подобна последователност и естествено, логиката за това е просто article-ът да е колкото се може по-близо до началото на документа. Ако сложим страничната лента, което най-често се греши, ляв sidebar, това не пречи да е след article в кода, но на много хора им е по-лесно и слагат aside bar преди основното съдържание, което в 90% от случаите води до това, текстът от aside да се възприеме като основно съдържание, а не от article.

Особено ако е много къса статия, само видео, снимка или нещо подобно, тогава наблюдавате такива основни snipped-и. Това е основното за сега. Следващият път ще обясня малко по-подробно за подреждането на тези елементи. До тогава! Чао за сега!