Όταν το HTML5 μπαίνει στη σκηνή πριν από μερικά χρόνια, πρόσθεσε μια δέσμη νέων στοιχείων διαχωρισμού στο langauge, συμπεριλαμβανομένου τουΕΝΟΤΗΤΑ στοιχείο. Τα περισσότερα από τα νέα στοιχεία που εισάγουν τα HTML5 έχουν σαφείς χρήσεις. Για παράδειγμα, το στοιχείο χρησιμοποιείται για τον ορισμό άρθρων και κύριων τμημάτων μιας ιστοσελίδας, το στοιχείο χρησιμοποιείται για τον ορισμό σχετικού περιεχομένου που δεν είναι κρίσιμο για την υπόλοιπη σελίδα και η κεφαλίδα, το nav και το υποσέλιδο είναι αρκετά αυτονόητα. Το προστέθηκε πρόσφαταΕΝΟΤΗΤΑ στοιχείο, ωστόσο, είναι λίγο λιγότερο σαφής.
Πολλοί άνθρωποι πιστεύουν ότι τα στοιχεία HTML ΕΝΟΤΗΤΑ και είναι πραγματικά ακριβώς το ίδιο πράγμα-γενικά στοιχεία περιέκτη που χρησιμοποιούνται για να περιέχουν περιεχόμενο σε μια ιστοσελίδα. Η πραγματικότητα, ωστόσο, είναι ότι αυτά τα δύο στοιχεία, ενώ και τα δύο είναι στοιχεία δοχείων, είναι οτιδήποτε άλλο παρά γενικό. Υπάρχουν συγκεκριμένοι λόγοι για τη χρήση και των δύο ΕΝΟΤΗΤΑ στοιχείο και το DIV στοιχείο - και αυτό το άρθρο θα εξηγήσει αυτές τις διαφορές.
Τμήματα και διαίρεση
ο ΕΝΟΤΗΤΑ Το στοιχείο ορίζεται ως μια σημασιολογική ενότητα μιας ιστοσελίδας ή μιας τοποθεσίας που δεν είναι άλλος πιο συγκεκριμένος τύπος (όπως το άρθρο ή το κατά μέρος). Τείνω να χρησιμοποιώ αυτό το στοιχείο όταν επισημαίνω ένα ξεχωριστό τμήμα της σελίδας - ένα τμήμα που θα μπορούσε να μεταφερθεί χονδρικά και να χρησιμοποιηθεί σε άλλες σελίδες ή τμήματα του ιστότοπου. Είναι ένα ξεχωριστό κομμάτι περιεχομένου ή μια "ενότητα" περιεχομένου, αν θέλετε.
Αντίθετα, χρησιμοποιείτε το DIV στοιχείο για μέρη της σελίδας που θέλετε να χωρίσετε, αλλά για σκοπούς άλλους εκτός από τη σημασιολογία. Θα περικλείω μια περιοχή περιεχομένου σε ένα τμήμα εάν το κάνω έτσι καθαρά για να δώσω στον εαυτό μου ένα "γάντζο" για χρήση με το CSS. Μπορεί να μην είναι μια ξεχωριστή ενότητα περιεχομένου που βασίζεται στη σημασιολογία, αλλά είναι κάτι που υπαγορεύω για να επιτύχω τη διάταξη που θέλω για τη σελίδα μου.
Είναι θέμα της σημασιολογίας
Αυτή είναι μια δύσκολη ιδέα για κατανόηση, αλλά η μόνη διαφορά μεταξύ του DIV στοιχείο και το ΕΝΟΤΗΤΑ στοιχείο είναι η σημασιολογία. Με άλλα λόγια, είναι το έννοια του τμήματος του κώδικα που διαιρείτε.
Κάθε περιεχόμενο που περιέχεται μέσα σε ένα DIV στοιχείο δεν έχει καμία εγγενή σημασία. Χρησιμοποιείται καλύτερα για πράγματα όπως:
- CSS στυλ και άγκιστρα για στυλ CSS
- Δοχεία διαμόρφωσης
- JavaScript γάντζους
- Τμήματα για την HTML για να είναι πιο εύκολη η ανάγνωση
ο DIV το στοιχείο ήταν το μόνο στοιχείο που είχαμε για να προσθέσουμε γάντζους για να στυλίσουμε τα έγγραφά μας και να δημιουργήσουμε στήλες και φανταχτερά σχέδια. Εξαιτίας αυτού, καταλήξαμε με HTML που ήταν γεμάτη με DIV στοιχεία-τι μπορούν να κάνουν οι σχεδιαστές ιστοσελίδων "divitis." Υπήρχαν ακόμη και οι συντάκτες WYSIWYG που χρησιμοποίησαν το DIV στοιχείο αποκλειστικά. Έχω τρέξει πραγματικά σε HTML που χρησιμοποιεί το DIV στοιχείο αντί για παραγράφους!
Με το HTML5, μπορούμε να αρχίσουμε να χρησιμοποιούμε στοιχεία διαχωρισμού για να δημιουργήσουμε περισσότερα σημασιολογικά περιγραφικά έγγραφα (χρήση για πλοήγηση και περιγραφικά στοιχεία κ.ο.κ.) και να ορίσουμε επίσης τα στυλ στα στοιχεία αυτά.
Τι είναι το στοιχείο SPAN;
Το άλλο στοιχείο που οι περισσότεροι άνθρωποι σκέφτονται όταν σκέφτονται DIV στοιχείο είναι το στοιχείο. Αυτό το στοιχείο, όπως DIV, δεν είναι σημασιολογικό στοιχείο. Πρόκειται για ένα ενσωματωμένο στοιχείο που μπορείτε να χρησιμοποιήσετε για να προσθέσετε γάντζους για στυλ και σενάρια γύρω από τα ενσωματωμένα τμήματα περιεχομένου (συνήθως κείμενα). Με αυτή την έννοια είναι ακριβώς όπως το DIV στοιχείου, μόνο εν σειρά και όχι ως στοιχείο μπλοκ. Με κάποιους τρόπους, ίσως είναι ευκολότερο να σκεφτείτε το DIV ως επίπεδο μπλοκ ΣΠΙΘΑΜΗ και να το χρησιμοποιήσετε με τον ίδιο τρόπο που θα κάνατε ΣΠΙΘΑΜΗ μόνο για ολόκληρα τμήματα περιεχομένου HTML.
Δεν υπάρχει συγκρίσιμο στοιχείο γραμμής διατομής σε HTML5.
Για παλαιότερες εκδόσεις του Internet Explorer
Ακόμα κι αν υποστηρίζετε δραματικά παλιότερες εκδόσεις του IE (όπως το IE 8 και το χαμηλότερο) που δεν αναγνωρίζουν αξιόπιστα το HTML5, δεν πρέπει να φοβάστε να χρησιμοποιήσετε σημασιολογικά σωστές ετικέτες HTML. Η σημασιολογία θα βοηθήσει εσάς και την ομάδα σας να διαχειριστείτε τη σελίδα στο μέλλον (επειδή θα γνωρίζετε ότι αυτή η ενότητα είναι το άρθρο εάν περιβάλλεται από το ΑΡΘΡΟ στοιχείο). Επιπλέον, τα προγράμματα περιήγησης που αναγνωρίζουν αυτές τις ετικέτες θα τα υποστηρίξουν καλύτερα.
Μπορείτε ακόμα να χρησιμοποιήσετε σημασιολογικά στοιχεία διαχωρισμού HTML5 με τον Internet Explorer, απλά πρέπει να προσθέσετε scripting και ίσως μερικά περιβάλλοντα DIV στοιχεία για να τα αναγνωρίσουν ως HTML.
Χρησιμοποιώντας στοιχεία DIV και SECTION
Εάν τα χρησιμοποιείτε σωστά, μπορείτε να χρησιμοποιήσετε και τα δύο DIV και ΕΝΟΤΗΤΑ στοιχεία μαζί σε ένα έγκυρο έγγραφο HTML5. Όπως έχετε δει εδώ σε αυτό το άρθρο, χρησιμοποιείτε το ΕΝΟΤΗΤΑ για να ορίσετε σημασιολογικά διακριτά τμήματα του περιεχομένου και χρησιμοποιείτε το DIV ως άγκιστρα για CSS και JavaScript, καθώς και για τον ορισμό διάταξης που δεν έχει σημασιολογική σημασία.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 3/15/17
