Wikipediots Ελληνικό Blog για τη τεχνολογία και το διαδίκτυο...

Στο πρώτο μέρος του HTML 5 tutorial μας, εξετάσαμε μερικές από τις νέες ετικέτες σήμανσης της γλώσσας που έχουν σχεδιαστεί για να μειώσουν το χάος με τα divs της HTML 4 και να προσθέσουν σημειολογική σημασία στην εμφάνιση της σελίδας.

Αλλά δεν είναι κάθε ετικέτα στη νέα HTML αυστηρά δομική (structural). Υπάρχουν και άλλες ετικέτες που προσθέτουν επίσης πολύτιμη σημειολογική σημασία στις σελίδες μας σε μη δομικούς τρόπους. Σήμερα, στο δεύτερο μέρος, θα ρίξουμε μια ματιά στο πώς μπορούν να χρησιμοποιούν αυτές οι ετικέτες και τι μπορούν να κάνουν για το περιεχόμενό μας.

Η ετικέτα time
Υπάρχουν περιπτώσεις στις οποίες παλιές ιστορίες ειδήσεων ή άρθρον από blog έχουν ανακυκλωθεί ή αναδημοσίευση σαν να επρόκειτο για νέα άρθρα. Μερικές φορές αυτό συμβαίνει από ανθρώπινο λάθος, ή μερικές φορές είναι λάθος του search crawler ειδήσεων. Σε ορισμένες περιπτώσεις, η ζημία ήταν χειρότερη από ό, τι ακριβώς καθιστώντας τους δράστες ματιά κακό - απέστειλε στην πραγματικότητα λίγα αποθέματα σε tailspin.

Αν και η HTML5 δεν μπορεί να κάνει κάτι για να βοηθήσει το ανθρώπινο λάθος, το ετικέτα time σίγουρα σώζει τις μηχανές αναζήτησης.

Η πιο κοινή χρήση της ετικέτας είναι κάπως έτσι:


Published <time>21/10/2009</time>


Ωστόσο, η ετικέτα time έχει επίσης ένα χαρακτηριστικό που ονομάζεται datetime και τη καθιστά ακόμη πιο χρήσιμη διότι μας επιτρέπει να εμφανίσουμε μια ωραία μορφή της ημερομηνίας για τους αναγνώστες μας μέσα στην ετικέτα. Ακόμη πιο σημαντικό, θα παρέχει στις μηχανές αναζήτησης κάτι πιο χρήσιμο. Ας τροποποιήσουμε λοιπόν τον παραπάνω κώδικα ελαφρός:


Published <time datetime="2009-21-10T12:10:28-05:00">

Wednesday, October 10, 2009 at 12:10PM EST</time>


Τώρα, ίσως να σκέφτεστε "τι τρομερά δυσανάγνωστο συντακτικό Θεέ μου" (γνωστό και ως πρότυπο ISO 8601 date format).

Πρέπει να σημειωθεί οτι σύμφωνα με τo HTML 5 spec, αν παραλείψετε το datetime, τότε η ετικέτα πρέπει να περιλαμβάνει μια έγκυρη συμβολοσειρά ημερομηνίας (δηλαδή θα πρέπει να είναι στη μορφή: έτος, μήνας, ημέρα). Ακόμα, όταν χρησιμοποιείτε το datetime χαρακτηριστικό, η ετικέτα μπορεί να είναι κενή.

Η ετικέτα figure

Η ετικέτα figure σχεδιάστηκε για να καταστήσει τις ενσωματωμένες εικόνες πιο περιγραφικές και πιο εύκολα αναγνωρίσιμες Όμως, δεν περιορίζεται μόνο στις εικόνες, μπορεί επίσης να χρησιμοποιηθεί για τα διαγράμματα, τα τμήματα κώδικα και άλλα οπτικά στοιχεία.

Η πιο συνηθισμένη περίπτωση χρήσης είναι μια εικόνα στο σώμα ενός άρθρου. Για να χρησιμοποιήσετε το figure , περικλείετε μια ετικέτα εικόνας (img) και προσθέτετε ένα legend tag όπως εδώ:


<figure>

<img src="/images/tpsreport.jpg"

      alt="TPS Report, July 2009">

<legend>July 2009 TCP Reports</legend>

</figure>


Η ετικέτα dialog

Η ετικέτα dialog της HTML 5 χρησιμοποιείτε για τη σήμανση συνομιλιών - chat, συνέντευξη, διάλογος από ένα σενάριο, και ούτω καθεξής.

Για παράδειγμα, εδώ το περίφημο Abbot and Costello σε HTML 5:


<dialog>

<dt> Costello </dt>

<dd> Look, you gotta first baseman? </dd>

<dt> Abbott </dt>

<dd> Certainly. </dd>

<dt> Costello </dt>

<dd> Who's playing first? </dd>

<dt> Abbott </dt>

<dd> That's right. </dd>

</dialog>



Θα μπορούσατε επίσης να χρησιμοποιήσετε το dialog σαν τμήμα σχολίων σε ένα blog, δεδομένου ότι τα σχόλια είναι, σε γενικές γραμμές, μια συνομιλία μεταξύ ενός συγγραφέα και ενός κοινού. Κάτι σαν αυτό:


<dialog>

<dt id="comment_1">Commenter Name</dt>

<dd> Γειά σας, μου αρέσει πάρα πολύ το wikipediots ;) </dd>

</dialog>