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

Миналия път бях начертал зад мен (вече е изтрито), но как са изглеждали едно време HTML документите. Тогава идеята беше една страница да е един документ. В момента, както показах и миналия път, уеб страниците стават все по-сложни и няма как една страница да е само един документ.

Това, което е заложено в HTML5 и концепцията е, че вече една страница не е само един документ. Една страница е множество документи и нещо в повече - една страница в новия HTML формат е множество от вложени един в друг документи, тоест има и поддокументи. Освен поддокументи, те са и вложени.

За какво става въпрос? Семантичните елементи в HTML5 миналия път ги показах. Те са следните и се делят на две групи. Това са секционни елементи и са отбелязани тук с черно. Това са nav, article, aside и section. И елементи на секция, тоест всеки един от тези секционни елементи може да има елементи на секция, които са header и footer. Всеки един документ по подразбиране, дори и най-старият, какъвто беше миналия път, си има своите елементи.

Ако приемем, че целият документ е една цяла секция, той си има елементи на секцията header и footer. Елементите на секция съм ги отбелязал със синьо. Поддокументи в този документ се водят навигацията, самият article и страничната лента. После ще кажа и за тези неща, които съм написал тук вътре.

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

Той не може да е елемент на статията. Article не може да си има main, напротив обратното (това е много важно уточнение, тъй като много често се бърка) всеки main трябва да съдържа article, а не обратното. Main тагът или main елементът трябва да се повтаря само веднъж в рамките на документа, изключително нов е като технология (преди няколко месеца беше одобрен окончателно).

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

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

Както виждате те са две групи - секционни елементи, тоест те създават поддокументи в текущия документ и елементи на секцията. Пак ще повторя, разгледахме, че главният елемент си има header и footer елементи на секции (те не са поддокументи), навигация, статия или пък може да е main таг, но main тагът не е секционен елемент. Той не създава поддокумент. Той просто групира секции. Разбирам, че е сложно. Има и странична лента.

Това, което е важно и ще се опитам да обясня, първо, са нивата на заглавия. Нивата на заглавия в старата версия HTML4 се правеха, като в header слагаме H1, най-често. Тук слагаме H2, тоест статията да ни е второ ниво. В страничната лента слагаме трето ниво и във footer, ако имаме например rich footer - 4 ниво.

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

В новия шаблон има структурирани по друг начин заглавия или дори в HTML5. Това, което е недостатък, е че трябва да обиколим и навсякъде да сменим заглавията. Примерно, те вече трябва да са от първо ниво или от трето ниво. Може да сме объркали още повече шаблона. Това, естествено, е недостатък. Има страшно много предимства да си правим секциите в ред.

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

Това не е конфликт в HTML5. Не е конфликт, защото това са отделни документи. Това е един документ, а това е отделен, вложен в него, документ. Заглавие може да сложим и на навигацията. Има някои, които си правят сайтовете, така че да имат заглавие и на навигацията, но няма да навлизаме сега в този случай.

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

Другите три варианта се срещат прекалено често, за това за тях си има елементи. И тук много хора ме питат "Добре, ако всичко е H1 заглавие, кога използваме останалите от второ до шесто ниво?" Много е просто. Те се използват, когато имаме подзаглавие, имаме статия и тя има подзаглавие.

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

От там нататък текат останалите нива. По този начин се работи много, много по-лесно и с бази данни, и с всичко. Много по-лесно е структуриран самият документ. Естествено, на Google не му пука изобщо. Дори да ги напишете по стария начин, Google вижда, че е просто заглавие и не го интересува, за да може да работи и с нови, и със стари документи.

Но, естествено, е добре да спазвате новите концепции в новия стандарт. Даже в XHTML 2.0 няма, който така и не се наложи в HTML 5. Там въобще нямаше такива нива на заглавия (от първо до шесто ниво). Там просто имаше един таг H и си го слагаш, където искаш. Сигурно щеше да е много по-добро решение, но трябва да имаме съвместимост със старите системи.

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

Как да тестваме дали сме си направили сайта правилно? Много е просто. Пишете в Google или някоя друга търсачка HTML5 Outliner и ще ви излязат уеббазирани инструменти, разширения за Firefox, за Chrome и за всички браузъри, инструменти, чрез които да тествате дали правилно сте си структурирали тези секции, подзаглавие, елементите на секциите и всички такива неща. Нещо, което забравих да кажа е, че всяка една секция може да има елементи на секция.

Това нещо, ако е една статия, то тя може също да си има header и footer и няма нищо лошо в това. Много често в header на една статия слагаме, освен заглавието и дата на публикуване и автор, във footer пък слагаме коментари, ключови думи, някакви такива неща, зависи каква информация показваме в нашия шаблон.

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

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

Това са секции и съответните подсекции. Една главна секция със заглавие, а ако е блог, това тук ще е заглавието на блога. Ако е фирмен сайт, някой път ще направя и за това видео, как да си направим логото на сайта да носи семантична информация, като заглавие, но това ще е от логото alt текста, т.е. бранда на самия сайт.

Като подсекция на главната секция трябва да имате тези неща, не е казано, но просто в идеалния случай да са йерархично подредени. Това показва, че има йерархия, а не всичко да е на едно ниво. Трябва да имате навигация. Най-вероятно няма да я има, а ще пише Untitled Section, тъй като едва ли сте си сложили заглавие на навигацията, но все пак може да си сложите. Има такива случаи. Хора правят сайтове за хора с увреждания и слагат title на секцията навигация.

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

След което, едно ниво към главното - страничната лента на сайта, тоест aside, който също няма име, защото едва ли сме му сложили title на страничната лента, но може и това да направим. Има два начина, но няма сега да ги описвам. И, естествено, ако има някакви поделементи, както е тук в случая widget, те си стават поддокументи.

Аз така ги наричам, но е правилно да се наричат секции. Знам, че звучи сложно. Повярвайте ми, наистина не е лесно. Ако правите тези неща правилно, един ден това нещо ще се отплати. Идеята е да се покаже ясно структурата на цялата страница.

Тя да е йерархична, да има приоритети и да се разбира, освен къде е главното съдържание, кое друго съдържание на кое е подобект. Всичко става много по-ясно. Ако тези неща не са описани по този начин, документът става една плоска структура и всяка една система трябва да гадае кое какво е. Това е, за сега. Надявам се да е било полезно. До следващия път! Чао!