Cloxy

CloxySEO блогHTML5 Outline

HTML5 Outline

Видеото е продължение на предишното видео за HTML5 семантиката. Разглеждат се по-подробно типовете семантични елементи: секционни елементи (nav, article, aside, section) и елементи на секция (header, footer). Засяга се и темата как се структурират заглавията и подзаглавията (H1-H6) в HTML5. Ще научите и как да тествате секциите с "HTML5 outliner" инструмент. Още в следващото видео.


Налични формати: 720p WebM (VP8) | 360p MP4 (H.264) | 1080p WebM (VP9)

Транскрипция

Здравейте! Аз съм Васил Тошков от 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, те си стават поддокументи.

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

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

бутон за споделяне
Публикувано от на
Средна оценка 4.5 / 5 (18 гласа)

18 коментара

Огнян Цонев

Име: Огнян Цонев

Дата: 13.03.2014 17:29:48

Оценка: 4 / 5

Интересна интерпретация :)
За съжаление живеем в реалния свят и колкото и да ни се иска не някои сайтове не могат да се поберат в тази структура. Също така :) Изглежда нито за гугъл нито за стандарта има някакво значение как ще ползваме <h*> таговете. Ако започнем с H1 в хедъра то е заглавие на хедъра, ако продължим с H2 в статията, то става заглавие на тая статия, ако имаме H3 и H4 вътре, те си стават подзаглавия. Ако имаме още едно He за страничното меню, пак всичко е наред ;) Реално и 2-та начина работят еднакво. Не е необходимо да си пренаписваме сайтовете веднага!
Гугъл си имат тяхна интерпретация на страниците и могат да използват <h*> таговете, но могат и да решат че те са просто текс и нямат никаква по-висока тежест. Също така си анализират съдържанието и се опитват да открият коя е важната част от сайта. Все пак, нищо не пречи да им помогнем.
Ако пишете нов сайт от нулата, започнете със стандартите и микро датата.

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

Васил Тошков

Име: Васил Тошков

Дата: 13.03.2014 17:39:18

Оценка: 5 / 5

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

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

Stranen

Име: Stranen

Дата: 14.03.2014 16:19:38

Оценка: 4 / 5

Добре де какво не ти хареса ютуб, че качи видеото на сайта с html5

Guest

Име: Guest

Дата: 14.03.2014 17:56:02

Оценка: 5 / 5

Ами не ни плащат добре от ютуб или фб - и затова работим за собствените си сайтове.

Васил Тошков

Име: Васил Тошков

Дата: 14.03.2014 18:06:11

Оценка: 5 / 5

1. Качеството;
2. Скоростта от България;
3. Липсата на контрол;
4. Не можеш да си качиш файла отново на същия адрес, ако искаш да промениш нещо;
5. Подобни видеа на конкуренцията в дясно;
6. Хората споделят и слагат връзки към чужд сайт;
7. Бавното конвертиране в HD формат (докато стане хората ще са го изгледали в SD);
8. Рано или късно всяко видео в YT изчезва заради авторски права или друга грешка;

9. Фен съм на HTML5 :)
10. Мога да си сложа Microdata

Мога да изреждам и до безкрай така... А и едно видео за HTML5 върви да се пуска през HTML5 ;)

Stranen

Име: Stranen

Дата: 15.03.2014 04:36:07

Оценка: 4 / 5

Обаче, забравяте, че видеото качено в ютуб излиза в търсачката на ютуб... А тя скоро може да стане по-силна от много други търсачки. Освен това в описанието може да си сложиш обратен линк, към своя ресурс. Иначе е супер качествено наистина, и звука и видеото са супер.
За мене лично това упражнение да си кача видеото на хостинга на сайта е непосилно с моите 3 гигабайта...

Васил Тошков

Име: Васил Тошков

Дата: 15.03.2014 07:31:18

Оценка: 4 / 5

Аз ги качвам и там, но с една седмица закъснение: http://www.youtube.com/channel/UCnWWZK1ozeZtU3UfOSi8b-Q

Точно заради това, което казваш - тяхната търсачка, която е втората по използване в света и общността.

Stranen

Име: Stranen

Дата: 16.03.2014 05:14:44

Оценка: 5 / 5

Подписах се на канала, Странен Уфологов... Ако искаш ти се подпиши на моя аз също обичам да правя видео... направо съм си фен на ютуб и постоянно мисля какъв клип да направя ...

