Τί είναι το Semantic Markup;
Όσοι από εσάς ασχολείστε με το CSS / XHTML Authoring, θα έχετε ακούσει την έννοια Semantic Markup. Τι είναι όμως το Semantic Markup και γιατί προτείνουμε να το υιοθετήσετε σαν τακτική ανάπτυξης ιστοσελίδων;
Είναι βασικό να γίνει κατανοητή η σημασία του διαχωρισμού των στοιχείων της παρουσίασης μιας σελίδας (CSS) από αυτών που υποδηλώνουν τις έννοιες των στοιχείων που χρησιμοποιείτε στον κώδικά σας (XHTML). Με την κατανόηση του διαχωρισμού αυτού, γίνεται πιο εύκολη και η κατανόηση της έννοιας του Semantic Markup.
Επειδή αυτό μπορεί να ακούγεται λίγο πολύπλοκο και ίσως να μπερδεύει, ένας εύκολος κανόνας που θα σας βοηθήσει να καταλάβετε το Semantic Markup είναι ο ακόλουθος:
Το Semantic Markup είναι ο κώδικας XHTML που έχει γραφτεί για να ορίζει το είδος του περιεχομένου μιας ιστοσελίδας, δίνοντας έτσι τη δυνατότητα στους ηλεκτρονικούς υπολογιστές καθώς και σε όλες τις άλλες συσκευές που έχουν την δυνατότητα να διαβάζουν XHTML σελίδες (κινητά, palm, κλπ), να αναγνωρίζουν τα στοιχεία του κώδικα, να καταλαβαίνουν τι είναι και να τα παρουσιάζουν στον τελικό χρήστη ακριβώς όπως προορίζονται από εσάς.
Με λίγα λόγια, αν π.χ. θέλετε να ετοιμάσετε έναν τίτλο για την σελίδα σας, ο οποίος να διαχωρίζεται από το υπόλοιπο κείμενο με έναν εμφανέστατο τρόπο, δεν είναι Semantic να χρησιμοποιήσετε κάποιο tag μορφοποίησης όπως είναι το <b> ή το <i> και να μεγαλώσετε και την γραμματοσειρά. Semantic είναι να χρησιμοποιήσετε κάποιο από τα διαθέσιμα <H(x)> Tags, τα οποία υπάρχουν για να ορίζουν τίτλους. Θα μπορούσατε να πείτε ότι το Semantic μπορεί να “μεταφραστεί” και ώς “λογικό”, χωρίς να είναι η κυριολεκτική μετάφραση της λέξης αυτή. “Παίζοντας” με αυτό το concept μπορείτε πιο εύκολα να καταλάβετε πότε κάτι είναι Semantic και πότε όχι.
Η πραγματική δύναμη πίσω από το Semantic Markup είναι πως πλέον:
Ο άνθρωπος και τα υπολογιστικά συστήματα, όποια και να είναι αυτά, μπορούν και καταλαβαίνουν την ίδια πληροφορία και τον ορισμό της.
Τι μπορείτε να προσέχετε ώστε να γράφετε σωστό Semantic Markup;
- Διευρύνετε τις γνώσεις σας πάνω στα διαθέσιμα tags που χρησιμοποιεί η XHTML για την κατασκευή ιστοσελίδων. Ένας εύκολος τρόπος για να θυμάστε τις δυνατότητες που υπάρχουν, είναι αγοράζοντας κάποιο XHTML reference book, ή χρησιμοποιώντας κάποιο XHTML cheat sheet. Το Web Design Blog έχει παρουσιάσει στο παρελθόν άρθρα με cheat sheets τα οποία μπορείτε να βρείτε και να κατεβάσετε εδώ.
- Να θυμάστε πως η εμφάνιση της σελίδας σας δεν ορίζεται από την XHTML σας, αλλά από τα CSS σας. Με αυτό σαν γνώμονα, όταν δημιουργείτε στοιχεία στη σελίδα σας χρησιμοποιήστε τα TAGS, τα οποία είναι προορισμένα για τη δημιουργία των στοιχείων αυτών. Για παράδειγμα, αν θέλετε να παρουσιάσετε δεδομένα σε μορφή πίνακα, τότε χρησιμοποιήστε <TABLE> για να παρουσιάσετε τα δεδομένα. Ή πάλι αν θέλετε να κάνετε ένα κείμενο έντονο, κάντε το χρησιμοποιώντας το TAG strong, το οποίο σημαίνει (με βάση την λογική=Semantic) δυνατό/έντονο. Αν χρησιμοποιήσετε το Tag <b>, τότε δεν λέτε τίποτα στον υπολογιστή και δεν επικοινωνείτε.
- Να γράφετε κώδικα έχοντας στο μυαλό σας πως απευθύνεστε και σε μηχανήματα, όχι μόνο σε ανθρώπους. Όσο πιο Semantic = “λογικά” είναι παρουσιασμένα τα στοιχεία που χρησιμοποιείτε, τόσο πιο σωστά είναι γραμμένος ο κώδικάς σας.
Χρησιμοποιώντας Semantic Markup, εκτός του ότι ο κώδικάς σας πετυχαίνει το διαχωρισμό των στοιχείων της παρουσίασης μιας σελίδας (CSS) από αυτών που υποδηλώνουν τις έννοιες των στοιχείων που χρησιμοποιείτε στον κώδικά σας (XHTML), αποκτάει και μια “καθαρότητα” η οποία βοηθάει πάρα πολύ τις μηχανές αναζήτησης στην δουλειά τους. Βοηθώντας τις μηχανές αναζήτησης να σας κάνουν index τις σελίδες σας, πετυχαίνετε σημαντικές βελτιώσεις στο SEO της ιστοσελίδας σας.
ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο Τί είναι το Semantic Markup; γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.
