Σημειώσεις στο νέο βιβλίο Σχεδίασης Ιστοτόπων.

Όποιως μελετήσει τα specs (πρότυπα) της html5 θα διαπιστώσει ότι ενώ κάποτε το να γράψεις μια html στατική σελίδα φάνταζε παιχνιδάκι πλεον δεν είναι τόσο απλό. Πάρτε για παράδειγμα τον πίνακα που έχει το παλιό (αλλά ακόμα ενεργό βιβλίο) Προγραμματιστικά Εργαλεία για το Διαδίκτυο.

Στο κεφάλαιο για την HTML έχει το παρακάτω πινακάκι στην ενότητα 4.3 Παρουσίαση και μορφοποίηση κειμένου:

Ετικέτα  Λειτουργία
<B>…</B> Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με έντονη γραφή (bold)
<I>…</I>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με πλάγια γραφή (italic)
<U>…</U>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο  υπογραμμισμένο (underline)
<Hi>…</Hi>  Ετικέτα επικεφαλίδων.
Η ετικέτα αυτή χρησιμοποιείται για να καθορίσει
το μέγεθος γραμματοσειράς του κειμένου που περιλαμβάνει.Το i είναι μια παράμετρος η οποία παίρνει τιμές από το 1 εως το 6.Η ετικέτα <Η1>..</Η1> για το μεγαλύτερο μέγεθους χαρακτήρων και η ετικέτα <Η6>..</Η6> για το μικρότερο. Οι υπόλοιπες ετικέτες δίνουν αντίστοιχα ενδιάμεσα μεγέθη χαρακτήρων. Οι ετικέτες <Ηi>..</Hi> αφήνουν μια κενή γραμμή πριν και μετά το κείμενο που επηρεάζουν.
<SMALL>… <SMALL>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με μικρού μεγέθους χαρακτήρες
<BIG>../</BIG> Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με μεγάλου μεγέθους χαρακτήρες
<STRONG>…</STRONG>  Έχει παρόμοια λειτουργία με την ετικέτα
<B>…</B> και εμφανίζει το περιλαμβανόμενο κείμενο έντονα γραμμένο
<SUB>… </SUB>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με μικρού μεγέθους χαρακτήρες και κάτω από την κανονική γραμμή του κειμένου.
<SUP>…</SUP> Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με μικρού μεγέθους χαρακτήρες και πάνω από την κανονική γραμμή του κειμένου.
<TT>…</TT>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο με γραμματοσειρές γραφομηχανής
<PRE>..</PRE>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο ακριβώς όπως είναι γραμμένο στον συντάκτη HTML .Η ετικέτα αυτή αφήνει αυτόματα, προ και μετά του κειμένου που περιλαμβάνει, μια κενή γραμμή , ενώ χρησιμοποιεί πάντα για την έμφάνιση του αποτελέσματος γραμματοσειρά Courier.
<HR>  Τοποθετεί μια οριζόντια γραμμή, αλλάζοντας αυτόματα γραμμή.
<CENTER>…</CENTER>  Εμφανίζει το περιλαμβανόμενο στην
ετικέτα κείμενο κεντραρισμένο στην οθόνη του φυλλομετρητή

Καταρχάς από τον παραπάνω πίνακας τα στοιχεία big , center  , tt  (και το font που χρησιμοποιείται στην 4.4 του ίδιου βιβλίου) , όπως και οι ιδιότητες bgcolor, align που επίσης χρησιμοποιούνται στο βιβλίο θεωρούνται απαρχαιωμένα (obselete) από την HTML5  .  Ο λόγος :

The following elements are not in HTML because their effect is purely presentational and their function is better handled by CSS:

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

Αντίθετα οι προδιαγραφές της HTML5 θέλουν μόνο τα φύλλα στυλ (css) να ασχολούνται με την μορφοποίηση και την εμφάνιση του περιεχομένου ενός στοιχείου. Πχ ένα παράδειγμα που ίσως φανεί ακραίο σε όσους μεγάλωσαν με τον παλιό τρόπο σκέψης.

