Tα Semantics στο Web

Αυτό το κείμενο είναι μια εισαγωγή στα semantics και γιατί μας είναι χρήσιμα στην κατασκευή ενός website.

Ορισμός

Τα semantics σημαίνουν νόημα ή αυτά που σχετίζονται με το νόημα. Το να λαμβάνει κάποιος τα semantics υπόψη του στο web design σημαίνει ότι κάνει ένα τρόπο προς την αξιοπιστία. Με άλλα λόγια τα semantics λένε: δείξε αυτό που εννοείς.

Παραδείγματα

Αν κάποιος αποφάσιζε να γράψει ένα βιβλίο, θα χρησιμοποιούσε μια γραμματοσειρά με μεγάλα γράμματα για τον τίτλο, μικρότερα γράμματα για το όνομα του κάθε κεφαλαίου κι ακόμα μικρότερα για τον τίτλο κάθε υποενότητας.

Αν τώρα μεταφέρει το ίδιο βιβλίο στο Web θα ξεκινούσε τον κώδικα για τον τίτλο του βιβλίου με το tag <h1>, θα συνέχιζε με το tag <h2> για τον τίτλο του κάθε κεφαλαίου και θα κατέληγε με το tag <h3> για τον τίτλο της κάθε υποενότητας.

Ας υποθέσουμε ότι κάποιος ξεκινάει με αυτόν τον τρόπο και στην πορεία αντιλαμβάνεται ότι το tag <h1> είναι πολύ μεγάλο. Έτσι αντί να ακολουθήσει τη σειρά <h1>, <h2>, <h3>, ακολουθεί τη <h2>, <h3>, <h4>. Με τον τρόπο αυτό ο τίτλος του βιβλίου δείχνει καλύτερος, ενώ εξίσου καλά δείχνουν και οι άλλοι τίτλοι. Το πρόβλημα λύθηκε - σωστά; Λάθος!

Για να είναι semantically δηλαδή νοηματικά σωστός ο web designer πρέπει να ακολουθήσει την πρώτη σειρά των tags:  <h1>, <h2>, <h3>, για το λόγο ότι το <h1> αντιπροσωπεύει το βασικό του τίτλο, που είναι αυτός του βιβλίου.

Ας δούμε ένα άλλο παράδειγμα. Ας υποθέσουμε ότι κάποιος θέλει να δείξει τα περιεχόμενα μιας λίστας. Γράφει λοιπόν:

<p>List Item 1<br />
List Item 2<br />
List Item 3<br />
List Item 4</p>

Παρότι αυτός ο κώδικας μπορεί να βγάλει το ίδιο αποτέλεσμα με τον:

<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>

ο σωστός τρόπος είναι ο δεύτερος για τον απλό λόγο ότι αυτός δηλώνει ότι αυτό που έχει γραφεί ανάμεσα στα διάφορα tags είναι όντως μια λίστα κι όχι μια σειρά από αντικείμενα που το ένα γράφεται κάτω από το άλλο.

Γιατί τα semantics είναι σημαντικά

Τα semantics αξίζουν την προσοχή μας όχι γιατί βοηθούν το ανθρώπινο μάτι να διαβάσει πιο εύκολα το περιεχόμενο μιας σελίδας (παρότι κι αυτό το κάνουν πολύ καλά!), αλλά γιατί βοηθούν τους browsers, τις μηχανές αναζήτησης και τις συσκευές ανάγνωσης για άτομα με αναπηρία στην όραση να καταλάβουν τα περιεχόμενα μιας σελίδας.

Μέρος των Web Standards ασχολείται με τα semantics για το λόγο αυτό ακριβώς. Αν θέλουμε να κάνουμε το Web ένα φιλικότερο μέσο για όλους τους ανθρώπους, δεν μπορούμε να αγνοούμε τα semantics. Φυσικά δεν είναι όλοι οι δικτυακοί τόποι γραμμένοι με κώδικα semantically (νοηματικά) σωστό, αυτού συμπεριλαμβανομένου. Αυτό όμως δε σημαίνει ότι δεν πρέπει να λαμβάνεται η παράμετρος αυτή υπόψη από τις αρχές κιόλας του σχεδιασμού.
Οι μηχανές αναζήτησης λαμβάνουν επίσης υπόψη τους τα semantics και οι τόποι που είναι γραμμένοι σωστά ανεβαίνουν στην κατάταξη. Ποιος μπορεί να αγνοεί αυτόν τον παράγοντα;

Τελικά τι γίνεται με τον τίτλο του βιβλίου που στο πρώτο παράδειγμα δεν εμφανιζόταν όπως ήθελε ο designer; Μα για το λόγο αυτό υπάρχουν τα CSS. Ένα σωστά γραμμένο CSS αρχείο πρακτικά μπορεί να κάνει ό,τι θέλει στα θέματα τυπογραφίας και να διαμορφώσει οποιοδήποτε heading με τον τρόπο που ο designer επιθυμεί. Αν λοιπόν ακολουθηθεί ένα σωστό markup, το CSS αναλαμβάνει τα υπόλοιπα.

Περισσότερα

Όποιος ενδιαφέρεται να μάθει περισσότερα για τα semantics μπορεί να ρίξει μια ματιά στο άρθρο The Meaning of Semantics που έχει γραφεί από την γκουρού του Web Molly Holzschlag όπως και στο άρθρο Semantics, HTML, XHTML, and Structure.