Τα στοιχεία της γλώσσας html (HTML Elements) συνήθως περιέχουν μια ετικέτα ανοίγματος και μια ετικέτα κλεισίματος. Το περιεχόμενο βρίσκεται ανάμεσα στην ετικέτα ανοίγματος και στην ετικέτα κλεισίματος.
<htmltag>Εδώ μπαίνει το περιεχόμενο…</htmltag>
Τι είναι τα στοιχεία της γλώσσας html
Ως στοιχείο html (HTML Element) θεωρούμε οτιδήποτε υπάρχει ανάμεσα στην ετικέτα ανοίγματος και στην ετικέτα κλεισίματος.
Για παράδειγμα στο στοιχείο html <p>My first paragraph.</p> μπορούμε να διακρίνουμε τα εξής:
Ετικέτα ανοίγματος: <p>
Περιεχόμενο του στοιχείου html: My first paragraph.
Ετικέτα κλεισίματος: </p>
Στο προηγούμενο άρθρο με θέμα την εισαγωγή στη γλώσσα html είδαμε κάποιες ετικέτες όπως είναι η ετικέτα της παραγράφου <p></p>, η ετικέτα της επικεφαλίδας <h1></h1>, η ετικέτα του συνδέσμου<a></a> και η ετικέτα της εικόνας <img>.
Ένθετα στοιχεία html
Τα στοιχεία html μπορούν να περιέχουν άλλα στοιχεία html (ένθετα στοιχεία html).
Όλα τα έγγραφα HTML αποτελούνται από ένθετα στοιχεία html.
Ακολουθεί ένα παράδειγμα στο οποίο μπορούμε να κατανοήσουμε καλύτερα τα ένθετα στοιχεία html. Το στοιχείο <html> καθορίζει ολόκληρο το έγγραφο html. Στην αρχή του εγγράφου μπαίνει η ετικέτα ανοίγματος <html> και στο τέλος του εγγράφου μπαίνει η ετικέτα κλεισίματος </html>. Το στοιχείο <html> περιλαμβάνει το ένθετο στοιχείο <body>. Το στοιχείο <body> δηλώνει το σώμα του εγγράφου, δηλαδή το κομμάτι εκείνο που είναι ορατό στον επισκέπτη μέσω του φυλλομετρητή. Το στοιχείο <body> έχει την ετικέτα ανοίγματος <body> αμέσως μετά από την ετικέτα <html> ενώ έχει την ετικέτα κλεισίματος </body> αμέσως πριν από την ετικέτα κλεισίματος </html>. Η ετικέτα που άνοιξε πρώτη πρέπει να κλείσει τελευταία. Η ένθετη ετικέτα ανοίγει και κλείνει εντός της ετικέτας που την περιέχει.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Το στοιχείο <body> με τη σειρά της περιλαμβάνει δυο ένθετα στοιχεία html. Το html στοιχείο <h1> και το html στοιχείο <p>.
Συνηθισμένα λάθη στην html
Ένα συνηθισμένο λάθος που κάνουν όσοι ξεκινάνε να μαθαίνουν τη γλώσσα html είναι οτι δεν κλείνουν τις ετικέτες με σειρά αντίστροφη από την οποία τις άνοιξαν.
Ένα δεύτερο συνηθισμένο λάθος που κάνουν όσοι κάνουν τα πρώτα τους βήματα στη γλώσσα html είναι ότι ξεχνάνε να κλείσουν τις ετικέτες.
Και στις δυο περιπτώσεις ενδέχεται το οπτικό αποτέλεσμα που θα παρουσιαστεί στο φυλλομετρητή να είναι σωστό.
Όμως το λάθος είναι πιθανό να μας δημιουργήσει προβλήματα. Επειδή λειτουργεί σωστά στο φυλλομετρητή από τον οποίο το ελέγχουμε, αυτό δε σημαίνει ότι θα λειτουργεί σωστά και σε κάθε φυλλομετρητή. Επίσης ενδέχεται να μη λειτουργήσει σωστά σε κινητά και tablets. Επιπλέον είναι πιθανό να μη λειτουργήσει σωστά όταν αλλάξουμε το css. Ακόμα περισσότερο είναι σίγουρο οτι θα μας δημιουργήσει προβλήματα καθώς μεγαλώνει το μέγεθος του αρχείου html, δηλαδή καθώς προσθέτουμε περιεχόμενο αυξάνοντας το πλήθος των γραμμών του κώδικα html.
Html validator
Εάν θέλουμε να ελέγξουμε κατά πόσο ένα έγγραφο html έχει σωστή σύνταξη τότε μπορούμε να χρησιμοποιήσουμε το html validator. Βρίσκεται στη διεύθυνση https://validator.w3.org/ και παρέχεται δωρεάν.
Πλέον σε πολύ λίγες περιπτώσεις χρησιμοποιείται αποκλειστικά η γλώσσα html για την κατασκευή μιας ιστοσελίδας. Συνήθως χρησιμοποιείται κάποιο εργαλείο διαχείρισης περιεχομένου CMS (Content Management System) όπως για παράδειγμα το WordPress ή το Joomla. Σε κάθε περίπτωση το αποτέλεσμα που φτάνει στο φυλλομετρητή μας είναι κώδικας html. Σε κάθε περίπτωση η επιβεβαίωση της ορθότητας της γλώσσας html είναι καλό να γίνεται. Μια σελίδα χωρίς λάθη στο html θα λάβει πολύ καλύτερη μεταχείριση από τις μηχανές αναζήτησης σε σχέση με μια ιστοσελίδα με λάθη.
Κενά στοιχεία html
Τα στοιχεία HTML που δεν έχουν περιεχόμενο ονομάζονται κενά στοιχεία. Ένα παράδειγμα κενού στοιχείου είναι το <br>, το οποίο δεν έχει ετικέτα κλεισίματος. Τα κενά στοιχεία html μπορούμε να τα κλείσουμε χρησιμοποιώντας τη γραμμή κλεισίματος εντός της ετικέτας, για παράδειγμα ως εξής: <br />.
Η γλώσσα html5 δεν απαιτεί να κλείνουν τα κενά στοιχεία. Όμως εάν θέλουμε το έγγραφό μας να μπορεί να διαβαστεί από XML parsers τότε καλό είναι να κλείνουμε τα κενά στοιχεία html. Οι XML parsers απαιτούν πιο αυστηρό έλεγχο σύνταξης στα αρχεία html.
[…] Εάν δεν καταλαβαίνετε τη συνταξη της γλώσσας HTML, τότε σας συνιστούμε να διαβάσετε το άρθρο μας για τα στοιχεία της γλώσσας html. […]