Ένα στοιχείο HTML καθορίζεται από μια ετικέτα έναρξης, μια περιεχομένου και μια ετικέτα κλεισίματος.
Παράδειγμα:
<p>Αυτή είναι μια παράγραφος</p>
Στο παραπάνω παράδειγμα, η ετικέτα έναρξης <p> ορίζει την έναρξη του στοιχείου παράγραφος, ενώ η ετικέτα κλεισίματος </p> ορίζει το τέλος του στοιχείου. Το περιεχόμενο μεταξύ των δύο ετικετών αποτελεί το περιεχόμενο του στοιχείου HTML, στην παραπάνω περίπτωση μια παράγραφος.
Το HTML στοιχείο είναι όλα από την ετικέτα έναρξης μέχρι την ετικέτα κλεισίματος:
<τονομασία ετικέτας> Το περιεχόμενο του στοιχείου εδώ … </τονομασία ετικέτας>
Παραδείγματα μερικών στοιχείων HTML:
<h1>Ο πρώτος μου τίτλος</h1>
<p>Η πρώτη μου παράγραφος.</p>
Τα στοιχεία HTML μπορούν να εμφυτεύονται (αυτό σημαίνει ότι τα στοιχεία μπορούν να περιέχουν άλλα στοιχεία).
Όλα τα έγγραφα HTML αποτελούνται από εμφωλευμένα στοιχεία HTML.
Το παρακάτω παράδειγμα περιλαμβάνει τέσσερα στοιχεία HTML (<html>, <body>, <h1> και <p>):
<!DOCTYPE html>
<html>
<head>
<title>Το πρώτο μου έγγραφο HTML</title>
</head>
<body>
<h1>Αυτός είναι ο τίτλος</h1>
<p>Αυτό είναι ένα παράδειγμα κειμένου.</p>
</body>
</html>
Το παραπάνω παράδειγμα δείχνει ότι ένα στοιχείο μπορεί να περιέχει άλλα στοιχεία στο εσωτερικό του. Το στοιχείο <html> περιέχει το στοιχείο <head> και το στοιχείο <body>. Το στοιχείο <head> περιέχει το στοιχείο <title>, ενώ το στοιχείο <body> περιέχει τα στοιχεία <h1> και <p>.
[adinserter block=”2″]
Βεβαίως! Το παραπάνω παράδειγμα είναι ένας πλήρης κώδικας HTML που δημιουργεί μια σελίδα ιστού. Ας τον αναλύσουμε αναλυτικά:
1. <!DOCTYPE html>: Αυτό το δήλωμα πρέπει να περιλαμβάνεται στην αρχή κάθε κώδικα HTML και δηλώνει τον τύπο του εγγράφου ως HTML.
2. <html>: Αυτή η ετικέτα δηλώνει την έναρξη ενός εγγράφου HTML.
3. <head>: Το στοιχείο κεφαλίδας περιλαμβάνει πληροφορίες για το έγγραφο, όπως τον τίτλο της σελίδας, τον τύπο του περιεχομένου και άλλες μεταδεδομένες πληροφορίες.
4. <title>: Αυτή η ετικέτα ορίζει τον τίτλο της σελίδας, που εμφανίζεται στην μπάρα του προγράμματος περιήγησης.
5. <body>: Αυτή η ετικέτα δηλώνει την έναρξη του κύριου περιεχομένου της σελίδας.
6. <h1>: Αυτή η ετικέτα δηλώνει την έναρξη μιας επικεφαλίδας μεγάλου μεγέθους.
7. <p>: Αυτή η ετικέτα δηλώνει την έναρξη μιας παραγράφου.
8. </body>: Αυτή η ετικέτα δηλώνει το τέλος του κύριου περιεχομένου της σελίδας.
9. </html>: Αυτή η ετικέτα δηλώνει το τέλος του εγγράφου HTML.
Μπορείτε να σκεφτείτε το στοιχείο <html> ως το κλείσιμο μιας πόρτας. Μετά από αυτή την πόρτα, ξεκινά ένας χώρος, όπου θα τοποθετηθούν όλα τα άλλα στοιχεία της σελίδας. Το στοιχείο <head> είναι σαν τον έλεγχο πρόσβασης στην πόρτα, που επιτρέπει ή αποκλείει την πρόσβαση σε ορισμένους επισκέπτες. Στο στοιχείο <body>, βρίσκεται το κύριο περιεχόμενο της σελίδας, όπως κείμενο, εικόνες, βίντεο και άλλα στοιχεία.
Το στοιχείο <h1> αντιπροσωπεύει μια επικεφαλίδα μεγάλου μεγέθους και το στοιχείο <p> αντιπροσωπεύει μια παράγραφο. Αυτά τα στοιχεία μπορούν να εμφωλεύονται μέσα σε άλλα στοιχεία, για να δημιουργηθούν πιο σύνθετα δομικά στοιχεία. Παραδείγματος χάριν, θα μπορούσατε να προσθέσετε ένα στοιχείο <ul> για να δημιουργήσετε μια λίστα με στοιχεία, και μέσα στη λίστα, μπορείτε να προσθέσετε πολλά στοιχεία <li> για να δημιουργήσετε μια λίστα με στοιχεία.
Επιπλέον, οι ετικέτες στοιχείων μπορούν να έχουν πολλά διαφορετικά χαρακτηριστικά (attributes) που προσδιορίζουν τη μορφή και τη λειτουργία του στοιχείου. Για παράδειγμα, το στοιχείο <img> χρειάζεται να έχει ένα χαρακτηριστικό src που δείχνει το URL της εικόνας που θέλουμε να εμφανίσουμε. Επίσης, μπορούμε να προσθέσουμε ένα χαρακτηριστικό alt για να περιγράψουμε την εικόνα σε περίπτωση που δεν είναι διαθέσιμη για το χρήστη.
Συνολικά, ο HTML κώδικας περιλαμβάνει διάφορα στοιχεία και χαρακτηριστικά που επιτρέπουν τη δημιουργία ποικίλων τύπων σελίδων ιστού. Όσο περισσότερο μαθαίνετε για τον HTML κώδικα, τόσο περισσότερο μπορείτε να εξερευνήσετε τις δυνατότητες του και να δημιουργείτε σελίδες ιστού που είναι πρακτικές και αισθητικά ελκυστικές.
[adinserter block=”3″]
Μερικά στοιχεία HTML θα εμφανιστούν σωστά, ακόμα κι αν ξεχάσετε την ετικέτα λήξης:
<p>This is a paragraph <p>This is another paragraph
Αυτός ο κώδικας HTML δείχνει δύο παραγράφους χωρίς ετικέτα λήξης για τη δεύτερη παράγραφο. Αν κάποιος δει αυτή τη σελίδα στον φυλλομετρητή, μπορεί να παρατηρήσει ότι και οι δύο παράγραφοι εμφανίζονται στη σωστή τοποθεσία τους. Ωστόσο, αυτό δεν σημαίνει ότι είναι σωστός κώδικας HTML.
Είναι πολύ σημαντικό να θυμάστε πάντα να χρησιμοποιείτε την ετικέτα λήξης στα στοιχεία HTML. Αν δεν το κάνετε, μπορεί να οδηγήσετε σε προβλήματα με την εμφάνιση και τη λειτουργικότητα της σελίδας σας. Επίσης, να θυμάστε ότι ο κώδικας HTML πρέπει να είναι καθαρός και ευανάγνωστος, για να μπορεί να κατανοηθεί εύκολα από άλλους προγραμματιστές ή συντάκτες που θα εργαστούν στη σελίδα σας στο μέλλον.
Τα στοιχεία HTML χωρίς περιεχόμενο ονομάζονται κενά στοιχεία (empty elements).
Η ετικέτα <br> καθορίζει έναν αλλαγή γραμμής και είναι ένα κενό στοιχείο χωρίς κλείσιμο ετικέτας:
<p>This is the first line.<br>This is the second line.</p>
Σε αυτό το παράδειγμα, η πρώτη γραμμή περιέχει ένα κείμενο και η δεύτερη γραμμή ξεκινά με ένα κενό στοιχείο <br>, το οποίο δημιουργεί μια αλλαγή γραμμής. Τα κενά στοιχεία δεν περιέχουν περιεχόμενο και δεν χρειάζεται να κλείσουν με μια ετικέτα λήξης.
Οι ετικέτες HTML δεν είναι ευαίσθητες στην πεζή/κεφαλαία γραμματοσειρά: η ετικέτα
σημαίνει το ίδιο με την ετικέτα
.
Το πρότυπο HTML δεν απαιτεί ετικέτες με μικρά γράμματα, αλλά το W3C συνιστά τη χρήση μικρών γραμμάτων στο HTML και απαιτεί μικρά γράμματα για πιο αυστηρούς τύπους εγγράφων, όπως το XHTML.