Термін "семантична Всесвітня павутини" зараз використовується майже в інфляційному режимі. При цьому багатьом людям зовсім не зрозуміло, що означає ця прославлена семантика. По суті, все досить просто: завдяки семантиці фактично можна витягти потрібну/бажану інформацію з величезних обсягів даних.
Конкретний приклад покаже важливість семантики. Цифрові фотографії - чудова річ. Вони можуть бути показані по всьому світу через Інтернет одразу після зйомки. Що стосується приватного сектору, то також у професійному середовищі це вже давно закріпилося. Фотоагентства, музеї, бібліотеки та фотографи пропонують фотографії, картини або цифрові версії цінних текстів через професійні бібліотеки зображень. На відповідних веб-сайтах є пошукові форми, які дозволяють просувати платформу. Найпопулярнішим прикладом пошукової системи зображень у мережі 2.0 є, безумовно, Flickr.
Ті, хто вже використовував такі пошукові системи зображень, знають їх обмеження: наприклад, ввівши термін Kohl, ви побачите фотографії з різних областей. Так, пошукова система зображень від Yahoo! покаже фото капустяного синичку, тенісиста на ім'я Кол та колишнього канцлера Гельмута Коля.
На цьому етапі стає очевидним один з недоліків класичного Всесвітньої павутини: оскільки наразі інформацію, яку надають, можна зрозуміти людям, але не можна коректно інтерпретувати машинам – у показаному прикладі, наприклад пошуковим системам.
Структурування документів
У раніших версіях HTML просто не було можливості структурувати документи семантично. Щоб структурувати веб-сторінку, зазвичай було доступні лише заголовки та абзаци тексту. Ось типовий приклад структури класичної веб-сторінки:
<h1> Розділ </h1> <p> Параграф </p> <h2> Підрозділ </h2> <p> Параграф у підрозділі </p> <h3>
Для структурування документів HTML надає елементи h1 до h6. Однак з допомогою них не можна створити дуже глибоку структуру. Оскільки в HTML не передбачено елементів h7 або h8. Саме тут HTML5 входить в гру і вводить деякі додаткові елементи структурування.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Ці елементи представлені у цьому покроковому курсі. Проте перед цим є ще одне зауваження: не очікуйте чудесних результатів за зовнішнім виглядом цих елементів. Для того щоб сторінки, які базуються на семантичних елементах, мали привабливий вигляд, потрібно використовувати CSS. Як ми знаємо, про це ми ще поговоримо пізніше.
Деякі семантичні елементи ви вже знаєте, навіть якщо з першого погляду вони не мають нічого спільного з семантикою. Ось приклад такого елементу:
<progress min="0" max="100" value="40"></progress>
Це викликає створення робочої смуги. (До речі, цей елемент progress вже був докладно розглянутий у цьому циклі статей).
Цей елемент чудово демонструє, як легко можна створити контент, який може бути автоматично класифікований до відповідного контексту. Для програмного забезпечення зразу стає зрозуміло, що це є смуга завантаження. У випадку рішень, які базуються на JavaScript для генерації смуг завантаження, це не так.
Семантичні структури елементів
У "звичайних" HTML-документах для структурування вмісту використовують елементи div. Щоб їх можна було форматувати за допомогою CSS, їм присвоюють класи або ідентифікатори. Цей принцип використовується і в HTML5. Фактично дослідження від Google показало, що в багатьох документах завжди використовується однаковий набір класів.
Один приклад:
<div class="nav"></div>
Багато розробників, наприклад, використовують nav, щоб вмістити навігацію всередині цього елементу div. У HTLM5 це виглядає наступним чином:
<nav>Вміст</nav>
За допомогою елемента nav стає зрозуміло, що це не просто перелік гіперпосилань. Фактично цей елемент описує контентний блок, в якому містяться інформація про навігацію веб-сайту в певному контексті.
Сучасне структурування
Яка, власне, типова структура HTML-документу? Загалом вона схожа, незалежно від того, які вміст відображають сторінки. Зазвичай вона містить наступні блоки:
• Верхній блок
• Головне меню
• Вмістовий блок
• Нижній блок
Веб-сторінка, яка використовує елементи div для структурування, може виглядати наступним чином:
<body>
<div id="header">
<div id="logo">Логотип</div>
<div id="search">Пошук</div>
<div id="nav">Головне меню</div>
</div>
<div id="content">
<h1>Ось вміст</h1>
<div class="section">
<h2>Підзаголовок</h2>
<h3>Розділ</h3>
<!-- Тут знаходиться вміст -->
</div>
<div class="section">
<h2>Підзаголовок</h2>
<!-- Тут знаходиться вміст -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Підменю</div>
</div>
<div id="footer">Нижня частина</div>
</body>
Такі конструкції div, можливо, вам вже відомі. Для розробників ця структура стає логічною, вони присвоюють відповідні класи або ідентифікатори блокам div з "говорущими" назвами. Так, для розробників буде зрозуміло, що в зоні div з ідентифікатором footer зберігаються вміст, який відноситься до нижньої частини сторінки. Проблема полягає в тому, що назви можуть натякати на структуру веб-сайту, але сам сайт все ще не має семантичної структури. І саме тут починають діяти нові елементи HTML. Оскільки вони вперше дозволяють правильно структурувати документи або веб-сторінки.
Для кращого розуміння подивіться на наступний документ HTML5:
<body>
<header>
<div id="logo">Логотип</div>
<div id="search">Пошук</div>
<nav>Головне меню</nav>
</header>
<article>
<h1>Ось вміст</h1>
<section>
<h2>Підзаголовок</h2>
<h3>Розділ</h3>
<!-- Тут знаходиться вміст -->
</section>
<section>
<h2>Підзаголовок</h2>
<!-- Тут знаходиться вміст -->
</section>
</article>
<aside>
<nav>Підменю</nav>
</aside>
<footer>Нижня частина</footer>
</body>
Звичайно, я розгляну ці елементи у наступних практичних уроках. Проте вже зараз при погляді на цей приклад можна побачити переваги використовуваних елементів. Тепер можна відзначити області сторінки спеціально призначеними для них елементами. Все, що відноситься до верхньої частини сторінки, можна об'єднати в елемент header.
Крім того, тепер доступні елементи section і article, за допомогою яких сторінковий контент можна набагато краще структурувати. Як бачите, триває дійсно розглядати можливості, які пропонує HTML5 для семантичної структуризації документів.
