Μία από τις ετικέτες που θα μάθετε νωρίς στην εκπαίδευση σχεδίασης ιστοσελίδων σας είναι ένα ζευγάρι ετικετών γνωστών ως "ετικέτες έμφασης". Ας δούμε τι είναι αυτές οι ετικέτες και πώς χρησιμοποιούνται στο σχεδιασμό ιστοσελίδων σήμερα.
Επιστροφή στο XHTML
Αν μάθατε πριν από χρόνια HTML, πολύ πριν από την άνοδο του HTML5, πιθανώς χρησιμοποιούσατε τόσο την έντονη γραφή και τις πλάγιες ετικέτες. Όπως θα περιμένατε, αυτές οι ετικέτες μετατρέπουν τα στοιχεία σε έντονο κείμενο ή κείμενο με πλάγια γραφή αντίστοιχα. Το πρόβλημα με αυτές τις ετικέτες, και γιατί τους απομακρύνθηκαν υπέρ νέων στοιχείων (τα οποία θα δούμε σύντομα), είναι ότι δεν είναι σημασιολογικά στοιχεία. Αυτό οφείλεται στο γεγονός ότι καθορίζουν τον τρόπο εμφάνισης του κειμένου αντί των πληροφοριών σχετικά με το κείμενο. Θυμηθείτε, HTML (που είναι όπου αυτές οι ετικέτες θα γραφτεί) είναι όλα σχετικά με τη δομή, όχι το οπτικό στυλ! Οι οπτικές γίνονται με το CSS και οι βέλτιστες πρακτικές σχεδιασμού ιστοσελίδων έχουν από καιρό υποστηρίξει ότι θα πρέπει να έχετε έναν σαφή διαχωρισμό στυλ και δομής στις ιστοσελίδες σας. Αυτό σημαίνει ότι δεν χρησιμοποιούμε στοιχεία που δεν είναι σημασιολογικά και ποια λεπτομέρεια φαίνεται παρά δομή. Αυτός είναι ο λόγος για τον οποίο οι τολμηρές και πλάγιες ετικέτες έχουν γενικά αντικατασταθεί από ισχυρές (για τολμηρές) και έμφαση (για πλάγιους χαρακτήρες).
& lt; strong & gt; και & lt; em & gt;
Τα ισχυρά στοιχεία και τα στοιχεία έμφασης προσθέτουν πληροφορίες στο κείμενό σας, αναφέροντας το περιεχόμενο που πρέπει να αντιμετωπίζεται διαφορετικά και να τονίζεται όταν μιλάει αυτό το περιεχόμενο. Χρησιμοποιείτε αυτά τα στοιχεία με τον ίδιο τρόπο που θα χρησιμοποιούσατε τολμηρούς και πλάγιους χαρακτήρες στο παρελθόν. Απλά περιβάλλετε το κείμενό σας με τις ετικέτες ανοίγματος και κλεισίματος ( και για έμφαση και και για ισχυρή έμφαση) και το κείμενο που επισυνάπτεται θα τονιστεί.
Μπορείτε να φτιάξετε αυτές τις ετικέτες και δεν έχει σημασία ποια είναι η εξωτερική ετικέτα. Να μερικά παραδείγματα.
Αυτό το κείμενο τονίζεται και τα περισσότερα προγράμματα περιήγησης θα το εμφανίζουν ως πλάγια γραφή. Αυτό το κείμενο τονίζεται ιδιαίτερα και τα περισσότερα προγράμματα περιήγησης θα το έδειχναν με έντονα γράμματα.Και στα δύο αυτά παραδείγματα, δεν υπαγορεύουμε οπτική εμφάνιση με το HTML. Ναι, η προεπιλεγμένη εμφάνιση της ετικέτας θα είναι πλάγια και το θα είναι τολμηρό, αλλά τα βλέμματα θα μπορούσαν εύκολα να αλλάξουν σε CSS. Αυτό είναι το καλύτερο και των δύο κόσμων. Μπορείτε να χρησιμοποιήσετε τα προεπιλεγμένα στυλ του προγράμματος περιήγησης για να λάβετε το κείμενο με στίχους ή τολμηρό κείμενο στο έγγραφό σας χωρίς να διασχίσετε τη γραμμή και να ανακατέψετε τη δομή και το στυλ. Πείτε ότι θέλετε το κείμενο να μην είναι μόνο τολμηρό, αλλά να είναι επίσης κόκκινο, μπορείτε να το προσθέσετε στο CSS
ισχυρό {
χρώμα: κόκκινο;
}}
Σε αυτό το παράδειγμα, δεν χρειάζεται να προσθέσετε μια ιδιότητα για το έντονο γραμματοσειρά, αφού αυτή είναι η προεπιλογή. Αν όμως δεν θέλετε να το αφήσετε στην τύχη, μπορείτε πάντα να το προσθέσετε:
ισχυρό {
γραμματοσειρά-βάρος: έντονα.
χρώμα: κόκκινο;
}}
Τώρα θα είστε σίγουροι ότι έχετε μια σελίδα με έντονο (και κόκκινο) κείμενο όπου χρησιμοποιείται η ετικέτα .
Διπλασιάστε την έμφαση
Ένα πράγμα που έχω παρατηρήσει όλο το χρόνο είναι αυτό που συμβαίνει αν προσπαθήσετε να διπλασιάσετε την έμφαση. Για παράδειγμα:
Αυτό το κείμενο θα πρέπει να περιέχει τόσο κείμενο γραμμένο με γραμματοσειρά και πλάγια γραφή .Θα σκεφτόσαστε ότι αυτή η γραμμή θα παράγει μια περιοχή που έχει κείμενο με έντονα γράμματα και πλάγια γραφή. Μερικές φορές αυτό συμβαίνει πράγματι, αλλά έχω δει κάποια προγράμματα περιήγησης να τιμούν μόνο το δεύτερο από τα δύο στυλ έμφαση, το πιο κοντινό στο συγκεκριμένο κείμενο, και να το εμφανίσετε μόνο ως πλάγια γραφή. Αυτός είναι ένας από τους λόγους για τους οποίους δεν διπλασιάζω τις ετικέτες έμφασης.
Ένας άλλος λόγος για να αποφευχθεί αυτός ο "διπλασιασμός" είναι για τους στιλιστικούς σκοπούς. Μία μορφή έμφασης αν είναι συνήθως αρκετά για να μεταφέρετε τον τόνο που θέλετε να ορίσετε. Δεν χρειάζεται να τολμήσετε, να πλάρετε, να χρωματίσετε, να μεγεθύνετε και να υπογραμμίσετε το κείμενο, ώστε να ξεχωρίζει. Το κείμενο αυτό, θα είναι όλα αυτά τα διαφορετικά είδη έμφασης, θα γίνει φανταχτερός. Έτσι προσέξτε όταν χρησιμοποιείτε ετικέτες έμφασης ή στυλ CSS για να δώσετε έμφαση και μην το παρακάνετε.
Μια σημείωση για έντονα και πλάγια γράμματα
Μια τελευταία σκέψη - ενώ οι έντονες () και πλάγιες () ετικέτες δεν συνιστώνται πλέον για να χρησιμοποιηθούν ως στοιχεία έμφασης, υπάρχουν ορισμένοι σχεδιαστές ιστοσελίδων που χρησιμοποιούν αυτές τις ετικέτες για να στυλιστούν εσωτερικές περιοχές κειμένου. Βασικά, το χρησιμοποιούν σαν στοιχείο . Αυτό είναι ωραίο επειδή οι ετικέττες είναι πολύ σύντομες, αλλά η χρήση αυτών των στοιχείων με αυτόν τον τρόπο δεν συνιστάται γενικά. Αναφέρομαι στην περίπτωση που το βλέπετε εκεί σε κάποιες τοποθεσίες που χρησιμοποιούνται για να μην δημιουργηθεί τολμηρό ή πλάγια κείμενο, αλλά για να δημιουργήσετε ένα άγκιστρο CSS για κάποιο άλλο είδος οπτικού styling.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 12/2/16.