Εισαγωγή στις κεφαλίδες HTML
Σε αυτό το μάθημα θα μιλήσουμε για τις ετικέτες <h1> έως <h6> οι οποίες ορίζουν τις κεφαλίδες HTML από 1 έως 6 αντίστοιχα.
Σχετικά με τις κεφαλίδες στην HTML
Στην html υπάρχουν 6 μεγέθη κεφαλίδων από το 1 έως το 6, με το 1 να είναι το μεγαλύτερο μέγεθος, header 1, και το 6 το μικρότερο, header 6. Τα χαρακτηριστικά τους είναι το μέγεθος τους και η έντονη γραφή.
Ο λόγος χρήσης είναι ο χωρισμός του κειμένου σε λογικές ενότητες ώστε να είναι ποιο κατανοητό και να μην κουράζει τον αναγνώστη. Ένα τέτοιο παράδειγμα είναι και το παρόν κείμενο το ο ποίο διαβάζουμε. Καλό είναι το κείμενο να ξεκινάει με την κεφαλίδα 1, μετά να ακολουθεί η κεφαλίδα 2. Όσο σημαντικότερη είναι η ενότητα, τόσο μεγαλύτερο κείμενο κεφαλίδας πρέπει να έχει και το αντίθετο.
Η έντονη γραφή των κεφαλίδων δεν σημαίνει και αντικατάσταση της ετικέτας <b>. Η ετικέτα b χρησιμοποιείται για την επισήμανση του κειμένου. Η κεφαλίδες html για την λογική τμηματοποίηση του κειμένου.
Ένα μεγάλο πλεονέκτημα των κεφαλίδων html είναι σημασία που δίνεται στην διαδικασία της βελτιστοποίηση μιας σελίδας στις μηχανές αναζήτησης, δηλαδή το SEO (Search Engine Optimization). Όταν σε μια σελίδα υπάρχει μια λέξη κλειδί σε κάποια κεφαλίδα, τότε είναι ένα βήμα επιπλέον στην SEO βελτιστοποίηση της.
Οι κεφαλίδες h1 με h6
Έστω ότι έχουμε τον ακόλουθο κώδικα html στον οποίο δίπλα βλέπουμε το αποτέλεσμα
See the Pen HTML: 5 – Headings by Georgios Georgiou (@glgeorgiou) on CodePen.
Η χρήση της κατάλληλης ετικέτας html, πχ <h3>, δίνει το αντίστοιχο μέγεθος και ένταση, boldness, του κειμένου. Από τι όμως ορίζονται αυτές οι ιδιότητες της κάθε ετικέτας; Ο κάθε φυλλομετρητής έχει εξ’ ορισμού ιδιότητες για τις κεφαλίδες τις οποίες θέτει ανάλογα με το μέγεθος κεφαλίδας που χρησιμοποιούμε.
Τα μεγέθη των ετικετών στις κεφαλίδες HTML
Αν θέλουμε να μεταβάλουμε τις εξ’ ορισμού ρυθμίσεις για κάθε μέγεθος επικεφαλίδας, τότε πρέπει να χρησιμοποιήσουμε κανόνες CSS. Στον παραπάνω κώδικα και στο πλαίσιο CSS βλέπουμε μια δομή ιδιοτήτων, ανάμεσα σε άγκιστρα {} για κάθε ένα μέγεθος κεφαλίδας από h1 μέχρι h2.
- display
- font-size
- margin-top:
- margin-bottom
- margin-left
- margin-right
- font-weight
Εξήγηση κανόνων css
Για κάθε ένα μέγεθος επικεφαλίδας ορίζεται ο τρόπος προβολής, display, ως ένα ενιαίο κουτί block. Στην συνέχεια ακολουθεί το μέγεθος γραμματοσειράς font-size. Οι 4 ιδιότητες margin θέτουν τα περιθώρια μεταξύ του block της κεφαλίδας και του υπόλοιπου κειμένου της σελίδας. Τέλος ορίζεται η έντονη γραφή με την ιδιότητα font-weight.
Το em είναι μια μονάδα μέτρησης μεγέθους του κειμένου. Εάν η εξ’ ορισμού γραμματοσειρά του φυλλομετρητή έχει τεθεί σε 16 pixels, τότε 1em = 16 pixels. Ο λόγος για τον οποίον χρησιμοποιείται το em είναι ο κάθε χρήστης μπορεί να έχει διαφορετικό μέγεθος εξ’ ορισμού γραμματοσειράς. Αυτό σημαίνει πως το μέγεθος θα ποικίλει ανάλογα με τον φυλλομετρητή μέσα από τον οποίον θα προβάλλεται η σελίδα.
Επίλογος
Σε αυτό το μάθημα είδαμε και αναλύσαμε τις κεφαλίδες html μέσα από τις αντίστοιχες html ετικέτες.
