Αποφάσισα να γράψω αυτό το post για να διαφημίσω λίγο τα πιο “παρεξηγημένα”, κατά την γνώμη μου πάντα, XHTML tags. Δεν είναι λίγες οι φορές που θέλουμε να περιγράψουμε σημασιολογικά (semantically) κάποιο κομμάτι του περιεχομένου μας, αλλά δυστυχώς δεν γνωρίζουμε τον σωστό τρόπο. Πολλοί μάλιστα δεν έχουν τον χρόνο ή την διάθεση να ψάξουν, με αποτέλεσμα να μην χρησιμοποιούνται τα σωστότερα tags για την κάθε δουλειά. Με αυτό το post λοιπόν, θα προσπαθήσω να παρουσιάσω κάποια πολύ βολικά XHTML elements τα οποία δεν χρησιμοποιούνται όσο θα έπρεπε στο ελληνικό web. Έχουμε και λέμε λοιπόν:
Definition Lists
Οι συγκεκριμένες λίστες αποτελούνται από ένα ζευγάρι, όρου και περιγραφής. Με αυτόν το απλό τρόπο, μπορούμε να περιγράψουμε ένα κομμάτι περιεχομένου που περιέχει όρους και τις περιγραφές τους. Παρακάτω ακολουθεί και ένα πολύ απλό παράδειγμα.
<dl>
<dt>Tsevdos.com</dt>
<dd>Blog για το web design και development</dd>
</dl>
Fieldset και legend
Το Fieldset καθώς και το legend, είναι δύο από τα πιο σημαντικά tags που σπανίως συναντάω σε ελληνικά sites. Μία φόρμα μπορεί να χωριστεί, ανάλογα με τα δεδομένα που συλλέγει, σε διάφορα fieldsets, ενώ το κάθε fieldset μπορεί να έχει και ένα περιγραφικό legend. Έτσι πχ. μπορούμε να έχουμε ένα fieldset για προσωπικά δεδομένα, ένα για θέματα επικοινωνίας, κοκ.
<form>
<fieldset>
<legend>Personal Info:</legend>
<label for="name">Name: <input type="text" id="name" /></label>
<label for="surname">Surname: <input type="text" id="surname" /></label>
</fieldset>
<fieldset>
<legend>Address:</legend>
<label for="street">Sreet : <input type="text" id="street" /></label>
<label for="city">City: <input type="text" id="city" /></label>
<label for="zip">Zip Code: <input type="text" size="30" /></label>
</fieldset>
</form>
Caption και Summary
Το caption element μας δίνει την δυνατότητα να περιγράψουμε τι περιέχει ο πίνακας (table) μας. Το summary attribute πάει ακόμα ένα βήμα παραπέρα, και μας επιτρέπει να περιγράψουμε ακόμα πιο αναλυτικά τον πίνακα, για τους χρήστες που χρησιμοποιούν screen readers και text-only browsers.
<table
summary="Ο παρακάτω πίνακας δίνει το character entity κωδικό
για όλα τα σύμβολα της HTML4."
>
<caption>
Σύμβολα της HTML4
</caption>
...
</table>
Βlockquote, abbr, cite και acronym
Ακόμα 4 πολύ χρήσιμα tags… Εάν το κείμενο σας περιέχει κάποιο quote, abbreviation, αναφορά (cite) σε κάποιο άλλο site/έγγραφο, ή είναι ακρώνυμο, απλά χρησιμοποιήστε τα ανάλογα tags! Με αυτόν τον τρόπο και κάνετε πιο semantic το κείμενο σας, ενώ ταυτόχρονα έχετε και πολύ περισσότερα elements για να δημιουργήσετε ενδιαφέροντα εφε στα styles και την Javascript σας (και να κάνετε το site σας ομορφότερο φυσικά). Το ξέρω πως κάθε αρχή είναι και δύσκολη, αλλά με λίγη υπομονή θα σας γίνει συνήθεια…
<blockquote cite="http://www.tsevdos.com/2009/04/28/mobifyme/">
<p>
Η υπηρεσία ονομάζεται Mobify και σου επιτρέπει να δημιουργήσεις σχετικά εύκολα μια custom mobile
έκδοση του site σου.
</p>
</blockquote>
<abbr title="Limited">Ltd.</abbr>
<cite cite="http://www.tsevdos.com/2009/05/22/maka-site/"
>Το πιο τραγικό site που έχει φτιαχτεί!</cite
>
<acronym title="Web Content Accessibility Guidelines">WCAG</acronym>