Τι σημαίνει HTML Nesting;

click fraud protection

Αν κοιτάξετε το HTML σήμανση για οποιαδήποτε ιστοσελίδα σήμερα, θα δείτε στοιχεία HTML που περιέχονται σε άλλα στοιχεία HTML. Αυτά τα στοιχεία που είναι «εσωτερικά» άλλων στοιχείων είναι γνωστά ως ένθετα στοιχεία, και είναι απαραίτητα για τη δημιουργία οποιασδήποτε ιστοσελίδας σήμερα.

Τι σημαίνει να τοποθετείτε ετικέτες HTML;

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

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

Παράδειγμα: Πρόκειται για πρόταση κειμένου.

Αυτό το κείμενο είναι αυτό που θα χρησιμοποιήσουμε ως παράδειγμα. Εδώ είναι πώς θα γραφτεί σε HTML:

Παράδειγμα: Πρόκειται για πρόταση κειμένου.

instagram viewer

Για να φτιάξετε τη λέξη πρόταση έντονα, προσθέστε ετικέτες ανοίγματος και κλεισίματος πριν και μετά από αυτήν τη λέξη.

Παράδειγμα: Αυτό είναι ένα πρόταση κειμένου.

Όπως μπορείτε να δείτε, έχουμε ένα πλαίσιο (η παράγραφος) που περιέχει το περιεχόμενο της πρότασης, καθώς και ένα δεύτερο πλαίσιο (το ισχυρός ζεύγος ετικετών), το οποίο καθιστά τη λέξη ως έντονη.

Όταν τοποθετείτε ετικέτες, κλείστε τις ετικέτες με την αντίθετη σειρά που τις ανοίξατε. Ανοίγετε το

πρώτα, ακολουθούμενο από το , που σημαίνει ότι το αντιστρέφεις και κλείνεις το και μετά το.

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

Προσθήκη περισσότερων ένθετων ετικετών

Τι γίνεται αν θέλετε μόνο μία ή δύο λέξεις τολμηρή, και ένα άλλο σετ να είναι πλάγια? Δείτε πώς μπορείτε να το κάνετε αυτό.

Παράδειγμα: Αυτό είναι ένα πρόταση κειμένου και έχει επίσης μερικά πλάγιο κείμενο πολύ.

Μπορείτε να δείτε ότι το εξωτερικό κουτί μας, το

, τώρα έχει δύο ένθετες ετικέτες μέσα του - το και το . Πρέπει να κλείσουν και οι δύο πριν κλείσει το κουτί που περιέχει.


Παράδειγμα: Αυτό είναι ένα πρόταση κειμένου και έχει επίσης μερικά πλάγιο κείμενο πολύ.


Αυτή είναι μια άλλη παράγραφος.


Σε αυτήν την περίπτωση, έχουμε κουτιά μέσα από κουτιά! Το εξώτατο κουτί είναι το

ή α. διαίρεση. Μέσα σε αυτό το κουτί είναι ένα ζευγάρι ένθετο. ετικέτες παραγράφου, και μέσα στην πρώτη παράγραφο, έχουμε μια επόμενη. και ζεύγος ετικετών.

Γιατί πρέπει να ενδιαφέρεστε για τη φωλιά

Ο νούμερο 1 λόγος για τον οποίο πρέπει να ενδιαφέρεστε για ένθεση είναι εάν πρόκειται να χρησιμοποιήσετε CSS. Διαδοχικά φύλλα στυλ βασιστείτε σε ετικέτες για ένθεση με συνέπεια μέσα στο έγγραφο, ώστε να μπορεί να πει από πού ξεκινούν και τελειώνουν τα στυλ. Η εσφαλμένη ένθεση καθιστά δύσκολο για το πρόγραμμα περιήγησης να γνωρίζει πού να εφαρμόσει αυτά τα στυλ. Ας δούμε λίγο HTML:


Παράδειγμα: Αυτό είναι ένα πρόταση κειμένου και έχει επίσης μερικά πλάγιο κείμενο πολύ.


Αυτό είναι μια άλλη παράγραφος.


Χρησιμοποιώντας το παραπάνω παράδειγμα, αν θέλαμε να γράψουμε ένα Στυλ CSS που θα επηρέαζε τον σύνδεσμο μέσα σε αυτό το τμήμα, και μόνο αυτός ο σύνδεσμος (σε αντίθεση με άλλους συνδέσμους σε άλλες ενότητες της σελίδας), θα πρέπει να χρησιμοποιήσουμε το ένθετο για να γράψουμε αυτό το στυλ, ως εξής:

. κύριο περιεχόμενο a {
 χρώμα: # F00;
}

Άλλες εκτιμήσεις

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

Τέλος, εάν προσπαθείτε να γράψετε εντελώς σωστή και έγκυρη HTML, θα πρέπει να χρησιμοποιήσετε τη σωστή ένθεση. Διαφορετικά, κάθε επικυρωτής θα επισημαίνει το HTML σας ως εσφαλμένο.

instagram story viewer