Παρακάτω είναι ένα απόσπασπασμα από την επίσημη προδιαγραφή της HTML5 από το W3C για το στοιχείο Β (και όχι βέβαια την ετικέτα b όπως λέει το παλιό βιβλίο)

The b element represents a span of text offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text; for example, keywords in a document abstract, or product names in a review.

Changes in HTML5

Although previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and for which the conventional typographic presentation is bold text”.

Για όσους δεν έχουν φρέσκια την αγγλική :

Το b στοιχέιο αναπαριστά ένα τμήμα κειμένου το οποίο παρεκλίνει από
τα πλαίσιο των συμφραζομένων χωρίς να μεταφέρει όμως παραπάνω έμφαση ή σημασία , και για το οποίο ο συνήθης και συμβατικός τυπογραφικός τρόπος αναπαράστασης είναι το έντονο κείμενο (το γνωστό μας bold). Για παράδειγμα κεντρικές έννοιες σε ένα κείμενο, το ονόματα των προιόντων σε μια σελίδα κριτικής προιόντος κτλ.

Παρόλο λοιπόν που προηγούμενες εκδόσεις της HTML όριζαν το στοιχείο b μόνο με όρους παρουσίασης , το στοιχείο τώρα έχει τη δική του σημασία

Αν αυτά σας φαίνονται εννοιολογικές ακροβασίες δεν είστε ο μόνος .Υπάρχουν αρκετές συζητήσεις όπου μέλη της κοινότητας το παγκόσμιου ιστού εκφράζουν έντονες επιφυλάξεις για το νεο ορισμό του b αλλά και των παρεμφερή στοιχείων που είχαν ´παρουσιαστικό’ ρόλο παλιότερο.Στοιχεία όπως το i , το υ, το small, το hr έχουν παρόμοια ξαναβαπτιστεί και τους έχει αποδοθεί σημασία και έχει υποβαθμιστεί η σύνδεση τους με συγκεκριμένο τρόπο παρουσίασης. Σου λέει το τζιμάνι του W3C : Αυτό που εσεί τονίζει με italics o ιάπωνας θα του ταίριεζε για κάποια σημασία να βάλει άλλο σημάδι. Οπότε μην το δένεις κόμπο ότι ντε και καλά το i πρέπει να εμφανίζεται με πλάγια γραφή!
Και βέβαια πρέπει να έχουμε υπόψη ότι στην ανάπτυξη της HTML5 λαμβάνουν υπόψη και την πρόσβασιμότητα από άτομα με ειδικές ανάγκες που σημαίνει ότι πχ ένας screen reader που θα διαβάσει την ιστοσελίδα σας σε έναν συνάνθρωπο  με μειωμένη όραση δεν έχει νόημα η έντονη συσχέτιση πχ που κάνουμε πχ του στοιχείου i με italics.

Η ίδια λογική ακολουθείται και στον οδηγό της HTML στα βικιβιβλία.

Οπότε αν και οι τρέχων ορισμοί είναι λίγο παράξενοι  και σου φέρνουν μια σύγχηση αν θέλεις να επιλέξεις ένα από τα  em, strong, u ,b  , i  με βάση τους νέους σημασιολογικούς ορισμούς , το ποιό πιθανό είναι το W3C να θέλει στο μέλλον να απαλλαγεί από στοιχεία που είναι φορτωμένα με παρουσιαστικές επιπτώσεις, οπως b,i,u , όπως εξάλλου έκανε στο big, center.

Η άλλη μεγάλη αλλαγή με την HTML5 είναι τα στοιχεία που εισάγουν δομή στο έγγραφό μας όπως main ,article, aside, section , footer , header ,nav για τα οποία θα ασχοληθώ σε μια μελλοντική ανάρτηση.

Αφήστε μια απάντηση

Η ηλ. διεύθυνση σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *