HTML i CSS dla początkujących (Część 18): Semantyka dla sieci (1)

Pojęcie "sieci semantycznej" jest obecnie stosowane wręcz nadmiernie. Wielu osobom nie jest nawet świadomo, o co chodzi z tą chwaloną semantyką. W rzeczywistości jest to bardzo proste: Dzięki semantyce można faktycznie wydobyć potrzebne/pożądane informacje z ogromnych ilości danych.

Przykładem naocznie pokazującym ważność semantyki jest następujący. Cyfrowe zdjęcia to świetna sprawa. Od razu po zrobieniu zdjęcia można je prezentować przez Internet całemu światu. To, co działa w sferze prywatnej, dawno już zagościło również w sferze profesjonalnej. Agencje fotograficzne, muzea, biblioteki i fotografowie oferują zdjęcia, obrazy czy też cyfrowe wersje cennych tekstów poprzez profesjonalne bazy danych obrazów. Na odpowiednich stronach internetowych są filtry wyszukiwania, za pomocą których można przeszukiwać platformę. Najbardziej popularnym przykładem wyszukiwarki obrazów w sieci 2.0 jest z pewnością serwis Flickr.



Osoba, która już korzystała z tego rodzaju wyszukiwarek obrazów, zna ich ograniczenia: Gdy wpisze na przykład wyrażenie Kohl, zobaczy zdjęcia z różnych dziedzin. Tak, wyszukiwarka obrazów Yahoo! prezentuje zdjęcia kosa, tenisisty o nazwisku Kohl i byłego kanclerza Helmuta Kohla.

W tym momencie ujawnia się jeden z wad klasycznego WWW: Obecnie udostępniane informacje mogą być zrozumiane przez ludzi, ale nie mogą być poprawnie interpretowane przez maszyny – w tym pokazanym przykładzie wyszukiwarki.

Maszyny mogą odczytać informacje tylko wtedy, gdy są faktycznie dostępne. I w tym tkwi istotny punkt, w którym wkracza semantyka.

Struktura dokumentów

W poprzednich wersjach HTML nie istniała możliwość strukturyzacji dokumentów w sposób semantyczny. Aby uporządkować stronę internetową, miało się do dyspozycji właściwie tylko nagłówki i akapity tekstu. Oto przykładowa struktura klasycznej strony internetowej:

<h1>
   Rozdział
</h1>
<p>
   Akapit
</p>
<h2>
   Podrozdział
</h2>
<p>
   Akapit w podrozdziale
</h2>
<h3>

HTML udostępnia elementy takie jak h1 do h6 do strukturyzacji dokumentów. Jednak z ich pomocą nie da się stworzyć zbyt zagnieżdżonej struktury. Ponieważ elementy h7 lub h8 nie są przewidziane w HTML. Właśnie tutaj wchodzi HTML5, wprowadzając kilka dodatkowych elementów strukturyzacji.

• article

• aside

• dialog

• figure

• footer

• header

• nav

• section

Te elementy zostaną przedstawione w tym samouczku. Ale najpierw ważna informacja: Nie spodziewajcie się cudów pod względem wizualnym ze strony tych elementów. Aby strony internetowe oparte na elementach semantycznych prezentowały się atrakcyjnie, konieczne jest użycie CSS. O tym jednak mówimy później.

Pewne elementy semantyczne już poznaliście, nawet jeśli na pierwszy rzut oka nie mają one nic wspólnego z semantyką. Oto przykład takiego elementu:

<progress min="0" max="100" value="40"></progress>

Generuje to pasek postępu. (Element progress został zresztą szczegółowo omówiony w tej serii).

Ten element jasno pokazuje, jak niewielkim nakładem pracy można tworzyć treści, które mogą być przypisane do konkretnej treści. Dla oprogramowania jest bowiem od razu oczywiste, że jest to pasek postępu. W przypadku rozwiązań opartych na JavaScript do generowania paska postępu tak nie jest.

Struktury elementów semantycznych

