Οι στοιχεία HTML διαθέτουν αρκετά χαρακτηριστικά (attributes) που παρέχουν πρόσθετες πληροφορίες για το πώς πρέπει να παρουσιαστούν τα στοιχεία αυτά στην ιστοσελίδα.
Οι ετικέτες HTML μπορούν να περιέχουν διάφορα χαρακτηριστικά (attributes) που δίνουν πληροφορίες για την εμφάνιση, τη σημασία ή τη λειτουργικότητα του στοιχείου. Για παράδειγμα, η ετικέτα <img> χρησιμοποιείται για την εμφάνιση εικόνων σε μια σελίδα HTML και δέχεται πολλά χαρακτηριστικά, όπως το src για το URL της εικόνας, το alt για μια περιγραφή της εικόνας και το width και το height για το μέγεθος της εικόνας.
Τα χαρακτηριστικά HTML δηλώνονται ως “όνομα” και “τιμή” και προστίθενται στο ανοίγματος ετικέτας μετά το όνομα της ετικέτας. Για παράδειγμα:
<img src="image.jpg" alt="A beautiful image" width="500" height="500">
Σε αυτή την ετικέτα <img>, η τιμή του src χαρακτηριστικού είναι “image.jpg”, η τιμή του alt είναι “A beautiful image” και οι τιμές των χαρακτηριστικών width και height είναι “500”.
Όλα τα στοιχεία HTML μπορούν να έχουν χαρακτηριστικά (attributes)
Τα χαρακτηριστικά παρέχουν πρόσθετες πληροφορίες για τα στοιχεία
Τα χαρακτηριστικά καθορίζονται πάντα στην αρχή της ετικέτας
Τα χαρακτηριστικά συνήθως έρχονται σε ζεύγη όνομα/τιμή, όπως: όνομα=”τιμή”
Η ετικέτα <a> καθορίζει έναν υπερσύνδεσμο (hyperlink). Το χαρακτηριστικό href (Hypertext Reference) καθορίζει το URL της σελίδας στην οποία ο υπερσύνδεσμος οδηγεί:
<a href="https://example.com">Visit Example.com</a>
Σε αυτό το παράδειγμα, ο σύνδεσμος οδηγεί στη σελίδα https://example.com και ο κείμενος του συνδέσμου είναι “Visit Example.com”. Όταν ο χρήστης κάνει κλικ στον σύνδεσμο, θα μεταβεί στη σελίδα του URL που καθορίζεται στο href χαρακτηριστικό.
[adinserter block=”2″]
Η ετικέτα <img> χρησιμοποιείται για την ενσωμάτωση μιας εικόνας σε μια σελίδα HTML. Το χαρακτηριστικό src (Source) καθορίζει τη διαδρομή προς την εικόνα που θα προβληθεί:
<img src="example.jpg" alt="Example Image">
Σε αυτό το παράδειγμα, η εικόνα που θα προβληθεί έχει τη διαδρομή “example.jpg” και η εναλλακτική περιγραφή της εικόνας είναι “Example Image”. Όταν ο φυλλομετρητής φορτώσει τη σελίδα HTML, θα εμφανίσει την εικόνα που καθορίζεται στο src χαρακτηριστικό.
Υπάρχουν δύο τρόποι για να καθοριστεί η διαδρομή προς την εικόνα στο χαρακτηριστικό src:
1. Απόλυτο URL – Συνδέσμος σε μια εξωτερική εικόνα που φιλοξενείται σε άλλον ιστότοπο. Παράδειγμα: src=”https://www.w3schools.com/images/img_girl.jpg”.
Σημείωση: Οι εξωτερικές εικόνες μπορεί να είναι κατοχυρωμένες με πνευματικά δικαιώματα. Εάν δεν λάβετε άδεια χρήσης, μπορεί να παραβιάζετε τους νόμους περί πνευματικής ιδιοκτησίας. Επιπλέον, δεν μπορείτε να ελέγξετε εξωτερικές εικόνες, μπορεί απροσδόκητα να αφαιρεθούν ή να αλλάξουν.
2. Σχετική διαδρομή URL – Συνδέσμος σε εικόνα που φιλοξενείται στον ιστότοπο. Εδώ, η διαδρομή δεν περιλαμβάνει το όνομα του τομέα. Εάν η διαδρομή ξεκινάει χωρίς κάθετο, τότε είναι σχετική με την τρέχουσα σελίδα. Παράδειγμα: src=”img_girl.jpg”. Εάν η διαδρομή ξεκινάει με κάθετο, τότε είναι σχετική με το όνομα του τομέα. Παράδειγμα: src=”/images/img_girl.jpg”.
Συμβουλή: Σχεδόν πάντα είναι καλύτερο να χρησιμοποιησετε σχετικές διαδρομές URL. Δεν θα χαλάσουν αν αλλάξετε το όνομα του τομέα.
Αξίζει να σημειωθεί ότι η χρήση απόλυτων URL είναι χρήσιμη όταν πρόκειται για εικόνες που φιλοξενούνται σε άλλον ιστότοπο, ενώ η χρήση σχετικών διαδρομών URL είναι χρήσιμη όταν οι εικόνες είναι αποθηκευμένες στον ιδιοκτήτη ιστότοπο.
Είναι επίσης σημαντικό να υπογραμμιστεί ότι, όταν χρησιμοποιούνται σχετικές διαδρομές URL, πρέπει να βεβαιωθείτε ότι οι εικόνες και οι σελίδες που συνδέονται βρίσκονται στο σωστό μέρος του ιστότοπου.
Το στοιχείο <img> πρέπει επίσης να περιλαμβάνει τα χαρακτηριστικά width και height, τα οποία καθορίζουν το πλάτος και το ύψος της εικόνας (σε pixel):
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Αυτά τα χαρακτηριστικά βοηθούν τον περιηγητή να καταλάβει πόσο χώρο πρέπει να κρατήσει κατά την εκτύπωση της σελίδας, πριν φορτωθεί η εικόνα. Επιπλέον, αυτά τα χαρακτηριστικά μπορούν να βελτιώσουν την απόδοση της σελίδας και να μειώσουν το μέγεθος του αρχείου εικόνας που πρέπει να μεταφορτωθεί.
[adinserter block=”3″]
Το απαιτούμενο χαρακτηριστικό alt για το στοιχείο <img> καθορίζει έναν εναλλακτικό κείμενο για μια εικόνα, εάν η εικόνα για κάποιο λόγο δεν μπορεί να εμφανιστεί. Αυτό μπορεί να οφείλεται σε μια αργή σύνδεση ή σε ένα σφάλμα στο χαρακτηριστικό src ή αν ο χρήστης χρησιμοποιεί ένα πρόγραμμα ανάγνωσης οθόνης.
Το χαρακτηριστικό alt πρέπει να περιγράφει το περιεχόμενο της εικόνας, έτσι ώστε οι χρήστες που δεν μπορούν να δουν την εικόνα, να μπορούν να κατανοήσουν το περιεχόμενο της. Επιπλέον, το χαρακτηριστικό alt είναι επίσης χρήσιμο για τους μηχανισμούς αναζήτησης, καθώς μπορεί να βοηθήσει στην κατανόηση του περιεχομένου της σελίδας.
Παράδειγμα:
<img src="example.jpg" alt="Παράδειγμα εικόνας">
Στο παραπάνω παράδειγμα, η εικόνα ονομάζεται “Παράδειγμα εικόνας”.
Το χαρακτηριστικό style χρησιμοποιείται για να προσθέσει στυλ σε ένα στοιχείο, όπως χρώμα, γραμματοσειρά, μέγεθος και άλλα.
Το χαρακτηριστικό style προστίθεται στην αρχική ετικέτα του στοιχείου και περιέχει ένα ή περισσότερα κανόνες στυλ. Οι κανόνες στυλ αποτελούνται από ένα όνομα ιδιότητας και μια τιμή.
Παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<h1>Αυτός είναι ο τίτλος</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου.</p>
<p style="color: red; font-size: 16px">Αυτό είναι ένα κείμενο με στυλ</p>
</body>
</html>
Στο παραπάνω παράδειγμα, το κείμενο έχει χρώμα κόκκινο και μέγεθος γραμματοσειράς 16px.
Το χαρακτηριστικό lang πρέπει να περιλαμβάνεται πάντα μέσα στην ετικέτα <html>, για να δηλώνεται η γλώσσα της ιστοσελίδας. Αυτό βοηθάει τις μηχανές αναζήτησης και τους φυλλομετρητές.
Το ακόλουθο παράδειγμα καθορίζει τα Αγγλικά ως τη γλώσσα της ιστοσελίδας:
<!DOCTYPE html> <html lang="en"> <head> <title>Τίτλος Ιστοσελίδας</title> </head> <body> <h1>Κεφαλίδα</h1> <p>Αυτό είναι ένα κείμενο.</p> </body> </html>
Οι κωδικοί χωρών μπορούν επίσης να προστεθούν στον κωδικό γλώσσας στο χαρακτηριστικό lang. Έτσι, οι πρώτοι δύο χαρακτήρες καθορίζουν τη γλώσσα της HTML σελίδας και οι τελευταίοι δύο χαρακτήρες καθορίζουν τη χώρα.
[adinserter block=”4″]
Το παρακάτω παράδειγμα καθορίζει τα Αγγλικά ως τη γλώσσα και τις Ηνωμένες Πολιτείες ως τη χώρα:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Τίτλος Ιστοσελίδας</title>
</head>
<body>
<h1>Κεφαλίδα</h1>
<p>Αυτό είναι ένα κείμενο.</p>
</body>
</html>
Το Χαρακτηριστικό Τίτλος (Title Attribute)
Το χαρακτηριστικό τίτλος ορίζει μερικές πρόσθετες πληροφορίες για ένα στοιχείο.
Η τιμή του χαρακτηριστικού τίτλος θα εμφανιστεί ως εργαλείο στο ποντίκι όταν τοποθετήσετε τον κέρσορα πάνω από το στοιχείο:
Παράδειγμα χρήσης του χαρακτηριστικού τίτλος σε ένα παράγραφο:
<p title="Αυτό είναι ένα παράδειγμα τίτλου">Αυτό είναι ένα παράδειγμα παραγράφου.</p>
Στο παραπάνω παράδειγμα, ορίζουμε ένα χαρακτηριστικό τίτλο με την τιμή “Αυτό είναι ένα παράδειγμα τίτλου” για το στοιχείο παράγραφος. Όταν ο χρήστης τοποθετήσει τον κέρσορα πάνω από το στοιχείο, θα εμφανιστεί ένα εργαλείο με την τιμή του χαρακτηριστικού τίτλος “Αυτό είναι ένα παράδειγμα τίτλου”.
Προτείνουμε: Πάντα χρησιμοποιήστε πεζούς χαρακτήρες για τα χαρακτηριστικά
Ο HTML πρότυπος δεν απαιτεί χαρακτήρες πεζούς στα ονόματα των χαρακτηριστικών.
Το χαρακτηριστικό τίτλος (και όλα τα άλλα χαρακτηριστικά) μπορούν να γραφούν με κεφαλαίους ή πεζούς χαρακτήρες, όπως title ή TITLE.
Ωστόσο, η W3C συνιστά τη χρήση πεζών χαρακτήρων για τα χαρακτηριστικά στο HTML και απαιτεί πεζούς χαρακτήρες για πιο αυστηρούς τύπους εγγράφων, όπως το XHTML.