Τι είναι μια ετικέτα HTML σε σχέση με ένα στοιχείο HTML;

Ο σχεδιασμός ιστοσελίδων, όπως και κάθε βιομηχανία ή επάγγελμα, έχει μια δική του γλώσσα. Καθώς εισέρχεστε στον κλάδο και αρχίσετε να μιλάτε στους συνομηλίκους σας, αναμφισβήτητα θα συναντήσετε μια σειρά από όρους και φράσεις που είναι νέες για εσάς, αλλά που απορρέουν από τις γλώσσες των συναδέλφων web επαγγελματιών σας. Δύο από τους όρους που θα ακούσετε είναι οι "ετικέτες" HTML και "στοιχείο".

Καθώς ακούτε αυτούς τους δύο όρους που μιλήσατε, μπορείτε να συνειδητοποιήσετε ότι χρησιμοποιούνται κάπως αμοιβαία. Ως εκ τούτου, μια ερώτηση που πολλοί νέοι επαγγελματίες του διαδικτύου έχουν όταν αρχίζουν να δουλεύουν με κώδικα HTML είναι "ποια είναι η διαφορά μεταξύ μιας ετικέτας HTML και ενός στοιχείου HTML;"

Ενώ αυτοί οι δύο όροι έχουν παρόμοια σημασία, δεν είναι πραγματικά συνώνυμα. Ποια είναι λοιπόν η ομοιότητα με τους δύο αυτούς όρους; Η σύντομη απάντηση είναι ότι και οι δύο ετικέτες και τα στοιχεία αναφέρονται στη σήμανση που χρησιμοποιείται για την εγγραφή HTML. Για παράδειγμα, μπορείτε να πείτε ότι χρησιμοποιείτε το

ετικέτα για να ορίσετε μια παράγραφο ή το στοιχείο για τη δημιουργία συνδέσμων. Πολλοί άνθρωποι χρησιμοποιούν την ετικέτα και το στοιχείο όρους εναλλακτικά και οποιοσδήποτε σχεδιαστής ιστού ή προγραμματιστής με τον οποίο μιλάτε θα καταλάβαινε τι εννοούσατε, αλλά η πραγματικότητα είναι ότι υπάρχει μια μικρή διαφορά μεταξύ των δύο όρων.

Ετικέτες HTML

Το HTML είναι μια γλώσσα σήμανσης, πράγμα που σημαίνει ότι είναι γραμμένο με κωδικούς που μπορούν να διαβαστούν από ένα άτομο χωρίς να χρειάζεται να καταρτιστεί πρώτα. Με άλλα λόγια, το κείμενο μιας ιστοσελίδας "επισημαίνεται" με αυτούς τους κωδικούς για να δώσει στο πρόγραμμα περιήγησης στο Internet οδηγίες σχετικά με τον τρόπο εμφάνισης του κειμένου. Αυτές οι ετικέτες σήμανσης είναι οι ίδιες οι ετικέτες HTML.

Όταν γράφετε HTML, γράφετε ετικέτες HTML. Όλες οι ετικέτες HTML αποτελούνται από ορισμένα συγκεκριμένα μέρη, όπως:

• Ένα μικρότερο από το σημάδι

  <

• Μια λέξη ή ένας χαρακτήρας που καθορίζει ποια ετικέτα γράφεται
• Οποιοσδήποτε αριθμός προαιρετικών χαρακτηριστικών HTML υπό μορφή a

  όνομα = "αξία" ζεύγος

• Και τελικά ένα πολύ μεγαλύτερο από το σημάδι

  >

Για παράδειγμα, εδώ είναι μερικές ετικέτες HTML:

Αυτές είναι όλες οι ετικέτες ανοίγματος HTML, χωρίς να προστεθούν προαιρετικά χαρακτηριστικά. Οι ετικέτες αυτές αντιπροσωπεύουν:

• - ορίζει μια παράγραφο

• - ορίζει τη σελίδα ως HTML

• - ορίζει μια διαίρεση

Τα παρακάτω είναι επίσης ετικέτες HTML:

• 

Όλα αυτά τα παραδείγματα περιλαμβάνουν ιδιότητες που έχουν προστεθεί στις ετικέτες HTML που ανοίγουν.

• ο
  είναι μια μη ταξινομημένη λίστα που περιλαμβάνει ένα χαρακτηριστικό ταυτότητας
• Το τμήμα έχει ένα χαρακτηριστικό κλάσης
• Το στοιχείο αγκύρωσης ή συνδέσμου περιλαμβάνει το χαρακτηριστικό "href"
• Η ετικέτα εικόνας με ένα χαρακτηριστικό "src"

