20Νοέ

Τί είναι το Semantic Markup;

, 20 Νοεμβρίου 2008 | WEB DESIGN - AUTHORING | 1 Σχόλιο

Όσοι από εσάς ασχολείστε με το 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 μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

One comment so far

  • Μαρια Says: Μάρτιος 5, 2010 at 2:04 πμ

    παρα πολύ κατανοητό άρθρο, με βοηθήσατε πάρα πολύ.

    Απάντηση

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter