Το χαρακτηριστικό id HTML χρησιμοποιείται για να καθορίσετε ένα μοναδικό αναγνωριστικό (id) για ένα στοιχείο HTML.
Δεν μπορείτε να έχετε περισσότερα από ένα στοιχείο με το ίδιο id σε ένα έγγραφο HTML.
Χρησιμοποιώντας το χαρακτηριστικό id
Το χαρακτηριστικό id καθορίζει ένα μοναδικό αναγνωριστικό (id) για ένα στοιχείο HTML. Η τιμή του χαρακτηριστικού id πρέπει να είναι μοναδική μέσα στο έγγραφο HTML.
Το χαρακτηριστικό id χρησιμοποιείται για να αναφέρεται σε μια συγκεκριμένη δήλωση στυλ (style declaration) σε ένα φύλλο στυλ (style sheet). Επίσης, χρησιμοποιείται από την JavaScript για την πρόσβαση και την αλληλεπίδραση με το στοιχείο με το συγκεκριμένο αναγνωριστικό (id).
Η σύνταξη για το id είναι η εξής: γράφουμε έναν χαρακτήρα αποθήκευσης (#), ακολουθούμενο από το όνομα του id. Έπειτα, ορίζουμε τις ιδιότητες CSS μέσα σε αγκύλες {}.
Στο παρακάτω παράδειγμα έχουμε ένα στοιχείο <h1> που αναφέρεται στο όνομα του id “myHeader”. Αυτό το στοιχείο <h1> θα λάβει το στυλ σύμφωνα με τον κανόνα #myHeader που ορίζεται στην ενότητα head:
<head>
<style>
#myHeader {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1 id="myHeader">Τίτλος</h1>
</body>
Στο παραπάνω παράδειγμα, το στοιχείο <h1> θα έχει μπλε χρώμα κειμένου και μέγεθος γραμματοσειράς 24px λόγω της δήλωσης στυλ με id “#myHeader” που ορίζεται στην ενότητα head. Με το χρήση του χαρακτηριστικού id, μπορείτε να καθορίσετε μοναδικά στυλ ή να αναφερθείτε σε συγκεκριμένα στοιχεία για να εκτελέσετε επιπλέον ενέργειες με τη χρήση JavaScript. Είναι σημαντικό να θυμάστε ότι το κάθε id πρέπει να είναι μοναδικό στο έγγραφο HTML, δηλαδή δεν μπορείτε να έχετε περισσότερα από ένα στοιχεία με το ίδιο id.
[adinserter block=”2″]
Ένα όνομα κλάσης μπορεί να χρησιμοποιηθεί από πολλά στοιχεία HTML, ενώ ένα όνομα id πρέπει να χρησιμοποιείται μόνο από ένα μοναδικό στοιχείο HTML στη σελίδα:
- Κλάση (class): Με τη χρήση μιας κλάσης, μπορείτε να ορίσετε ένα όνομα κλάσης και να το αναθέσετε σε πολλά στοιχεία HTML που θέλετε να έχουν τις ίδιες ιδιότητες ή να συμμετέχουν στην ίδια ομάδα στυλ. Για παράδειγμα, μπορείτε να έχετε πολλά στοιχεία
<div>με την ίδια κλάση “box”, και να εφαρμόσετε ένα κοινό στυλ σε όλα τα στοιχεία με αυτήν την κλάση μέσω CSS. - Αναγνωριστικό (id): Ένα αναγνωριστικό (id) πρέπει να είναι μοναδικό στη σελίδα και δεν μπορεί να επαναληφθεί σε άλλα στοιχεία. Μπορείτε να ορίσετε ένα αναγνωριστικό για ένα μοναδικό στοιχείο HTML στη σελίδα και να το χρησιμοποιήσετε για να αναφερθείτε σε αυτό το στοιχείο με JavaScript, να εφαρμόσετε συγκεκριμένα στυλ μέσω CSS ή να το χρησιμοποιήσετε για να το επεξεργαστείτε δυναμικά.
Παρακάτω παρουσιάζεται ένα παράδειγμα που δείχνει τη διαφορά μεταξύ κλάσης (class) και αναγνωριστικού (id) σε στοιχεία HTML:
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 10px;
}
#myElement {
font-size: 18px;
color: blue;
font-weight: bold;
}
</style>
<div class="box">Πρώτο στοιχείο με κλάση box</div>
<div class="box">Δεύτερο στοιχείο με κλάση box</div>
<p id="myElement">Αυτό είναι ένα στοιχείο με αναγνωριστικό myElement</p>
Στο παραπάνω παράδειγμα, έχουμε δύο στοιχεία <div> που ανήκουν στην κλάση “box”. Και τα δύο στοιχεία θα έχουν τις ίδιες ιδιότητες στυλ που ορίζονται στην κλάση .box.
Επίσης, έχουμε ένα στοιχείο <p> με το αναγνωριστικό “myElement”. Αυτό το στοιχείο θα έχει συγκεκριμένες ιδιότητες στυλ που ορίζονται με το αναγνωριστικό #myElement. Σε αυτήν την περίπτωση, το κείμενο θα έχει μέγεθος γραμματοσειράς 18px, μπλε χρώμα και θα είναι έντονο.
Με την κλάση, μπορούμε να εφαρμόσουμε ένα κοινό στυλ σε πολλά στοιχεία, ενώ με το αναγνωριστικό, μπορούμε να επιλέξουμε ένα μοναδικό στοιχεο και να του εφαρμόσουμε συγκεκριμένες ενέργειες ή στυλ. Είναι σημαντικό να θυμάστε ότι ένα αναγνωριστικό (id) πρέπει να είναι μοναδικό στη σελίδα, ενώ μια κλάση (class) μπορεί να χρησιμοποιηθεί από πολλά στοιχεία.
Στο HTML, μπορούμε να χρησιμοποιήσουμε σελιδοδείκτες (bookmarks) για να επιτρέπουμε στους αναγνώστες να πηδούν σε συγκεκριμένα μέρη μιας ιστοσελίδας.
Οι σελιδοδείκτες μπορούν να είναι χρήσιμοι αν η σελίδα σας είναι πολύ μεγάλη.
Για να χρησιμοποιήσετε έναν σελιδοδείκτη, πρέπει πρώτα να τον δημιουργήσετε και έπειτα να προσθέσετε ένα σύνδεσμο προς αυτόν.
Όταν ο σύνδεσμος κλικάρεται, η σελίδα θα κυλήσει στη θέση του σελιδοδείκτη.
[adinserter block=”3″]
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
#top {
margin-bottom: 1000px;
}
</style>
</head>
<body>
<h1>Παράδειγμα Σελιδοδεικτών</h1>
<p><a href="#section1">Πήδησε στην Ενότητα 1</a></p>
<p><a href="#section2">Πήδησε στην Ενότητα 2</a></p>
<h2 id="section1">Ενότητα 1</h2>
<p>Περιεχόμενο ενότητας 1.</p>
<h2 id="section2">Ενότητα 2</h2>
<p>Περιεχόμενο ενότητας 2.</p>
<p><a href="#top">Επιστροφή στην κορυφή</a></p>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε δημιουργήσει δύο ενότητες με τη χρήση των <h2> και του αναγνωριστικού (id), όπου η κάθε ενότητα έχει ένα μοναδικό id (“section1” και “section2”). Έπειτα, έχουμε προστεθεί συνδέσμους προς αυτές τις ενότητες, όπου ο σύνδεσμος περιέχει το αναγνωριστικό id με τον αντίστοιχο σελιδοδείκτη.
Όταν κλικάρουμε σε έναν από τους συνδέσμους “Πήδησε στην Ενότητα 1” ή “Πήδησε στην Ενότητα 2”, η σελίδα θα κυλήσει και θα εστιάσει στην αντίστοιχη ενότητα.
Επίσης, υπάρχει ένας σύνδεσμος “Επιστροφή στην κορυφή” που πηγαίνει στην κορυφή της σελίδας. Ο σύνδεσμος περιέχει το αναγνωριστικό id “top”, το οποίο αντιστοιχεί σε μια φανταστική ενότητα στην κορυφή της σελίδας.
Με τη χρήση των σελιδοδεικτών, οι αναγνώστες μπορούν να πλοηγηθούν εύκολα σε μεγάλες σελίδες και να πηδούν από μια ενότητα σε μια άλλη με ένα απλό κλικ σε ένα σύνδεσμο.
Το χαρακτηριστικό id μπορεί επίσης να χρησιμοποιηθεί από τη JavaScript για να εκτελέσει ορισμένες εργασίες για το συγκεκριμένο στοιχείο.
Η JavaScript μπορεί να αποκτήσει πρόσβαση σε ένα στοιχείο με ένα συγκεκριμένο id χρησιμοποιώντας τη μέθοδο getElementById():
<script>
var element = document.getElementById("myElement");
// Εκτελέστε ενέργειες με το στοιχείο που έχει το συγκεκριμένο id
// Π.χ. αλλαγή του κειμένου του στοιχείου
element.innerText = "Νέο κείμενο";
</script>
Στο παραπάνω παράδειγμα, χρησιμοποιούμε τη μέθοδο getElementById("myElement") για να αποκτήσουμε πρόσβαση στο στοιχείο που έχει το συγκεκριμένο id “myElement”. Έπειτα, μπορούμε να εκτελέσουμε ενέργειες με το στοιχείο, όπως αλλαγή του κειμένου του.
Με τη χρήση του χαρακτηριστικού id, μπορείτε να προσπελάσετε και να επεξεργαστείτε δυναμικά ένα μοναδικό στοιχείο μέσω της JavaScript.