Изграждане на логическа структура на страницата на сайта в HTML5, Vaden Pro
Едно от предизвикателствата при създаването на новата версия на HTML5 беше да се опрости маркирането на документа. Решението на този проблем беше създаването на нови маркери, които отговарят за структурирането на документа.
Основният принцип за изграждане на дърво на страница се основава на разделянето на цялата страница на структурни елементи - блокове или секции. Тези раздели включват маркери като (заглавка на сайта), и (долен колонтитул). Преди създаването на горните маркери, дизайнерите на оформление са използвали тагове за структуриране на документа, използвайки уникални класове и идентификатор. Код, изграден изключително върху много труден за четене и не четим. Причината за това е липсата на логическо натоварване на маркера. Това е основният препъни камък за търсачките.
Този факт стимулира появата на тагове със семантично натоварване, които се превърнаха в така наречената „карта“ за роботи в гъстата гора на кода.
Положителни аспекти на използването на нови маркери
Оптимизация за търсачки
Първата и съществена положителна страна на използването на модернизирания HTML5 е лекотата на обработка на кода за роботи за търсене. В момента роботите лесно различават спомагателната информация на сайта от основните теми и съдържание.
В резултат на това търсачките ще повишат ефективността при намиране на уникално съдържание и плагиатство.
Заслужава обаче да се отбележи, че много SEO не са разбрали основната същност на принципа на това как търсачките работят с помощта на такава маркировка, но това е въпрос на време.
Наличност
За визуален анализ на наличността на нови методи за оформление, помислете за примерен сайт:
Разглеждайки този сайт, достатъчно е просто да навигирате къде е основното съдържание и къде е спомагателната информация, а също така е ясно видимо къде са заглавката, менютата и долният колонтитул на сайта. Въпреки това, когато използвате гласови браузъри, е много трудно да стигнете до същността на сайта, например, ако това е сайт на магазин. За да стигне до същността на асортимента на предлагания продукт, потребителят няма да има нужда от голямо постоянство и търпение, каквито не всеки има.
В такива случаи изходът е да се използват нови тагове. Те ще ви позволят да навигирате от името на сайта до менюто, основното съдържание и спомагателните елементи за навигация на сайта само с една гласова команда.
Тези положителни аспекти на HTML5 са повлияли на неочаквания интерес на създателите на алтернативни търсачки, те правят сериозно пристрастие към семантиката на документа.
Накратко за основната цел на структурните тагове:
Този маркер е отговорен за структурирането на блокове, които са свързани помежду си. Можете също да използвате тази команда, за да разделите текста на глави, раздели и подраздели. Обикновено в рамките на такъв етикет има заглавие.
Можете да прочетете повече за използването на този таг за изграждане на семантичната структура на документ в статията „Изграждане на структура на документ в HTML5 с помощта на раздел“
За по-ясно обяснение, нека се върнем към примера за разбиване на обемен текст на глави и параграфи, които също могат да имат подраздели и алинеи. Обърнете се към следния пример за код, за да фиксирате неща
Между другото, обърнете внимание на наличието на множество заглавки с маркера h1, това е специален трик, който ще обсъдим по-късно.