Терминът "семантична мрежа" вече се използва толкова инфлационно. Много хора обаче дори не си дават сметка какво означава тази много похвалена семантика. Всъщност е много просто: Благодарение на семантиката наистина можем да извлечем нужната/желаната информация от огромни обеми данни.
Един конкретен пример би следвало да демонстрира важността на семантиката. Цифровите снимки са чудесна работа. Веднага след като са направени, могат да бъдат представени чрез интернет на целия свят. Каквото важи в личен план, отдавна се е утвърдило и в професионалната среда. Билетните агенции, музеите, библиотеките и фотографите предлагат снимки, картини или дори цифрови версии на ценни писма чрез професионални бази данни на изображения. На съответните уебсайтове има тогава полета за търсене, чрез които платформата може да бъде претърсвана. Най-популярният пример за търсачка на изображения в уеб 2.0 безспорно е Flickr.
Тези, които вече са използвали такива търсачки на изображения, познават границите им: Например, когато въведете термина капуста, получавате показвани снимки от най-различни области. Така например търсачката на Yahoo! показва снимки на капустарка, тенисист с името Кохл и бившия канцлер Хелмут Кохл.
На този етап се изявява един от недостатъците на класическата WWW: В момента предоставената информация може да бъде разбрана от хората, но не може да бъде правилно интерпретирана от машините - в показания пример, от търсачки.
Машините могат да прочетат информация само ако тя действително съществува. И точно тук влиза в игра семантиката.
Структуриране на документите
В по-ранните версии на HTML просто нямаше възможност за семантично структуриране на документите. Ако искахте да структурирате уебсайт, на разположение ви бяха също само заглавия и параграфи. Ето едно типично пример за структура на класически уебсайт:
<h1> Глава </h1> <p> Параграф </p> <h2> Подглава </h2> <p> Параграф в подглавата </h2> <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-елемент. В HTML5 обаче това изглежда така:
<nav>Content</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 предлага по отношение на семантичната структурираност на документите.
