Html5 - основи створення структури документа, ит шеф
Семантика і структура документа в HTML 5
Структура документа грає дуже важливу роль для розуміння того, як влаштована веб-сторінка. Вона визначає те, як контенти організовані і взаємопов'язані між собою в документі, а також їх відносну важливість. Якщо скористатися схемою документа, то можна побачити, як більш просто стало переглядати інформацію. Правильно спроектована структура надає вмісту сторінки сенс, робить його більш легким для читання, яке здійснюється пошуковими системами та іншими призначеними для користувача агентами. На сайті, в якому правильно спроектована структура, простіше орієнтуватися і знаходити потрібну інформацію.
Створення структури документа до HTML 5
Перед вивченням процесу створення структури документа в HTML 5, бажано познайомитися з тим, як це здійснювалося в попередній версії мови і з якими проблемами веб-розробнику при цьому доводилося стикатися.
Як утворюється структура документа в HTML 4
Проблеми при реалізації структури документа
Більш докладно познайомитися з процесом створення структури документа в HTML 4 і з проблемами при її реалізації можна в наступній статті.
Створення структури документа в HTML 5
Елементи, призначені для створення структури в HTML 5.
Для створення структури документа в HTML 5 використовуються заголовні елементи (h1. H2. H3. H4. H5 і h6) і елементи nav. aside. section і article з групи sectioning. Дані елементи на відміну від заголовків призначені для створення явних розділів і встановлення цих розділів деякого сенсу.
Процес створення структури документа в HTML5
Для того щоб було простіше зрозуміти основні принципи структурування документа в HTML 5 буде вважати, що елементи body. nav. aside. section і article створюють секції (явні розділи), а елементи h1. h2. h3. h4. h5 і h6 - звичайні розділи (неявні розділи).
Процес розробки структури документа розглянемо за допомогою покрокових інструкцій.
У HTML 5 створення структури документа починається з елемента body. Даний елемент створює основну секцію (розділ на рівні документа).
Після цього зазвичай переходять до створення секцій всередині body (основний секції). Наприклад, створимо секції nav. section і aside. Ці секції будуть дочірніми по відношенню до body.
Кожна з секцій (nav. Aside. Section. Article) в свою чергу теж може містити секції. Таким чином, в HTML 5 виходить структура документа. Тобто одні секції вкладаються в інші. Секції, які розташовані безпосередньо в body. мають 2 рівень. А секції, які розташовані безпосередньо в секціях 2 рівня будуть вже мати 3 рівень і т.д.
Наприклад, створимо в section 3 секції article.
Елементи h1. h2. h3. h4. h5 і h6 в HTML5 застосовуються для зазначення назви секції (тобто виступають в якості заголовка секції) і для створення неявних розділів всередині секції. Причому взаємозв'язок між неявними розділами здійснюється тільки в межах однієї секції. Тобто заголовні елементи, що знаходяться в одній секції, не пов'язані з заголовками елементами, які перебувають в іншій секції. Іншими словами неявні розділи однієї секції ізольовані від неявних розділах іншій секції. Як заголовок секції виступає заголовки елемент, що знаходиться в цій секції і має найвищий ранг (рівень). Якщо секція не містить заголовки елемент, то вона не має назви (Untitled).
Увага: У HTML 4 на відміну від HTML 5 взаємозв'язок між неявними розділами здійснювалася в межах всього документа, а не в межах секції (body. Nav. Aside. Section. Article). В HTML 4 немає елементів для створення секцій.
Наприклад, створимо назви для всіх секцій крім nav.
Наприклад, створимо неявні розділи в секції section і aside: