Η γλώσσα HTML περιλαμβάνει ορισμένα στοιχεία. Αυτά περιλαμβάνουν κοινά χρησιμοποιούμενα στοιχεία ιστοτόπου όπως παραγράφους, επικεφαλίδες, συνδέσμους και εικόνες. Υπάρχουν επίσης και ορισμένα νεότερα στοιχεία που εισήχθησαν με το HTML5, συμπεριλαμβανομένης της κεφαλίδας, του nav, του υποσέλιδου και πολλά άλλα. Όλα αυτά τα στοιχεία HTML χρησιμοποιούνται για να δημιουργήσουν τη δομή ενός εγγράφου και να του δώσουν νόημα. Για να προσθέσετε ακόμη περισσότερη σημασία στα στοιχεία, μπορείτε να τους δώσετε χαρακτηριστικά.
Μια βασική ετικέτα ανοίγματος HTML αρχίζει με το χαρακτήρα <. Αυτό ακολουθείται από το όνομα της ετικέτας και, τέλος, συμπληρώνετε την ετικέτα με το χαρακτήρα>. Για παράδειγμα, η ετικέτα της αρχικής παραγράφου θα γραφεί έτσι:
Για να προσθέσετε ένα χαρακτηριστικό στην ετικέτα HTML, τοποθετείτε πρώτα ένα κενό μετά το όνομα της ετικέτας (στην περίπτωση αυτή είναι το "p"). Στη συνέχεια, θα προσθέσετε το όνομα χαρακτηριστικού που θέλετε να χρησιμοποιήσετε ακολουθούμενο από ένα ισότιμο σημάδι. Τέλος, η τιμή του χαρακτηριστικού θα τοποθετηθεί σε εισαγωγικά. Για παράδειγμα:
Οι ετικέτες μπορούν να έχουν πολλαπλά χαρακτηριστικά. Θα διαχωρίζετε κάθε χαρακτηριστικό από τα υπόλοιπα με ένα κενό.
Στοιχεία με απαιτούμενα χαρακτηριστικά
Ορισμένα στοιχεία HTML απαιτούν πραγματικά ιδιότητες αν θέλετε να λειτουργήσουν όπως προβλέπεται. Το στοιχείο εικόνας και το στοιχείο σύνδεσης είναι δύο παραδείγματα αυτού.
Το στοιχείο εικόνας απαιτεί το χαρακτηριστικό "src". Το χαρακτηριστικό αυτό λέει στο πρόγραμμα περιήγησης ποια εικόνα θέλετε να χρησιμοποιήσετε σε εκείνη την τοποθεσία. Η τιμή του χαρακτηριστικού θα είναι μια διαδρομή αρχείου προς την εικόνα. Για παράδειγμα:
Θα παρατηρήσετε ότι πρόσθεσα ένα άλλο χαρακτηριστικό σε αυτό το στοιχείο, το χαρακτηριστικό "alt" ή εναλλακτικό κείμενο. Αυτό δεν είναι τεχνικά ένα απαιτούμενο χαρακτηριστικό για τις εικόνες, αλλά είναι μια βέλτιστη πρακτική να περιλαμβάνεται πάντα αυτό το περιεχόμενο για προσβασιμότητα. Το κείμενο που αναγράφεται στην τιμή του χαρακτηριστικού alt είναι αυτό που θα εμφανιστεί αν μια εικόνα αποτύχει να φορτωθεί για κάποιο λόγο.
Ένα άλλο στοιχείο που απαιτεί συγκεκριμένα χαρακτηριστικά είναι η ετικέτα αγκύρωσης ή σύνδεσης. Αυτό το στοιχείο πρέπει να περιλαμβάνει το χαρακτηριστικό "href", το οποίο σημαίνει "αναφορά υπερκειμένου". Αυτός είναι ένας φανταχτερός τρόπος να λέτε "πού πρέπει να πάει αυτός ο σύνδεσμος". Όπως και το στοιχείο εικόνας πρέπει να γνωρίζει ποια εικόνα πρέπει να φορτωθεί, γνωρίζετε πού θα θέλατε. Εδώ είναι πώς μπορεί να φαίνεται μια ετικέτα συνδέσμου:
Αυτός ο σύνδεσμος θα φέρει τώρα ένα άτομο στον ιστότοπο που καθορίζεται στην αξία ενός χαρακτηριστικού. Σε αυτή την περίπτωση, είναι η κύρια σελίδα του.
Χαρακτηριστικά ως άγκιστρα CSS
Μια άλλη χρήση χαρακτηριστικών είναι όταν χρησιμοποιούνται ως "άγκιστρα" για στυλ CSS. Επειδή τα πρότυπα διαδικτύου υπαγορεύουν τη διατήρηση της δομής της σελίδας (HTML) της σελίδας σας ξεχωριστά από τα στυλ (CSS), χρησιμοποιείτε αυτούς τους γάντζους χαρακτηριστικών στο CSS για να υπαγορεύσετε τον τρόπο εμφάνισης της δομημένης σελίδας στο πρόγραμμα περιήγησης ιστού. Για παράδειγμα, θα μπορούσατε να έχετε αυτό το κομμάτι σήμανσης στο έγγραφο HTML.
Αν θέλετε να έχει ένα τμήμα φόντου με μαύρο (# 000) και ένα μέγεθος γραμματοσειράς 1.5εμ, θα το προσθέσετε στο CSS σας:
.featured {φόντο-χρώμα: # 000; μέγεθος γραμματοσειράς: 1.5em;}Το χαρακτηριστικό κατηγορίας "featured" λειτουργεί ως άγκιστρο που χρησιμοποιούμε στο CSS για να εφαρμόσουμε στυλ σε αυτήν την περιοχή. Θα μπορούσαμε επίσης να μας δώσουμε ένα χαρακτηριστικό ταυτότητας εδώ αν θέλαμε. Και οι δύο κλάσεις και τα αναγνωριστικά είναι καθολικά χαρακτηριστικά, πράγμα που σημαίνει ότι μπορούν να προστεθούν σε οποιοδήποτε στοιχείο. Μπορούν επίσης να στοχεύσουν και σε συγκεκριμένα στυλ CSS για να καθορίσουν την οπτική εμφάνιση αυτού του στοιχείου.
Όσον αφορά το Javascript
Τέλος, η χρήση χαρακτηριστικών σε ορισμένα στοιχεία HTML είναι επίσης κάτι που μπορείτε να χρησιμοποιήσετε στη Javascript. Εάν έχετε μια δέσμη ενεργειών που αναζητά ένα στοιχείο με ένα συγκεκριμένο χαρακτηριστικό ταυτότητας, αυτό είναι ακόμα μια άλλη χρήση αυτού του κοινού κομματιού της γλώσσας HTML.