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