Οι επικεφαλίδες είναι κοινές στις περισσότερες ιστοσελίδες. Στην πραγματικότητα, σχεδόν οποιοδήποτε έγγραφο κειμένου τείνει να έχει τουλάχιστον έναν τίτλο, ώστε να γνωρίζετε τον τίτλο αυτού που διαβάζετε. Αυτοί οι τίτλοι κωδικοποιούνται χρησιμοποιώντας το HTML στοιχεία επικεφαλίδας - h1, h2, h3, h4, h5 και h6.
Σε ορισμένους ιστότοπους, ενδέχεται να βρείτε ότι οι επικεφαλίδες κωδικοποιούνται χωρίς τη χρήση αυτών των στοιχείων. Αντ 'αυτού, οι επικεφαλίδες ενδέχεται να χρησιμοποιούν παραγράφους με συγκεκριμένα χαρακτηριστικά κλάσης που προστίθενται σε αυτές ή διαιρέσεις με στοιχεία κλάσης. Ο λόγος που συχνά ακούμε για αυτήν την εσφαλμένη πρακτική είναι ότι ο σχεδιαστής "δεν του αρέσει ο τρόπος με τον οποίο εμφανίζονται οι επικεφαλίδες". Από προεπιλογή, οι επικεφαλίδες εμφανίζονται με έντονη γραφή και είναι μεγαλύτερες σε μέγεθος, ειδικά τα στοιχεία h1 και h2 που εμφανίζονται σε πολύ μεγαλύτερο μέγεθος γραμματοσειράς από το υπόλοιπο κείμενο μιας σελίδας. Λάβετε υπόψη ότι αυτή είναι μόνο η προεπιλεγμένη εμφάνιση αυτών των στοιχείων! Με
CSS, μπορείτε να κάνετε την επικεφαλίδα να φαίνεται όπως θέλετε! Μπορείτε να αλλάξετε το μέγεθος της γραμματοσειράς, να αφαιρέσετε το έντονο και πολλά άλλα. Οι επικεφαλίδες είναι ο σωστός τρόπος κωδικοποίησης των τίτλων μιας σελίδας. Εδώ είναι μερικοί λόγοι για τους οποίους.Γιατί να χρησιμοποιήσετε ετικέτες επικεφαλίδας αντί για διαιρέσεις
Αυτός είναι ο καλύτερος λόγος για τη χρήση επικεφαλίδων και τη χρήση τους με τη σωστή σειρά (π.χ. h1, μετά h2, μετά h3, κ.λπ.). Μηχανές αναζήτησης δώστε την υψηλότερη στάθμιση στο κείμενο που περιλαμβάνεται στις ετικέτες επικεφαλίδας, επειδή υπάρχει μια σημασιολογική τιμή για αυτό το κείμενο. Με άλλα λόγια, επισημαίνοντας τον τίτλο της σελίδας σας H1, λέτε στην αράχνη της μηχανής αναζήτησης ότι αυτή είναι η # 1 εστίαση της σελίδας. Οι επικεφαλίδες H2 έχουν έμφαση # 2 και ούτω καθεξής.
Δεν χρειάζεται να θυμάστε ποιες τάξεις χρησιμοποιήσατε για να ορίσετε τους τίτλους σας
Όταν γνωρίζετε ότι όλες οι ιστοσελίδες σας θα έχουν ένα H1 που είναι έντονο, 2em και κίτρινο, τότε μπορείτε να το ορίσετε μία φορά στο φύλλο στυλ σας και να τελειώσετε. 6 μήνες αργότερα, όταν προσθέτετε μια άλλη σελίδα, προσθέτετε μια ετικέτα H1 στην κορυφή της σελίδας σας, δεν έχετε για να επιστρέψετε σε άλλες σελίδες για να μάθετε ποιο αναγνωριστικό στυλ ή τάξη χρησιμοποιήσατε για να ορίσετε την κύρια επικεφαλίδα και τις δευτερεύουσες κεφαλίδες.
Δώστε ένα ισχυρό περίγραμμα σελίδας
Τα περιγράμματα διευκολύνουν την ανάγνωση του κειμένου. Αυτός είναι ο λόγος για τον οποίο τα περισσότερα σχολεία των ΗΠΑ δίδαξαν στους μαθητές να γράφουν ένα περίγραμμα πριν γράψουν το έγγραφο. Όταν χρησιμοποιείτε ετικέτες κεφαλίδας σε μορφή διάρθρωσης, το κείμενό σας έχει μια σαφή δομή που γίνεται εμφανής πολύ γρήγορα. Επιπλέον, υπάρχουν εργαλεία που μπορούν να ελέγξουν το περίγραμμα της σελίδας για να παρέχουν μια σύνοψη, και αυτά βασίζονται σε ετικέτες επικεφαλίδας για τη δομή του περιγράμματος.
Η σελίδα σας θα κάνει αίσθηση ακόμη και όταν τα στυλ απενεργοποιημένα
Δεν μπορούν όλοι να προβάλλουν ή να χρησιμοποιούν φύλλα στυλ (και αυτό επιστρέφει στο # 1 - οι μηχανές αναζήτησης προβάλλουν το περιεχόμενο (κείμενο) της σελίδας σας και όχι τα φύλλα στυλ). Εάν χρησιμοποιείτε ετικέτες επικεφαλίδας, κάνετε τις σελίδες σας πιο προσβάσιμες, επειδή οι επικεφαλίδες παρέχουν πληροφορίες που a Ετικέτα DIV δεν θα.
Είναι χρήσιμο για αναγνώστες οθόνης και προσβασιμότητα ιστότοπου
Η σωστή χρήση των κεφαλίδων δημιουργεί μια λογική δομή για ένα έγγραφο. Αυτό θα χρησιμοποιούν οι αναγνώστες οθόνης για να "διαβάσουν" έναν ιστότοπο σε έναν χρήστη με προβλήματα όρασης, καθιστώντας τον ιστότοπό σας προσβάσιμο σε άτομα με αναπηρία.
Στυλ στο κείμενο και τη γραμματοσειρά των τίτλων σας
Ο ευκολότερος τρόπος να απομακρυνθείτε από το "μεγάλο, τολμηρό και άσχημο" πρόβλημα των ετικετών επικεφαλίδας είναι να μορφοποιήσετε το κείμενο με τον τρόπο που θέλετε να φαίνονται. Στην πραγματικότητα, όταν εργάζεστε σε έναν νέο ιστότοπο, είναι καλύτερο να γράφετε συνήθως το στυλ παραγράφου, h1, h2 και h3. Κολλήστε με μόνο οικογένεια γραμματοσειρών και μέγεθος / βάρος. Για παράδειγμα, αυτό μπορεί να είναι ένα προκαταρκτικό φύλλο στυλ για έναν νέο ιστότοπο (αυτά είναι μόνο μερικά παραδείγματα στυλ που θα μπορούσαν να χρησιμοποιηθούν):
Μπορείτε να τροποποιήσετε το γραμματοσειρές της επικεφαλίδας σας ή αλλάξτε το στυλ κειμένου ή ακόμα και το χρώμα του κειμένου. Όλα αυτά θα μετατρέψουν τον "άσχημο" τίτλο σας σε κάτι πιο ζωντανό και σύμφωνα με το σχέδιό σας.
Τα σύνορα μπορούν να ντύσουν τους τίτλους
Τα περίγραμμα είναι ένας πολύ καλός τρόπος για να βελτιώσετε τους τίτλους σας και είναι εύκολο να προσθέσετε. Αλλά μην ξεχάσετε να πειραματιστείτε με τα σύνορα - δεν χρειάζεστε περίγραμμα σε κάθε πλευρά του τίτλου σας. Και μπορείτε να χρησιμοποιήσετε περισσότερα από απλά απλά βαρετά σύνορα.
Προσθέσαμε ένα πάνω και κάτω περίγραμμα στο δείγμα της επικεφαλίδας μας για να παρουσιάσουμε μερικά ενδιαφέροντα οπτικά στυλ. Θα μπορούσατε να προσθέσετε περιγράμματα με οποιονδήποτε τρόπο θέλετε να επιτύχετε το στυλ σχεδίασης που θέλετε.
Προσθέστε εικόνες φόντου στους τίτλους σας για ακόμη περισσότερη Pizazz
Πολλοί ιστότοποι έχουν μια ενότητα κεφαλίδας στο επάνω μέρος της σελίδας που περιλαμβάνει έναν τίτλο - συνήθως τον τίτλο του ιστότοπου και ένα γραφικό. Οι περισσότεροι σχεδιαστές το θεωρούν αυτό ως δύο ξεχωριστά στοιχεία, αλλά δεν χρειάζεται. Εάν το γραφικό υπάρχει μόνο για να διακοσμήσει τον τίτλο, τότε γιατί να μην το προσθέσετε στα στυλ επικεφαλίδας;
Το κόλπο σε αυτόν τον τίτλο είναι ότι γνωρίζουμε ότι η εικόνα μας έχει ύψος 90 pixel. Προσθέσαμε λοιπόν την επένδυση στο κάτω μέρος της επικεφαλίδας των 90 εικονοστοιχείων (παραγέμισμα: 0,5 0 90 εικονοστοιχεία 0p;). Μπορείτε να παίξετε με τα περιθώρια, το ύψος γραμμής και την επένδυση για να εμφανιστεί το κείμενο της επικεφαλίδας ακριβώς όπου θέλετε.
Ένα πράγμα που πρέπει να θυμάστε όταν χρησιμοποιείτε εικόνες είναι ότι εάν έχετε αποκριτικός ιστότοπος (το οποίο πρέπει) με διάταξη που αλλάζει με βάση τα μεγέθη και τις συσκευές της οθόνης, η επικεφαλίδα δεν θα είναι πάντα το ίδιο μέγεθος. Εάν χρειάζεστε την επικεφαλίδα σας για να είναι το ακριβές μέγεθος, αυτό μπορεί να προκαλέσει προβλήματα. Είναι ένας από τους λόγους για τους οποίους γενικά αποφεύγουμε τις εικόνες φόντου σε μια επικεφαλίδα, τόσο δροσερές όσο μερικές φορές φαίνονται.
Αντικατάσταση εικόνας στους τίτλους
Αυτή είναι μια άλλη δημοφιλής τεχνική για τους σχεδιαστές Ιστού επειδή σας επιτρέπει να δημιουργήσετε μια γραφική επικεφαλίδα και να αντικαταστήσετε το κείμενο της ετικέτας επικεφαλίδας με αυτήν την εικόνα. Αυτό είναι αληθινά μια απαρχαιωμένη πρακτική από σχεδιαστές ιστοσελίδων, οι οποίοι είχαν πρόσβαση σε πολύ λίγες γραμματοσειρές και ήθελαν να χρησιμοποιήσουν περισσότερες εξωτικές γραμματοσειρές στη δουλειά τους. Η άνοδος των γραμματοσειρών Ιστού έχει αλλάξει πραγματικά πώς οι σχεδιαστές προσεγγίζουν ιστότοπους. Οι τίτλοι μπορούν τώρα να ρυθμιστούν σε μια μεγάλη ποικιλία γραμματοσειρών και οι εικόνες με τις ενσωματωμένες γραμματοσειρές δεν χρειάζονται πλέον. Ως εκ τούτου, θα βρείτε μόνο αντικατάσταση εικόνων CSS για τίτλους σε παλαιότερους ιστότοπους που δεν έχουν ακόμη ενημερωθεί σε πιο σύγχρονες πρακτικές.
Επεξεργασία από τον Jeremy Girard