Saltar al contenido

Ετικέτες έμφασης HTML

14 de junio de 2021

Μία από τις ετικέτες που θα μάθετε νωρίς στην εκπαίδευση του σχεδιασμού ιστοσελίδων σας είναι ένα ζευγάρι ετικετών γνωστών ως «ετικέτες έμφασης». Ας ρίξουμε μια ματιά σε ποιες είναι αυτές οι ετικέτες και πώς χρησιμοποιούνται στο σχεδιασμό ιστοσελίδων σήμερα.

Επιστροφή στο XHTML

Εάν μάθατε HTML πριν από χρόνια, πολύ πριν από την άνοδο του HTML5, πιθανότατα χρησιμοποιήσατε τόσο τις έντονες όσο και τις πλάγιες ετικέτες. Όπως θα περίμενε κανείς, αυτές οι ετικέτες μετέτρεψαν τα στοιχεία σε έντονα ή πλάγια κείμενο αντίστοιχα. Το πρόβλημα με αυτές τις ετικέτες, και γιατί απορρίφθηκαν υπέρ των νέων στοιχείων (τα οποία θα εξετάσουμε σύντομα), είναι ότι δεν είναι σημασιολογικά στοιχεία. Αυτό οφείλεται στο γεγονός ότι ορίζουν τον τρόπο εμφάνισης του κειμένου και όχι πληροφορίες σχετικά με το κείμενο. Θυμηθείτε, το HTML (το οποίο θα γράφουν αυτές οι ετικέτες) αφορά τη δομή και όχι το οπτικό στυλ! Η διαχείριση των οπτικών στοιχείων γίνεται από το CSS και οι βέλτιστες πρακτικές σχεδιασμού ιστοσελίδων έχουν από καιρό υποστηρίξει ότι πρέπει να έχετε έναν σαφή διαχωρισμό του στυλ και της δομής στις ιστοσελίδες σας. Αυτό σημαίνει ότι δεν χρησιμοποιείτε στοιχεία που δεν είναι σημασιολογικά και που μοιάζουν με λεπτομέρεια και όχι δομή. Αυτός είναι ο λόγος για τον οποίο οι έντονες και πλάγιες ετικέτες έχουν γενικά αντικατασταθεί από έντονες (για έντονη γραφή) και έμφαση (για πλάγιους χαρακτήρες).

και

Τα δυνατά στοιχεία και στοιχεία έμφασης προσθέτουν πληροφορίες στο κείμενό σας, αναφέροντας λεπτομερώς το περιεχόμενο που πρέπει να αντιμετωπίζεται διαφορετικά και να τονίζεται όταν μιλάει αυτό το περιεχόμενο. Χρησιμοποιείτε αυτά τα στοιχεία σχεδόν με τον ίδιο τρόπο που θα χρησιμοποιούσατε έντονα και πλάγια γράμματα στο παρελθόν. Απλώς περιβάλλετε το κείμενό σας με τις ετικέτες ανοίγματος και κλεισίματος ( και για έμφαση και και για έντονη έμφαση) και θα επισημανθεί το συνημμένο κείμενο. Μπορείτε να τοποθετήσετε αυτές τις ετικέτες και δεν έχει σημασία ποια είναι η εξωτερική ετικέτα. Να μερικά παραδείγματα. Αυτό το κείμενο τονίζεται και τα περισσότερα προγράμματα περιήγησης θα το εμφανίζουν με πλάγια γράμματα.

type = «code»> Αυτό το κείμενο τονίζεται έντονα και τα περισσότερα προγράμματα περιήγησης θα το εμφανίζουν με έντονη γραφή

