Αν έχετε κοιτάξει ποτέ μια λίστα στοιχείων HTML, μπορεί να έχετε αναρωτηθεί "τι είναι ένα blockquote;" Το στοιχείο blockquote είναι ένα Ετικέτα HTML ζεύγος που χρησιμοποιείται για τον καθορισμό μεγάλων εισαγωγικών. Εδώ είναι ο ορισμός αυτού του στοιχείου σύμφωνα με το W3C HTML5 προδιαγραφή:
Το στοιχείο blockquote αντιπροσωπεύει μια ενότητα που αναφέρεται από άλλη πηγή.
Πώς να χρησιμοποιήσετε το Blockquote στις ιστοσελίδες σας
Όταν γράφετε κείμενο σε μια ιστοσελίδα και δημιουργείτε τη διάταξη αυτής της σελίδας, μερικές φορές θέλετε να ονομάσετε ένα τμήμα κειμένου ως αναφορά. Αυτό θα μπορούσε να είναι ένα απόσπασμα από κάπου αλλού, όπως μια μαρτυρία πελάτη που συνοδεύει μια μελέτη περίπτωσης ή μια ιστορία επιτυχίας έργου.
Αυτό θα μπορούσε επίσης να είναι μια σχεδιαστική επεξεργασία που επαναλαμβάνει κάποιο σημαντικό κείμενο από το ίδιο το άρθρο ή το περιεχόμενο. Κατά τη δημοσίευση, αυτό μερικές φορές ονομάζεται a τραβήξτε προσφοράΣτο σχεδιασμό ιστοσελίδων, ένας από τους τρόπους επίτευξης αυτού (και ο τρόπος που καλύπτουμε σε αυτό το άρθρο) ονομάζεται blockquote.
Ας δούμε λοιπόν πώς θα χρησιμοποιούσατε την ετικέτα blockquote για να ορίσετε μεγάλα αποσπάσματα, όπως αυτό το απόσπασμα από το "The Jabberwocky" του Lewis Carroll:
«Είναι εξαιρετικό και το slithey toves
Μήπως γυρίστηκε και αναταραχή στο wabe:
Όλοι οι μιμητές ήταν οι βορόφοι,
Και η μαμά ξεπερνάει.
(από τον Lewis Carroll)
Παράδειγμα χρήσης της ετικέτας Blockquote
Η ετικέτα blockquote είναι μια σημασιολογική ετικέτα που λέει στο πρόγραμμα περιήγησης ή στον πράκτορα χρήστη ότι τα περιεχόμενα είναι μια μεγάλη αναφορά. Ως εκ τούτου, δεν πρέπει να περικλείετε κείμενο που δεν είναι εισαγωγικά μέσα στην ετικέτα blockquote.
Μια αναφορά είναι συχνά πραγματικές λέξεις που έχει πει κάποιος ή κείμενο από εξωτερική πηγή (όπως το κείμενο του Lewis Carroll σε αυτό το άρθρο), αλλά μπορώ επίσης να είναι η ιδέα της απόσπασης που έχουμε καλύψει προηγουμένως
Όταν το σκέφτεστε, αυτό το απόσπασμα είναι ένα απόσπασμα κειμένου, τυχαία είναι να προέρχεται από το ίδιο άρθρο στο οποίο εμφανίζεται το ίδιο το απόσπασμα.
Τα περισσότερα προγράμματα περιήγησης ιστού προσθέτουν κάποια εσοχή (περίπου 5 διαστήματα) και στις δύο πλευρές ενός μπλοκ προσφοράς για να το ξεχωρίζουν από το περιβάλλον κείμενο. Μερικά εξαιρετικά παλιά προγράμματα περιήγησης μπορεί ακόμη και να αποδώσουν το κείμενο που αναφέρεται σε πλάγια γράμματα. Να θυμάστε ότι αυτό είναι απλώς το προεπιλεγμένο στυλ του στοιχείου blockquote.
Με το CSS, έχετε τον πλήρη έλεγχο του τρόπου εμφάνισης του αποκλεισμού σας. Μπορείτε να αυξήσετε ή ακόμη και να αφαιρέσετε την εσοχή, να προσθέσετε χρώματα φόντου ή να αυξήσετε το μέγεθος του κειμένου για να αναφέρετε περαιτέρω την προσφορά. Μπορείτε να μεταφέρετε αυτό το απόσπασμα στη μία πλευρά της σελίδας και να το τυλίξετε με άλλο κείμενο, το οποίο είναι ένα κοινό οπτικό στυλ που χρησιμοποιείται για αποσπάσματα σε έντυπα περιοδικά.
Έχετε τον έλεγχο της εμφάνισης του blockquote με CSS, κάτι που θα συζητήσουμε λίγο πιο σύντομα. Προς το παρόν, ας συνεχίσουμε να εξετάζουμε πώς να προσθέσουμε το ίδιο το απόσπασμα στη σήμανση HTML.
Για να προσθέσετε την ετικέτα blockquote στο κείμενό σας, απλώς περιβάλλετε το κείμενο που είναι εισαγωγικά με το ακόλουθο ζεύγος ετικετών:
- Ανοιγμα:
- Κλείσιμο:
Για παράδειγμα:
«Είναι εξαιρετικό και το slithey toves.
Μήπως γυρίστηκε και αναταραχή στο wabe:
Όλοι οι μιμητές ήταν οι βορόφοι,
Και η μαμά ξεπερνάει.Προσθέστε το ζευγάρι ετικετών blockquote γύρω από το ίδιο το περιεχόμενο της προσφοράς. Σε αυτό το παράδειγμα, χρησιμοποιήσαμε επίσης μερικά σπάσιμο ετικετών (
) για να προσθέσετε διαλείμματα μιας γραμμής, όπου απαιτείται, στο εσωτερικό του κειμένου. Αυτό συμβαίνει επειδή δημιουργούμε κείμενο από ένα ποίημα, όπου αυτά τα συγκεκριμένα διαλείμματα είναι σημαντικά.Εάν δημιουργούσατε ένα απόσπασμα μαρτυρίας πελάτη και οι γραμμές δεν έπρεπε να σπάσουν σε συγκεκριμένα μέρη, εσείς δεν θα ήθελε να προσθέσει αυτές τις ετικέτες αλλαγής και να επιτρέψει στο ίδιο το πρόγραμμα περιήγησης να τυλίξει και να σπάσει όπως απαιτείται βάσει της οθόνης Μέγεθος.
Μην χρησιμοποιείτε το Blockquote για εσοχή κειμένου
Για πολλά χρόνια, οι χρήστες χρησιμοποιούσαν την ετικέτα blockquote εάν ήθελαν να εσοχή κειμένου στην ιστοσελίδα τους, ακόμη και αν αυτό το κείμενο δεν ήταν εισαγωγικό. Αυτή είναι μια κακή πρακτική! Δεν θέλετε να χρησιμοποιήσετε τη σημασιολογία του αποκλεισμού αποκλειστικά για οπτικούς λόγους.
Εάν πρέπει να εσοχή του κειμένου σας, θα πρέπει να χρησιμοποιήσετε φύλλα στυλ, όχι τις ετικέτες blockquote (εκτός αν, φυσικά, αυτό που προσπαθείτε να εσοχή είναι ένα απόσπασμα!).