Begreppet "det semantiska webben" används numera nästan inflationärt. Många människor är inte medvetna om vad denna högt lovordade semantik egentligen innebär. Det är faktiskt ganska enkelt: Tack vare semantiken kan faktiskt nödvändig/generad information dras från enorma datamängder.
Ett handfast exempel ska demonstrera vikten av semantiken. Digitala foton är en fin grej. Direkt efter att de tagits kan de visas för hela världen via internet. Vad som gäller privat har även länge etablerats i professionella sammanhang. Bildbyråer, museer, bibliotek och fotografer erbjuder foton, målningar eller digitala versioner av värdefulla texter genom professionella bildbanker. På de motsvarande webbplatserna finns det sedan sökfält som gör det möjligt att söka igenom plattformen. Det mest populära exemplet på en bildsökmotor på webben 2.0 är säkerligen Flickr.
Den som redan har använt sådana bildsökmotorer känner till deras begränsningar: om man till exempel skriver in ordet Kohl visas foton från olika områden. Så visar Yahoo! Bildsökningen foton av en svartmes, en tennisspelare vid namn Kohl och den förre förbundskanslern Helmut Kohl.
Vid detta tillfälle blir en av nackdelarna med det klassiska WWW tydlig: För närvarande kan de tillhandahållna informationen förstås av människor, men inte korrekt tolkas av maskiner – i det presenterade exemplet sökmotorer.
Maskiner kan endast läsa information om det verkligen finns någon tillgänglig. Och just det är den avgörande punkten där semantiken kommer in i bilden.
Strukturering av dokument
I tidigare versioner av HTML fanns det helt enkelt ingen möjlighet att strukturera dokument semantiskt. Om man ville strukturera en webbsida hade man egentligen bara rubriker och textavsnitt till sitt förfogande. Här är ett typiskt exempel på strukturen hos en klassisk webbplats:
<h1> Kapitel </h1> <p> Stycke </p> <h2> Underkapitel </h2> <p> Stycke i underavsnittet </p> <h3>
HTML erbjuder elementen h1 till h6 för dokumentstrukturering. En verkligt djupnästlad struktur kan dock inte skapas med dessa. Eftersom ett element h7 eller h8 inte är försett i HTML. Där ansluter HTML5 och inför några extra strukturelement.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Dessa element presenteras i den här handledningen. Men först en kommentar: Förvänta er inte mirakel från dessa element ur ett visuellt perspektiv. För att webbplatser som bygger på semantiska element faktiskt ska se tilltalande ut, måste CSS användas. Och där kommer vi som känt till senare.
Några semantiska element har ni redan bekantat er med, även om dessa kanske inte omedelbart har med semantik att göra. Här är ett exempel på ett sådant element:
<progress min="0" max="100" value="40"></progress>
Detta genererar en framstegsindikator. (För övrigt har progress-elementet redan introducerats utförligt i denna serie).
Detta element visar hur enkelt det är att skapa innehåll som kan kopplas till en specifik kontext. För programvara är det direkt identifierbart att det handlar om en framstegsindikator. I lösningar som använder JavaScript för att generera en framstegsindikator är detta dock inte fallet.
Semantiska elementstrukturer
I "vanliga" HTML-dokument används div-element för att strukturera innehållet. För att kunna formatera dessa med hjälp av CSS tilldelar man dem klasser eller IDs. Denna princip används också i HTML5. Faktum är att en undersökning utförd av Google visade att samma klasser används i många dokument.
Ett exempel:
<div class="nav"></div>
Många utvecklare använder till exempel nav för att placera navigeringen inuti detta div-element. I HTLM5 ser det dock ut så här:
<nav>Innehåll</nav>
Genom elementet nav är det tydligt att det inte bara handlar om en lista med hyperlänkar. Faktum är att detta element beskriver en innehållsblock där information om webbplatsens navigering i en specifik kontext är inkluderad.
Modern strukturering
Hur ser egentligen strukturen i ett HTML-dokument typiskt sett ut? Generellt sett är den liknande oavsett vilket innehåll sidan slutligen har. Vanligtvis innehåller den följande områden:
• Sidhuvud
• Huvudmeny
• Innehållsområde
• Sidfot
En webbsida som använder div-element för att strukturera kan se ut så här:
<body>
<div id="header">
<div id="logo">Logotyp</div>
<div id="search">Sök</div>
<div id="nav">Huvudmeny</div>
</div>
<div id="content">
<h1>Det här är innehållet</h1>
<div class="section">
<h2>Underrubrik</h2>
<h3>Avsnitt</h3>
<!-- Här står innehållet -->
</div>
<div class="section">
<h2>Underrubrik</h2>
<!-- Här står innehållet -->
</div>
</div>
<div id="sidebar">
<div id="subnav">Undermeny</div>
</div>
<div id="footer">Sidfot</div>
</body>
Du kanske redan känner till sådana div-strukturer. För att strukturen ska vara logisk för utvecklarna tilldelar de klasser eller ID:n till div-områdena som har "talande" namn. Till exempel är det klart för utvecklaren att innehållet i div-området med ID:t footer tillhör sidans sidfot. Problemet är att namnen kanske antyder strukturen på webbplatsen, men webbplatsen är inte semantiskt strukturerad på detta sätt ännu. Här kommer de nya HTML-elementen in. För dessa tillåter för första gången en verklig strukturering av dokument eller webbplatser.
För att få en bättre förståelse, ta en titt på följande HTML5-dokument:
<body>
<header>
<div id="logo">Logotyp</div>
<div id="search">Sök</div>
<nav>Huvudmeny</nav>
</header>
<article>
<h1>Det här är innehållet</h1>
<section>
<h2>Underrubrik</h2>
<h3>Avsnitt</h3>
<!-- Här står innehållet -->
</section>
<section>
<h2> Underrubrik</h2>
<!-- Här står innehållet -->
</section>
</article>
<aside>
<nav>Undermeny</nav>
</aside>
<footer>Sidfot</footer>
</body>
Självklart kommer jag att gå igenom de använda elementen i de kommande handledningarna. Ändå visar en snabb titt på detta exempel var fördelarna med de använda elementen ligger. Nu kan du äntligen markera sidosektionerna med element som är specifikt avsedda för dem. Allt som hör till sidans sidhuvud kan inkluderas i ett header-element.
Dessutom finns det nu section- och article-element tillgängliga som gör det mycket lättare att strukturera sidans innehåll. Som du kan se är det väl värt att noggrant undersöka de möjligheter som HTML5 har när det gäller semantisk strukturering av dokument.