type = «code»> Και στα δύο αυτά παραδείγματα, δεν υπαγορεύουμε οπτική εμφάνιση με το HTML. Ναι, η προεπιλεγμένη εμφάνιση της ετικέτας θα είναι πλάγια και η θα είναι έντονη, αλλά αυτές οι εμφανίσεις θα μπορούσαν εύκολα να αλλάξουν σε CSS. Αυτό είναι το καλύτερο και των δύο κόσμων. Μπορείτε να αξιοποιήσετε τα προεπιλεγμένα στυλ του προγράμματος περιήγησης για να λάβετε πλάγιους χαρακτήρες ή έντονους χαρακτήρες στο έγγραφό σας χωρίς να ξεπεράσετε τη γραμμή και να συνδυάσετε τη δομή και το στυλ. Ας υποθέσουμε ότι θέλετε το κείμενο όχι μόνο να είναι τολμηρό, αλλά και να είναι κόκκινο, μπορείτε να το προσθέσετε στο ισχυρό SCS {
χρώμα: κόκκινο;
}

type = «code»> Σε αυτό το παράδειγμα, δεν χρειάζεται να προσθέσετε μια ιδιότητα για το έντονο γραμματοσειρά, καθώς αυτή είναι η προεπιλογή. Εάν δεν θέλετε να το αφήσετε στην τύχη, ωστόσο, θα μπορούσατε πάντα να το προσθέσετε στο: strong {
γραμματοσειρά: έντονο;
χρώμα: κόκκινο;
}

type = «code»> Τώρα θα είστε όλοι εκτός από εγγυημένοι ότι θα έχετε μια σελίδα με έντονο (και κόκκινο) κείμενο όπου χρησιμοποιείται η ετικέτα.

Διπλασιάστε την έμφαση

Ένα πράγμα που έχουμε παρατηρήσει κατά τη διάρκεια του έτους είναι αυτό που συμβαίνει εάν προσπαθήσετε να διπλασιάσετε την έμφαση. Για παράδειγμα: Αυτό το κείμενο πρέπει να περιέχει κείμενο με έντονους χαρακτήρες και πλάγια γράμματα .

Θα σκεφτόσασταν ότι αυτή η γραμμή θα δημιουργούσε μια περιοχή με κείμενο με έντονη γραφή και πλάγια γράμματα. Μερικές φορές αυτό συμβαίνει όντως, αλλά έχουμε δει ότι ορισμένα προγράμματα περιήγησης τιμούν μόνο το δεύτερο από τα δύο στυλ έμφασης, αυτό που είναι πιο κοντά στο πραγματικό κείμενο, και το εμφανίζει μόνο με πλάγια γράμματα. Αυτός είναι ένας από τους λόγους για τους οποίους δεν διπλασιάζουμε τις ετικέτες με έμφαση. Ένας άλλος λόγος για την αποφυγή αυτού του «διπλασιασμού» είναι για στιλιστικούς σκοπούς. Μια μορφή έμφασης είναι συνήθως αρκετή για να εκφράσει τον τόνο που θέλετε να ορίσετε. Δεν χρειάζεται να κάνετε έντονα γράμματα, πλάγια γραφή, χρώμα, μεγέθυνση και υπογράμμιση κειμένου για να ξεχωρίζει. Αυτό το κείμενο, όλα αυτά τα διαφορετικά είδη έμφασης, θα γινόντουσε. Επομένως, προσέξτε όταν χρησιμοποιείτε ετικέτες έμφασης ή στυλ CSS για να δώσετε έμφαση και μην το παρακάνετε.

Μια σημείωση για έντονα και πλάγια γράμματα

Μια τελευταία σκέψη – ενώ οι έντονες b και οι πλάγιες ετικέτες i δεν συνιστώνται πλέον να χρησιμοποιούνται ως στοιχεία έμφασης, υπάρχουν ορισμένοι σχεδιαστές ιστοσελίδων που χρησιμοποιούν αυτές τις ετικέτες για να διαμορφώσουν τις ενσωματωμένες περιοχές κειμένου. Βασικά, το χρησιμοποιούν σαν στοιχείο . Αυτό είναι ωραίο επειδή οι ετικέτες είναι πολύ μικρές, αλλά γενικά δεν συνιστάται η χρήση αυτών των στοιχείων. Το αναφέρουμε σε περίπτωση που το βλέπετε εκεί έξω σε ορισμένους ιστότοπους που χρησιμοποιούνται όχι για τη δημιουργία έντονων ή πλάγιων κειμένων, αλλά για τη δημιουργία ενός αγκίστρου CSS για κάποιο άλλο είδος οπτικού στυλ.