Charlike Mike Reagent

Име: Charlike Mike Reagent

Дата: 18.03.2014 10:01:37

Оценка: 5 / 5

Абе екстра са всички видеа, но нещо лагва - бавно се зареждат последните 2-3 като ги гледам и трябва чакаш доста време, та да го изгледаш на екс цялото видео. :)
А иначе, мнение за hgroup и за section? За section съм усещал, че някак не е много хубав, не знам.

Поздрави, Георги Янев.

Васил Тошков

Име: Васил Тошков

Дата: 18.03.2014 10:10:35

Оценка: 4 / 5

hgroup отпадна като елемент, така че забрави за него :)

Сайтът е в голям дата център с добра свързаност. От това по-добро като хостинг едва ли може да се предложи. Възможно е някои Интернет доставчици да правят проблем.

Аз ги излъчвам със 720p, което си е доста информация. Бих ги пускал и с 1080p, но съвсем бавно ще започне да се зарежда.

Но това е хубавото на хостинга в България, че скоростта е по-висока и ако от YouTube ти се заражда с една скорост при 360p, от България със същата скорост ще се зарежда на 720p.

K. Delieva

Име: K. Delieva

Дата: 18.03.2014 10:16:58

Оценка: 4 / 5

Аргументите са много добри. И наистина качване в сайта е по-добро решение, особено имайки предвид, че видеа се позиционират по-добре в Google. Единственият недостатък е, че видеата товарят хоста. Тоест, изисква се повече ресурс. :/

Васил Тошков

Име: Васил Тошков

Дата: 18.03.2014 10:55:53

Оценка: 5 / 5

Изразходват само дисково пространство и трафик. Трафикът е безплатен на повечето места и неограничен. Дисковото пространство не е нещо фрапиращо, дори за HD.

А и винаги можеш да преминеш на Amazon S3 File Cloud и да се шириш неограничено за стотинки :)

Charlike Mike Reagent

Име: Charlike Mike Reagent

Дата: 18.03.2014 11:07:59

Оценка: 5 / 5

Хм. Значи верно си ми прави ташак нета от няколко седмици.

Иначе за hgroup.. добре, че са го махнали, то по-безсмислено нещо нямаше.
Като каза outliner та се сетих и отново се заиграх и видях, че някак не отчита aside за никакъв чеп.

Примерно header, main, aside, footer в последователност. Е, aside-a си ми го показва като част от main-a.
http://gsnedders.html5.org/outliner/

Васил Тошков

Име: Васил Тошков

Дата: 18.03.2014 11:19:02

Оценка: 4 / 5

Хваща ти го така, защото е вътре в article и логично си прави още едно ниво. Сложи го извън article, ако искаш да са отделни точки на едно ниво.

Charlike Mike Reagent

Име: Charlike Mike Reagent

Дата: 18.03.2014 11:34:26

Оценка: 5 / 5

Да, за този aside, който е в article ми е ясно и има логика. :)
Аз не за него, а за този който е след main-a, може да не си го забелязъл - "Aside: Posts, Categories, Tags". Извън main-a e, а го пльоска при него, няма логика.
А тези aside-ове, които са в article са сложени, защото пък ако е footer, вместо aside, то тогава какъвто и да било heading в този footer го отчита като "отделно заглавие за статия" - излиза едно ниво навънка.

Васил Тошков

Име: Васил Тошков

Дата: 18.03.2014 11:44:21

Оценка: 4 / 5

main не се секционен елемент, затова така се получава. Казах го във видеото :)

K. Delieva

Име: K. Delieva

Дата: 18.03.2014 12:00:45

Оценка: 5 / 5

А CPU-то при споделения хостинг? То е доста гадничко ограничение. :X. Всъщност, зависи много какви клипове се качват, колко са големи и естествено гледаемостта. При такъв тип (като твоите видеоклипове) е добре, но при сайтове тип вбокс7, би товарило много...

Между другото преди 2-3 годинки имаше проблеми с хостингите и по-конкретно ffmpeg - за споделен хост, не се предлагаше мисля. Тоест, ако се използва някакъв плъгин (да кажем за WP) за качването на клипове, който ги конвертира - става и там забавно товаренето.

П.П. Amazon S3 File Cloud не го знаех. :X Мерси за споделянето. :)

Васил Тошков

Име: Васил Тошков

Дата: 18.03.2014 14:25:14

Оценка: 4 / 5

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

Добавяне на коментар