Вибудовування логічної структури сторінки сайту на HTML5, Vaden Pro

Одним із завдань створення нової версії HTML5 було спрощення розмітки документа. Вирішенням цього завдання стало створення нових тегів, які відповідають за структуризацію документа.

Основний принцип побудови дерева сторінки полягає в дробленні всієї сторінки на структурні елементи – блоки чи секції. До цих секцій відносять такі теги, як (шапка сайту), , , і (підвал). До моменту створення перелічених вище тегів верстальники використовували теги для структуризації документа з використанням унікальних класів та id. Код, побудований виключно на дуже складний для сприйняття і не читальний. Причиною цього є відсутність логічного навантаження на тезі. Це було головним каменем спотикання пошукових систем.

Цей факт стимулював появи на світ тегів зі смисловим навантаженням, що стало так званою картою для роботів у дрімучому лісі коду.

Позитивні сторони використання нових тегів

Пошукова оптимізація

Перший і вагомий позитивний бік використання модернізованого HTML5 це полегшення обробки коду для пошукових роботів. Наразі роботи легко відрізняють допоміжну інформацію на сайті від основної тематики та контенту.

Внаслідок цього пошукові системи підвищать ефективність знаходження унікального контенту та плагіату.

Однак варто відзначити, що багато сеошників не усвідомили основну суть принципу роботи пошукових систем за такою розміткою, але це справа часу.

Доступність

Для наглядного аналізу доступності нових методів верстки розглянемо приклад сайту:

Дивлячись на цей сайт, досить просто зорієнтуватися, де знаходиться основний контент, а де допоміжнаінформація, а також чітко видно, де шапка сайту, меню і підвал. Однак при використанні голосових браузерів дуже важко дістатися суті сайту, наприклад, якщо це сайт-магазин. Щоб дістатися до суті асортименту пропонованого товару користувачеві знадобиться не дуже завзятість і терпіння, яким володіє не кожен.

У таких випадках виходом із ситуації стане використання нових тегів. Вони дозволять лише однією голосовою командою переходити від назви сайту до меню, основного контенту та допоміжних елементів навігації сайту.

Ці позитивні сторони HTML5 вплинули на несподіваний інтерес творців альтернативних систем пошуку, роблять серйозний ухил на семантику документа.

Коротко про основне призначення структурних тегів:

Цей тег відповідає за структуризацію блоків, пов'язаних чимось між собою. Також за допомогою цієї команди можна ділити текст на розділи, розділи та підрозділи. Зазвичай у межах такого тега має місце заголовок.

Докладніше про використання цього тегу для побудови семантичної структури документа можна прочитати у статті "Побудова структури документа в HTML5, використовуючи section"

Для зрозумілішого роз'яснення повернемося наприклад розбиття об'ємного тексту глави і параграфи, які можуть мати підрозділи і підпункти. Звернемося до прикладу коду для закріплення матеріалу

До речі, зверніть увагу на наявність кількох заголовків з маркером h1 – це спеціальний прийом, який ми обговоримо пізніше.

Деякі користувачі стверджують, що це не більше, ніж заміна тега блокової верстки . Однак це твердження не є вірним. Існує чітке розмежування, коли застосування section є доречним, а коли ні. Наприклад, при прив'язці деякому контейнеру особливого стилю необхіднозвертатися лише до. Також варто звертати увагу і на смислове навантаження, яке є в блоці-section не використовується за відсутності природного заголовка.

Досвідчені веб-майстри називають цю секцію окремим випадком тега . Article виділяє «автономну» (таку, яку загалом можна вирізати зі сторінки, і навіть вона втратить свого сенсу) частина сторінки, що у своє чергу складається з взаємозалежних елементів.

Однак, у специфікації досить хитромудро описано це поняття, внаслідок чого виникло дуже багато суперечок з приводу того, що саме використовувати: або . До основних розбіжностей із цього питання можна віднести такі моменти:

Для створення головного контейнера веб-сторінки слід використовувати , або . З одного боку, весь вміст так чи інакше пов'язаний між собою, однак сайт можна назвати незалежною одиницею.
як саме оформляти шапку сайту, а точніше, які теги використовувати?
та, нарешті, як працювати з основним контентом сайту? Потрібно використовувати з всередині або виключно користуватися одним.

Ця плутанина нагадує ті часи, коли аналогічні суперечки виникали під час використання тегів та . Тоді проблема була вирішена досить просто, але радикально: відмовилися від використання.

І у зв'язку з цим виникає цілком логічне і законне питання: навіщо використовувати , якщо можна відмовитися від нього і працювати тільки з ? Зрештою модернізація HTML5 була спрямована на полегшення роботи веб-майстрів.

Швидше за все в даному випадку відмовитись від буде не коректно, тому що ми б отримали абсолютно ідентичну розмітку в блочному стилі, яка була у попередній версії HTML. Вирішенням цього питання стало б удосконалення таким чином, щоб булипомітні чіткі відмінності між основним контентом сайту та допоміжною інформацією.

На допомогу початківцям майстрам сайтобудування пропоную кілька особливих рис, за якими можна досить просто вирішити, коли саме потрібно використовувати:

Основний підхід - має цінність для користувача, привертає його увагу, тобто основний вміст сторінки.
Якщо раціонально було б додати атрибути pubdat чи cite.
У разі повної автономності розглянутого нами фрагмента коду.

Створено для відокремлення основного вмісту сторінки від допоміжного.

Найчастіше подібна інформація на сайті розміщується у сайдбарі.

Служить для чіткого виділення великої частини сторінки. У ньому розташовуються назви як всього документа, і окремих його елементів. Найчастіше всередині цієї секції можна зустріти такі теги, як і . Однак це припис не обов'язковий, в принципі в header можуть розміщуватися будь-які теги.

Варто зазначити, що насамперед цей тег застосовують при створенні шапки, як зазначено в прикладі:

Однак не варто обмежувати цей тег шапкою для веб-сторінки. він може розташовуватися всередині, і в особливих виняткових випадках. При такому підході тег є дочірнім елементом і відповідає назві цієї окремої частини. Розглянемо приклад, коли використовується всередині:

Варто зазначити, що header збирає воєдино заголовок частини, проте якщо ця частина складається тільки з назви, то застосовувати даний тег не слід:

Це нераціональне використання header, правильнішою з погляду семантики буде наступний запис коду:

Опускаючись по структурі сайту, все нижче ми поступово підійшли до нашого «підвалу», в якому розташовується деяка.описова інформація розділу чи сайту загалом. Ця інформація відокремлюється тегом:

Використання nav відповідає за розподіл навігаційної частини сайту та основного контенту. Усередині цього блоку можуть розташовуватися як посилання на інші сторінки сайту, а й якірні посилання по поточній сторінці. Наприклад подивимося на наступний код:

Варто також звернути увагу, що формує не просто перелік посилань, а самостійну секцію зі складною структурою. Дивимося:

І не варто забувати про те, що формує основний навігаційний блок веб-сторінки. додаткові навігаційні елементи сайту, такі як допоміжні посилання у футері або блоки, що повторюють навігацію, не повинні виділятися цим тегом.