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