Створення HTML 5 структури на практиці
Стаття, в якій розглядається стан справ, пов'язаних зі створенням HTML5-структури на практиці, а також деякі інші моменти, які необхідно враховувати під час її розробки.
Перед тим як перейти до розробки структури документа відповідно до специфікації HTML5, розглянемо на якому рівні здійснюється її підтримка в браузерах і інших призначених для користувача агентів.
В даний час склалася така ситуація, коли одна частина призначених для користувача агентів взагалі не розуміє структуру документа, яка виконана відповідно до специфікації HTML5. А інша частина призначених для користувача агентів забезпечують її підтримку поки тільки експериментально.
Щоб автори звернули на це увагу, розробники специфікації опублікували в стандарті HTML5 наступний абзац.
Основне вміст вищенаведеного абзацу полягає в тому, що вони закликають авторів не покладатися повністю на структуру документа, описаної в цій специфікації, принаймні до тих пір, поки нова структура не отримає широку підтримку. Стандарт рекомендує авторам, як і раніше, створювати структуру веб-сторінок за допомогою елементів h1, h2, h3, h4, h5 і h6 або таку, яка була б зворотно сумісною з заголовної.
Незважаючи на розпливчасту підтримку HTML5 структури документа для користувача агентами, авторам все одно варто задуматися про її впровадженні. Це дозволить зробити документ структурованим, семантичним і логічним з точки зору HTML5.
До тих пір поки HTML 5 структура документа, що не буде однозначно розумітися призначеними для користувача агентами, її створення буде обумовлено необхідністю використання зворотної сумісності з HTML4. Таким чином, при створенні структури документа авторам слід враховувати те, що вона повинна бути правильної як щодо HTML4, так і по відношенню до HTML5.
Створювати таку структуру не так вже й складно як це може здатися на перший погляд. Для цього авторам всього лише необхідно використовувати всередині секційних елементів заголовки відповідного рангу. Визначається ранг за рівнем вкладеності секційного елемента. Кореневої секційний елемент має 1 ранг. Секції, які розташовані безпосередньо в ньому, мають 2 ранг. Секції, які розташовані всередині секцій другого рангу, відповідно мають 3 ранг і т.д.
<Body> <! - Тема секції документа (1 рівень) -> <h1> Заголовок документа </ h1> <! - Секція nav, вкладена в секцію документа (2 рівень) -> <nav> <h2> Навігація </ h2> ... </ nav> <! - Секція article, вкладена в секцію документа (2 рівень) -> <article> <h2> Тема секції article </ h2> ... <! - секція section, вкладена в секцію article 2 рівня -> <section> <h3> Заголовок секції section </ h3> ... </ section> <! - секція aside, вкладена в секцію article 2 рівня -> <aside > <h3> Заголовок секції aside </ h3> ... <! - Секція section, вкладена в секцію aside 3 рівня -> <section> <h4> Заголовок секції section </ h4> ... </ section> </ aside> ... </ article> ... </ body>
Вищенаведений приклад матиме наступну структуру (outline):
У HTML5:[document] Тема документа [nav] Навігація [article] Тема секції article [section] Тема секції section [aside] Тема сеціі aside [section] Тема секції section У HTML4: [h1] Тема документа [h2] Навігація [h2 ] Тема секції article [h3] Тема секції section [h3] Тема сеціі aside [h4] Тема секції section
Процес створення HTML5-структури документа зворотно сумісною з заголовної (HTML4) розглянемо на прикладі сторінки блогу, що містить статтю.
Почнемо процес проектування з розгляду основних груп контенту, з яких складається дана сторінка.
На вищепредставленими малюнку видно, що дана сторінка складається з шапки, навігації по блогу, основного блоку (стаття з коментарями), бічній панелі і футера.
Найважливішою інформацією на цій сторінці є назва статті. Далі за важливістю можна розташувати розділи статті та коментарі до неї. Розділи, представлені в бічній панелі, є допоміжними і не несуть в собі основний контент сторінки.
Процес створення HTML5-структури документа зворотно сумісною з заголовної (HTML4) і оптимізованої під пошукові системи виконаємо поетапно.
На 1 етапі розробимо HTML5-структуру сторінки, не звертаючи увагу на те, як вона буде виглядати з точки зору HTML4 (заголовної структури).
Для цього скористається елементами article, section, nav і aside з категорії sectioning, і елементом h1 з групи heading.
<! - Секція document (документа) -> <body> <h1> Назва сайту </ h1> <! - Секція nav (навігація) -> <nav> <h1> Навігація по сайту </ h1> < / nav> <! - Секція article (статті) ->; <Article> <h1> Назва статті </ h1> <section> <h1> 1 розділ статті </ h1> ... <section> <h1> 1 підрозділ 1 розділу </ h1> ... </ section> < / section> <section> <h1> 2 розділ статті </ h1> ... <section> <h1> 1 підрозділу 2 розділу </ h1> ... </ section> <section> <h1> 1 підрозділу 2 розділу </ h1> ... </ section> </ section> <section> <h1> 3 розділ статті </ h1> ... </ section> <section> <h1> Коментарі до статті </ h1> .. . </ section> </ article> <! - Секція aside (вміст, побічно пов'язане з іншим вмістом сторінки) -> <aside> <h1> Додаткові розділи </ h1> <section> <h1> Пошук </ h1 > ... </ section> <section> <h1> Хмара тегів </ h1> ... </ section> <section> <h1> Коментарі </ h1> ... </ section> <section> <h1 > Статті </ h1> ... </ section> <section> <h1> Голосування </ h1> ... </ s ection> <section> <h1> Про блозі </ h1> ... </ section> </ aside> </ body> HTML5 структура сторінки: [document] Назва сайту [nav] Навігація по сайту [article] Назва статті [ section] 1 розділ статті [section] 1 підрозділ 1 розділу [section] 2 розділ статті [section] 1 підрозділу 2 розділу [section] 2 підрозділу 2 розділу [section] 3 розділ статті [section] Коментарі до статті [aside] Додаткові розділи [ section] Пошук [section] Хмара тегів [section] Коментарі [section] статті [section] Голосування [section] Про блозі HTML4 структура сторінки: [h1] Назва сайту [h1] Навігація по сайту [h1] Назва статті [h1] 1 розділ статті [h1] 1 підрозділ 1 розділу [h1] 2 р здел статті [h1] 1 підрозділу 2 розділу [h1] 2 підрозділу 2 розділу [h1] 3 розділ статті [h1] Коментарі до статті [h1] Додаткові розділи [h1] Пошук [h1] Хмара тегів [h1] Коментарі [h1] Статті [h1] Голосування [h1] Про блозі
На 2 етапі доопрацюємо структуру, отриману на 1 етапі, таким чином, щоб вона була зворотно сумісною з заголовної.
<! - Секція document (документа) -> <body> <h1> Назва сайту </ h1> <! - Секція nav (навігація) -> <nav> <h2> Навігація по сайту </ h2> < / nav> <! - Секція article (статті) ->; <Article> <h2> Назва статті </ h2> <section> <h3> 1 розділ статті </ h3> ... <section> <h4> 1 підрозділ 1 розділу </ h4> ... </ section> < / section> <section> <h3> 2 розділ статті </ h3> ... <section> <h4> 1 підрозділу 2 розділу </ h4> ... </ section> <section> <h4> 1 підрозділу 2 розділу </ h4> ... </ section> </ section> <section> <h3> 3 розділ статті </ h3> ... </ section> <section> <h3> Коментарі до статті </ h3> .. . </ section> </ article> <! - Секція aside (вміст, побічно пов'язане з іншим вмістом сторінки) -> <aside> <h2> Додаткові розділи </ h2> <section> <h3> Пошук </ h3 > ... </ section> <section> <h3> Хмара тегів </ h3> ... </ section> <section> <h3> Коментарі </ h3> ... </ section> <section> <h3 > Статті </ h3> ... </ section> <section> <h3> Голосування </ h3> ... </ s ection> <section> <h3> Про блозі </ h3> ... </ section> </ aside> </ body> HTML5 структура сторінки: [document] Назва сайту [nav] Навігація по сайту [article] Назва статті [ section] 1 розділ статті [section] 1 підрозділ 1 розділу [section] 2 розділ статті [section] 1 підрозділу 2 розділу [section] 2 підрозділу 2 розділу [section] 3 розділ статті [section] Коментарі до статті [aside] Додаткові розділи [ section] Пошук [section] Хмара тегів [section] Коментарі [section] статті [section] Голосування [section] Про блозі HTML4 структура сторінки: [h1] Назва сайту [h2] Навігація по сайту [h2] Назва статті [h3] 1 розділ статті [h4] 1 підрозділ 1 розділу [h3] 2 р здел статті [h4] 1 підрозділу 2 розділу [h4] 2 підрозділу 2 розділу [h3] 3 розділ статті [h3] Коментарі до статті [h2] Додаткові розділи [h3] Пошук [h3] Хмара тегів [h3] Коментарі [h3] Статті [h3] Голосування [h3] Про блозі
Тепер перейдемо до оптимізації вищепредставленими структури документа під критерії пошукових систем, а саме переробимо її таким чином, щоб найголовнішим вмістом сторінки було не назва блогу, а назва статті.
<Body> ... <h1> Назва статті </ h1> <section> <h2> 1 розділ статті </ h2> ... <section> <h3> 1 підрозділ 1 розділу </ h3> ... </ section> </ section> <section> <h2> 2 розділ статті </ h2> ... <section> <h3> 1 підрозділу 2 розділу </ h3> ... </ section> <section> <h3> 1 підрозділ 2 розділу </ h3> ... </ section> </ section> <section> <h2> 3 розділ статті </ h2> ... </ section> <section> <h3> Коментарі до статті </ h3 > ... </ section> <aside> <h4> Додаткові розділи </ h4> <section> <h5> Пошук </ h5> ... </ section> <section> <h5> Хмара тегів </ h5> ... </ section> <section> <h5> Коментарі </ h5> ... </ section> <section> <h5> Статті </ h5> ... </ section> <section> <h5> Голосування </ h5> ... </ section> <section> <h5> Про блозі </ h5> ... </ section> </ aside> </ body> HTML5 структура сторінки: [document] Назва статті [ section] 1 розділ статті [section] 1 підрозділ 1 розділу [section] 2 розділ статті [section] 1 підрозділу 2 розділу [section] 2 підрозділу 2 розділу [section] 3 розділ статті [section] Коментарі до статті [aside] Додаткові розділи [ section] Пошук [section] Хмара тегів [section] Коментарі [section] статті [section] Голосування [section] Про блозі HTML4 структура сторінки: [h1] Назва статті [h2] 1 розділ статті [h3] 1 підрозділ 1 розділу [h2] 2 розділ статті [h3] 1 підрозділу 2 розділу [h3] 2 підрозділу 2 розділу [h2] 3 розділ статті [h3] Коментарі до статті [h4] Додаткові розділи [h5] Пошук [h5] Хмара тегів [h5] Коментарі [h 5] Статті [h5] Голосування [h5] Про блозі
Перевірити розроблену структуру документа можна за допомогою таких інструментів:
- розширення "HTML5 Outliner" для браузера Google Chrome;
- онлайн інструменту HTML5 Outliner ;
- сервісу перевірки розмітки W3C, доступного за адресою https://validator.w3.org/ ;
- розширення headingsMap 2.1 для браузера Mozilla Firefox.
Сервіс W3C призначений в першу чергу для перевірки відповідності коду HTML-документа обраної специфікації (HTML 4.01, HTML5 і ін.). Крім цього він також дозволяє також перевірити структуру документа, якщо буде включена відповідна опція.
Розширення HeadingsMap для браузера Mozilla Firefox - це дуже зручний інструмент, який дозволяє перевірити структуру документа відповідно до специфікації HTML5 і HTML4.
На закінчення можна відзначити те, що авторам при створенні структури документа, необхідно її зробити не тільки відповідної специфікації HTML5, а й HTML4. Це твердження буде ще актуально досить тривалий час, і закінчить своє існування тільки тоді, коли основна маса призначених для користувача агентів обзаведеться повноцінною підтримкою структурних алгоритмів, що працюють у відповідності зі специфікацією HTML5.