Η ετικέτα HR χρησιμοποιείται σε έγγραφα ιστού για την εμφάνιση οριζόντιας γραμμής σε ολόκληρη τη σελίδα, ή μερικές φορές ονομάζεται οριζόντιος κανόνας. Σε αντίθεση με ορισμένες ετικέτες, αυτό δεν χρειάζεται μια ετικέτα κλεισίματος, οπότε το μόνο που έχετε να κάνετε είναι να πληκτρολογήσετε για να εισαγάγετε τη γραμμή.
Η γραμμή εκτείνεται σε ολόκληρο το πλάτος της σελίδας και φέρει με αυτήν ορισμένα προκαθορισμένα χαρακτηριστικά για να περιγράψει το πάχος, τη θέση και το χρώμα της γραμμής, αλλά μπορείτε να αλλάξετε αυτές τις ρυθμίσεις αν θέλετε.
Μπορείτε να επεξεργαστείτε τα χαρακτηριστικά της οριζόντιας γραμμής σε ένα έγγραφο HTML5 με την επεξεργασία του CSS της σελίδας. Οι οριζόντιες γραμμές HTML4 άλλαξαν στην πλευρά HTML του εγγράφου.
Είναι η ετικέτα HR Semantic;
Στην HTML4, η ετικέτα HR δεν ήταν σημασιολογική. Τα σημασιολογικά στοιχεία περιγράφουν το νόημά τους όσον αφορά το πρόγραμμα περιήγησης και ο προγραμματιστής μπορεί εύκολα να καταλάβει. Η ετικέτα HR ήταν απλώς ένας τρόπος να προσθέσετε μια απλή γραμμή σε ένα έγγραφο όπου θέλετε. Όταν σχεδιάζετε μόνο το πάνω ή το κάτω όριο του στοιχείου όπου θέλετε να εμφανίζεται η γραμμή, τοποθετείται μια οριζόντια γραμμή στο επάνω ή το κάτω μέρος του στοιχείου, αλλά γενικά η ετικέτα HR ήταν ευκολότερη στη χρήση για το σκοπό αυτό.
Ξεκινώντας από το HTML5, η ετικέτα HR έγινε σημασιολογική και τώρα ορίζει ένα θεματικό διάλειμμα σε επίπεδο παραγράφων, το οποίο είναι ένα σπάσιμο στη ροή του περιεχομένου που δεν εγγυάται μια νέα σελίδα ή άλλο ισχυρότερο απομεταδότη - πρόκειται για αλλαγή του θέματος. Για παράδειγμα, μπορεί να βρείτε μια ετικέτα HR μετά από μια αλλαγή σκηνής σε μια ιστορία ή μπορεί να υποδεικνύει μια αλλαγή θέματος σε ένα έγγραφο αναφοράς.
Χαρακτηριστικά HR σε HTML4 και HTML5
Στο HTML4, στην ετικέτα HR μπορούν να ανατεθούν απλά χαρακτηριστικά, συμπεριλαμβανομένων ευθυγράμμιση, πλάτος, και noshade . Η ευθυγράμμιση μπορεί να ρυθμιστεί στο αριστερά , κέντρο , σωστά ή δικαιολογώ . Το πλάτος ρυθμίζει το πλάτος της οριζόντιας γραμμής από το προεπιλεγμένο 100 τοις εκατό που επεκτείνει τη γραμμή στη σελίδα. ο noshade attribute αποδίδει μια συμπαγή γραμμή χρώματος αντί σκιασμένου χρώματος.
Αυτά τα χαρακτηριστικά είναι ξεπερασμένα στο HTML5. Θα πρέπει αντ 'αυτού να χρησιμοποιήσετε το CSS για να διαμορφώσετε τις ετικέτες HR σας σε έγγραφα HTML5.
Αυτό είναι ένα παράδειγμα HTML5 που σχεδιάζει την οριζόντια γραμμή να είναι 10 pixels υψηλό χρησιμοποιώντας inline CSS (στυλ εισάγονται απευθείας στο έγγραφο μαζί με HTML):
Ένας άλλος τρόπος να διαμορφώσετε οριζόντιες γραμμές σε HTML5 είναι να χρησιμοποιήσετε ένα ξεχωριστό αρχείο CSS και να το συνδέσετε με το έγγραφο HTML. Στο αρχείο CSS, θα γράψετε το στυλ όπως αυτό: hr {ύψος: 10px}
Το ίδιο αποτέλεσμα στην HTML4 απαιτεί να προσθέσετε ένα χαρακτηριστικό στο περιεχόμενο HTML. Δείτε πώς μπορείτε να αλλάξετε το μέγεθος της οριζόντιας γραμμής με το Μέγεθος Χαρακτηριστικό:
Υπάρχει πολύ περισσότερη ελευθερία στο σχεδιασμό οριζόντιων γραμμών σε CSS σε σχέση με το HTML. Μόνο το πλάτος και ύψος τα στυλ είναι συνεπή σε όλα τα προγράμματα περιήγησης, επομένως ενδέχεται να χρειαστούν δοκιμές και σφάλματα όταν χρησιμοποιείτε άλλα στυλ. Το προεπιλεγμένο πλάτος είναι πάντα 100 τοις εκατό του πλάτους της ιστοσελίδας ή γονικού στοιχείου. Το προεπιλεγμένο ύψος του κανόνα είναι δύο εικονοστοιχεία.