W "zwykłych" dokumentach HTML do strukturyzacji treści często korzysta się z elementów div. Aby móc je sformatować za pomocą CSS, nadaje się im klasy lub identyfikatory. To samo stosuje się w HTML5. Faktem jest, że ankieta przeprowadzona przez Google wykazała, że w wielu dokumentach zawsze używane są te same klasy.

Przykład:

<div class="nav"></div>

Wiele deweloperów na przykład używa nav, aby umieścić nawigację wewnątrz tego elementu div. W HTML5 wygląda to jednak tak:

<nav>Zawartość</nav>

Dzięki elementowi nav jest jasne, że nie chodzi o zwykłą listę hiperłączy. Faktycznie ten element opisuje treściowy blok, w którym informacje o nawigacji strony internetowej są zawarte w określonym kontekście.

Nowoczesna strukturyzacja

Jaka jest zazwyczaj struktura dokumentu HTML? Zasadniczo jest ona podobna, niezależnie od tego, jakie treści znajdują się na stronie. Zazwyczaj obejmuje następujące obszary:

• Nagłówek

• Główne menu

• Obszar treści

• Stopka

Strona internetowa korzystająca z elementów div do strukturyzacji mogłaby wyglądać tak:

<body>
   <div id="header">
     <div id="logo">Logo</div>
     <div id="search">Szukaj</div>
     <div id="nav">Menu główne</div>
   </div>
   <div id="content">
     <h1>To tutaj jest treść</h1>
     <div class="section">
       <h2>Podtytuł</h2>
       <h3>Sekcja</h3>
       <!-- Tutaj znajduje się treść -->
     </div>
     <div class="section">
       <h2>Podtytuł</h2>
       <!-- Tutaj znajduje się treść -->
     </div>
   </div>
   <div id="sidebar">
     <div id="subnav">Menu podrzędne</div>
   </div>
   <div id="footer">Stopka</div>
 </body>

Takie konstrukcje div mogą wam być już znane. Aby struktura była logiczna dla programistów, nadają one odpowiednie klasy lub identyfikatory obszarom div, które posiadają "mówiące" nazwy. Dla programistów jest oczywiste, na przykład, że w obszarze div o identyfikatorze footer znajdują się treści należące do stopki strony. Problem polega na tym, że nazwy mogą sugerować strukturę strony internetowej, ale sama struktura strony nie jest jeszcze semantycznie zorganizowana. Nowe elementy HTML właśnie tutaj wprowadzają zmiany. Ponieważ po raz pierwszy umożliwiają one prawdziwe struktury dokumentów lub stron internetowych.

Rzućmy dla lepszego zrozumienia okiem na następujący dokument HTML5:

<body>
   <header>
     <div id="logo">Logo</div>
     <div id="search">Szukaj</div>
     <nav>Menu główne</nav>
   </header>
   <article>
     <h1>To jest treść</h1>
     <section>
       <h2>Podtytuł</h2>
       <h3>Sekcja</h3>
       <!-- Tutaj znajduje się treść -->
     </section>
     <section>
       <h2>Podtytuł</h2>
       <!-- Tutaj znajduje się treść -->
     </section>
   </article>
   <aside>
     <nav>Menu podrzędne</nav>
   </aside>
   <footer>Stopka</footer>
 </body>

Oczywiście będę omawiał elementy użyte tutaj w kolejnych samouczkach. Niemniej jednak już teraz przyjrzyjmy się temu przykładowi, gdzie leżą zalety stosowanych elementów. Teraz wreszcie można oznaczyć obszary strony tymi specjalnymi elementami, które są przeznaczone specjalnie dla nich. Wszystko, co należy do nagłówka strony, może być zawarte w elemencie header.

Ponadto od teraz dostępne są elementy section i article, dzięki którym można znacznie lepiej zorganizować właściwe treści strony. Jak widać, warto więc dokładnie przyjrzeć się możliwościom, jakie oferuje HTML5 w zakresie semantycznej struktury dokumentów.