Αν κοιτάξετε το σημάδι HTML για οποιαδήποτε ιστοσελίδα σήμερα, θα δείτε τα στοιχεία HTML που περιέχονται σε άλλα στοιχεία HTML. Αυτά τα στοιχεία που είναι "μέσα" του άλλου είναι αυτά που είναι γνωστά ως "ένθετα στοιχεία" και είναι απαραίτητα για την οικοδόμηση οποιασδήποτε ιστοσελίδας σήμερα.
Τι σημαίνει αυτό για να Nest HTML tags;
Ο ευκολότερος τρόπος να κατανοήσετε τη φωλιά είναι να σκεφτείτε τις ετικέτες HTML ως πλαίσια που περιέχουν το περιεχόμενό σας. Το περιεχόμενό σας μπορεί να περιλαμβάνει κείμενο, εικόνες κ.λπ. Οι ετικέτες HTML είναι τα πλαίσια γύρω από το περιεχόμενο. Μερικές φορές, πρέπει να τοποθετείτε κιβώτια μέσα σε άλλα πλαίσια. Αυτά τα "εσωτερικά" κιβώτια είναι ένθετα μέσα σε άλλους.
Αν έχετε ένα μπλοκ κειμένου που θέλετε έντονα μέσα σε μια παράγραφο, θα έχετε δύο στοιχεία HTML καθώς και το ίδιο το κείμενο.
Παράδειγμα: Αυτό είναι α πρόταση του κειμένου.
Το κείμενο αυτό είναι αυτό που θα χρησιμοποιήσουμε ως παράδειγμα μας. Εδώ είναι πώς θα γραφτεί.
Παράδειγμα: Πρόκειται για μια πρόταση του κειμένου. Επειδή θέλετε να είναι έντονη η λέξη "πρόταση", προσθέτετε τις έντονες ετικέτες πριν και μετά τη λέξη.
Παράδειγμα: Αυτό είναι α πρόταση του κειμένου. Όπως μπορείτε να δείτε, έχουμε ένα πλαίσιο (το εδάφιο) που περιέχει το περιεχόμενο / κείμενο της πρότασής μας, καθώς και ένα δεύτερο πλαίσιο (το ισχυρό ζευγάρι ετικετών), το οποίο θα αποδίδει τη λέξη αυτή ως έντονη γραφή. Όταν τοποθετείτε ετικέτες, είναι σημαντικό να κλείσετε τις ετικέτες με την αντίθετη σειρά που τους έχετε ανοίξει. Ανοίγει το πρώτα, ακολουθούμενη από το , πράγμα που σημαίνει ότι το αντιστρέφετε και κλείστε το και στη συνέχεια το Ένας άλλος τρόπος να σκεφτούμε αυτό είναι να χρησιμοποιήσουμε και πάλι την αναλογία των κιβωτίων. Εάν τοποθετήσετε ένα κουτί μέσα σε ένα άλλο κιβώτιο, πρέπει να κλείσετε το εσωτερικό, πριν κλείσετε το εξωτερικό ή το κουτί που περιέχει. Τι γίνεται αν θέλετε μόνο μία ή δύο λέξεις να είναι τολμηρές και μια άλλη σειρά να είναι πλάγια; Δείτε πώς μπορείτε να το κάνετε αυτό. Παράδειγμα: Αυτό είναι α πρόταση του κειμένου και έχει επίσης μερικά με πλάγια γραφή πολύ. Μπορείτε να δείτε ότι το εξωτερικό κιβώτιο μας, το , έχει τώρα δύο εσωτερικές ετικέτες - το και το . Και οι δύο πρέπει να είναι κλειστές πριν από αυτό που περιέχει κουτί μπορεί να κλείσει. Παράδειγμα: Αυτό είναι α πρόταση του κειμένου και έχει επίσης μερικά με πλάγια γραφή πολύ. Αυτή είναι μια άλλη παράγραφο. Σε αυτή την περίπτωση έχουμε κουτιά μέσα στα κιβώτια! Το πιο έξω πλαίσιο είναι το Ο νούμερο ένα λόγος για τον οποίο πρέπει να φροντίζετε να φτιάξετε είναι να χρησιμοποιήσετε το CSS. Τα επικαλυπτόμενα φύλλα στυλ βασίζονται σε ετικέτες ώστε να είναι συνεχώς ένθετες μέσα στο έγγραφο, ώστε να μπορούν να εντοπίζουν πού αρχίζουν και τελειώνουν τα στυλ. Εάν ορίσετε ένα στυλ που θα πρέπει να επηρεάζει όλους τους "συνδέσμους που βρίσκονται μέσα στο τμήμα με μια κλάση του" main-content "κειμένου στη σελίδα, η λανθασμένη ένθεση καθιστά δύσκολο για το πρόγραμμα περιήγησης να γνωρίζει πού να εφαρμόσει αυτά τα στυλ. Ας δούμε κάποια HTML: Παράδειγμα: Αυτό είναι α πρόταση του κειμένου και έχει επίσης μερικά με πλάγια γραφή πολύ. Αυτή είναι μια άλλη παράγραφο. Χρησιμοποιώντας το παράδειγμα που μόλις ανέφερα, αν ήθελα να γράψω ένα στυλ CSS που θα επηρέαζε τον σύνδεσμο εντός αυτής της διαίρεσης και μόνο εκείνο το σύνδεσμο (σε αντίθεση με οποιονδήποτε άλλο σύνδεσμο σε άλλα τμήματα της σελίδας), θα χρειαζόταν να χρησιμοποιήσω φωλιά για να γράψω το στυλ μου, ως τέτοια: βασικό περιεχόμενο α { χρώμα: # F00;}
Άλλοι λόγοι περιλαμβάνουν την προσβασιμότητα και τη συμβατότητα του προγράμματος περιήγησης. Εάν η HTML σας δεν είναι σωστά ενσωματωμένη, δεν θα είναι τόσο προσιτή στους αναγνώστες οθόνης και στα παλαιότερα προγράμματα περιήγησης - και θα μπορούσε να σπάσει ακόμη και την οπτική εμφάνιση μιας σελίδας, εάν τα προγράμματα περιήγησης δεν μπορούν να καταλάβουν πώς να προβάλλουν σωστά μια σελίδα επειδή τα στοιχεία και οι ετικέτες HTML είναι εκτός τόπου. Τέλος, αν προσπαθείτε να γράψετε εντελώς σωστή και έγκυρη HTML, θα χρειαστεί να χρησιμοποιήσετε τη σωστή φωλιά. Διαφορετικά, κάθε επικύρωση θα σημάνει την HTML σας ως λανθασμένη. Προσθήκη περισσότερων δεσμευμένων ετικετών
Γιατί θα έπρεπε να φροντίζετε για την τοποθέτηση