Για τις ετικέτες αγκύρωσης και εικόνας, τα χαρακτηριστικά δεν είναι στην πραγματικότητα προαιρετικά, είναι απαραίτητα για την σωστή εμφάνιση αυτών των ετικετών. Πρέπει να πείτε στον σύνδεσμο πού να πάτε (και αυτό που κάνει το "href") και την εικόνα τι να δείξει (που είναι αυτό που παρέχει το χαρακτηριστικό "src").

Τι είναι τα στοιχεία HTML;

Σύμφωνα με την προδιαγραφή HTML του W3C, ένα στοιχείο είναι το βασικό δομικό στοιχείο της HTML και αποτελείται συνήθως από δύο ετικέτες : ετικέτα ανοίγματος και ετικέτα κλεισίματος. Μέχρι στιγμής εξετάσαμε μόνο τις ετικέτες έναρξης, οι οποίες ξεκινούν τα στοιχεία. Για να τερματίσετε αυτό το στοιχείο, γράφετε τις αντίστοιχες ετικέτες κλεισίματος.

Για παράδειγμα, για το στοιχείο της παραγράφου γράφετε αυτό:

Αυτό αποτελείται από την ετικέτα έναρξης που είδαμε πριν από λίγο, καθώς και την ετικέτα κλεισίματος -

. Οι ετικέτες κλεισίματος είναι πραγματικά μόνο η επαναλαμβανόμενη ετικέτα ανοίγματος, αλλά με μια "πλάγια κάθετο" που προστέθηκε αμέσως μετά το σύμβολο "λιγότερο από".

Σχεδόν όλα τα στοιχεία HTML έχουν μια ετικέτα ανοίγματος και μια ετικέτα κλεισίματος. Αυτές οι ετικέτες περιβάλλουν το κείμενο που θα εμφανίζεται στην ιστοσελίδα. Για παράδειγμα, για να γράψετε μια παράγραφο κειμένου, γράφετε το κείμενο που θα εμφανίζεται στη σελίδα και στη συνέχεια περιβάλλετε το με τις ακόλουθες ετικέτες:

Εδώ θα γράψετε το κείμενο της παραγράφου που θα θέλατε να εμφανίζεται στην ιστοσελίδα.

Ορισμένα στοιχεία HTML δεν έχουν ετικέτα κλεισίματος. Αυτά ονομάζονται "κενά στοιχεία". Μερικές φορές, αναφέρονται επίσης ως στοιχεία "singleton" ή "void". Τα κενά στοιχεία είναι εύχρηστα επειδή πρέπει να συμπεριλάβετε μόνο μία ετικέτα στην ιστοσελίδα σας και το πρόγραμμα περιήγησης θα γνωρίζει τι πρέπει να κάνει. Για παράδειγμα, για να προσθέσετε ένα σπάσιμο γραμμής στη σελίδα σας, θα χρησιμοποιούσατε το
ετικέτα.

Ένα άλλο κοινό στοιχείο που περιλαμβάνει μόνο μια ετικέτα ανοίγματος είναι το στοιχείο "εικόνα". Για παράδειγμα:



Είδαμε αυτό το παράδειγμα νωρίτερα, αλλά δεν υπάρχει ετικέτα κλεισίματος για αυτό το στοιχείο εικόνας. Το πρόγραμμα περιήγησης απλά αντικαθιστά αυτόν τον κώδικα με την εικόνα που αναφέρεται στο χαρακτηριστικό "href". Στην περίπτωση αυτή, θα ήταν "logo.png".

Γενικά, όταν αναφερόμαστε σε ένα στοιχείο HTML ή μια ετικέτα, θα χρησιμοποιήσουμε τον όρο "στοιχείο" για να υποδείξουμε ότι αναφερόμαστε σε όλα τα μέρη του στοιχείου (και στις ετικέτες ανοίγματος και κλεισίματος). Χρησιμοποιούμε μόνο "ετικέτα" όταν παραπέμπουμε μόνο σε μία ή την άλλη. Αυτή είναι η σωστή χρήση αυτών των δύο όρων και σας ενθαρρύνουμε να τις χρησιμοποιήσετε σωστά - αλλά απλά γνωρίζετε ότι αν τα γλιστρήσετε και τα ανταλλάξετε λίγο, θα τα καταλάβετε από τους νέους ιστότοπους ανάπτυξης ιστού!