Ο όρος "Σημασιολογικός ιστός" χρησιμοποιείται τελευταία σχεδόν φορτωτικά. Πολλοί ανθρωποι δεν έχουν καν αντιληφθεί τι πραγματικά σημαίνει αυτή η διαφημιζόμενη σημασιολογία. Βασικά, είναι πολύ απλό: Χάρη στη σημασιολογία, μπορούν πραγματικά να ανακτηθούν οι απαιτούμενες/επιθυμητές πληροφορίες από τεράστια σύνολα δεδομένων.
Ένα παραδειγματικό παράδειγμα θα δείξει τη σημασιολογική σημασία. Ολοκληρωμένες φωτογραφίες είναι υπέροχες. Αμέσως μετά τη λήψη, μπορείτε να τις παρουσιάσετε μέσω του διαδικτύου σε όλο τον κόσμο. Αυτό που ισχύει σε προσωπικό επίπεδο έχει εδώ και καιρό εδραιωθεί και στον επαγγελματικό χώρο. Οι εικονοθήκες, τα μουσεία, οι βιβλιοθήκες και οι φωτογράφοι προσφέρουν φωτογραφίες, πίνακες ή ακόμη και ψηφιακές εκδόσεις πολύτιμων κειμένων μέσω επαγγελματικών βάσεων δεδομένων. Στις αντίστοιχες ιστοσελίδες υπάρχουν μάσκες αναζήτησης που επιτρέπουν στην πλατφόρμα να αναζητηθεί. Το πιο δημοφιλές παράδειγμα μιας μηχανής αναζήτησης εικόνων στο Web 2.0 είναι σίγουρα το Flickr.
Όσοι έχουν χρησιμοποιήσει ήδη τέτοιες μηχανές αναζήτησης εικόνων γνωρίζουν τα όριά τους: Εάν εισαγάγετε, για παράδειγμα, τον όρο Λάχανο, σας εμφανίζονται φωτογραφίες από διάφορους τομείς. Έτσι, η αναζήτηση εικόνων της Yahoo! παρουσιάζει φωτογραφίες ενός λαχανοφαγάδη, ενός τενίστα με το όνομα Λάχανο και του πρώην καγκελάριου Helmut Kohl.
Σε αυτό το σημείο γίνεται εμφανής μία από τις αδυναμίες του κλασικού WWW: Προς το παρόν, οι πληροφορίες που παρέχονται μπορούν να κατανοηθούν από ανθρώπους, αλλά δεν μπορούν να ερμηνευτούν σωστά από μηχανές - όπως οι μηχανές αναζήτησης στο παράδειγμα που δίνεται.
Οι μηχανές μπορούν να αναγνωρίσουν πληροφορίες μόνο όταν πράγματι υπάρχουν τέτοιες. Και αυτό είναι το καθοριστικό σημείο όπου μπαίνει στο παιχνίδι η σημασιολογία.
Δομή εγγράφων
Στις προηγούμενες εκδόσεις HTML, δεν υπήρχε απλά τρόπος για να δομηθούν σημασιολογικά τα έγγραφα. Αν θέλατε να δομήσετε μια ιστοσελίδα, είχατε προς το παρόν μόνο διαθέσιμες επικεφαλίδες και αποστολές κειμένου. Εδώ είναι ένα τυπικό παράδειγμα δομής μιας κλασικής ιστοσελίδας:
<h1> Κεφάλαιο </h1> <p> Αποστολή </p> <h2> Υποκεφάλαιο </h2> <p> Αποστολή στο υποκεφάλαιο </p> <h3>
Το HTML παρέχει στη δομή εγγράφων τα στοιχεία h1 έως h6. Ωστόσο, δεν είναι δυνατή η δημιουργία πραγματικά βαθειάς δομής με αυτόν τον τρόπο. Αυτό γιατί ένα στοιχείο h7 ή h8 δεν προβλέπεται στο HTML. Εδώ ακριβώς επεμβαίνει το HTML5 και εισάγει κάποια επιπλέον στοιχεία δομής.
• article
• aside
• dialog
• figure
• footer
• header
• nav
• section
Αυτά τα στοιχεία παρουσιάζονται σε αυτό το εγχειρίδιο. Πριν όμως, ένα σχόλιο: Μην περιμένετε θαύματα από την οπτική άποψη αυτών των στοιχείων. Για να είναι ελκυστικές, οι ιστοσελίδες που βασίζονται σε σημασιολογικά στοιχεία, πρέπει να χρησιμοποιήσουν CSS. Και σε αυτό θα αναφερθούμε αργότερα.
Έχετε ήδη γνωρίσει μερικά σημασιολογικά στοιχεία, ακόμα κι αν αυτά, σε πρώτη ανάγνωση, δεν έχουν καμία σχέση με τη σημασιολογία. Ένα παράδειγμα ενός τέτοιου στοιχείου:
<progress min="0" max="100" value="40"></progress>
Αυτό δημιουργεί μια γραμμή προόδου. (Το στοιχείο progress έχει ήδη αναλυθεί λεπτομερώς σε αυτήν τη σειρά).
Αυτό το στοιχείο επιδεικνύει την ευκολία με την οποία μπορούν να δημιουργηθούν περιεχόμενα που μπορούν να αντιστοιχιστούν σε σχετικά πλαίσια. Για το λογισμικό, είναι προφανές ότι πρόκειται για μια γραμμή προόδου. Σε λύσεις που βασίζονται σε JavaScript για τη δημιουργία μιας γραμμής προόδου, αυτό δεν ισχύει.
Σημασιολογικές δομικές μονάδες
Σε "κανονικά" έγγραφα HTML χρησιμοποιούνται τα div-στοιχεία για τη δομή του περιεχομένου. Για να τα μορφοποιήσετε με CSS, τους ανατίθεντε κλάσεις ή IDs. Αυτή η αρχή χρησιμοποιείται και στο HTML5. Στην πραγματικότητα, μια έρευνα που διεξήχθη από την Google έδειξε ότι σε πολλά έγγραφα χρησιμοποιούνται πάντα οι ίδιες κλάσεις.
Ένα παράδειγμα:
<div class="nav"></div>
Πολλοί προγραμματιστές χρησιμοποιούν, για παράδειγμα, το nav για να φιλοξενήσουν την πλοήγηση μέσα σε αυτό το div. Στο HTLM5, όμως, φαίνεται με αυτόν τον τρόπο:
<nav>Περιεχόμενο</nav>
Με το στοιχείο nav γίνεται σαφές πως πρόκειται για έναν περιεχομένου μπλοκ, όπου περιέχονται πληροφορίες σχετικές με την πλοήγηση της ιστοσελίδας σε ένα συγκεκριμένο πλαίσιο.
<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 κατάλληλα classes ή IDs που έχουν "μιλητικά" ονόματα. Έτσι, για παράδειγμα, είναι ήδη σαφές για τους προγραμματιστές ότι στην περιοχή div με το ID 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 όσον αφορά τη σημαντική δομήση των εγγράφων.
