Νέες ετικέτες html5. Στοιχεία HTML5 - νέες ετικέτες

Σημείωση του συγγραφέα: Καλώς ήρθατε σε αυτό το blog. Σε αυτό το μάθημα, θα ήθελα να σας παρουσιάσω τα βασικά του html5, δηλαδή τις πιο βασικές ετικέτες που εμφανίστηκαν σε αυτό και χρησιμοποιούνται ήδη στη δημιουργία σύγχρονων ιστοσελίδων. Τα στοιχεία HTML5 διευρύνουν σημαντικά τις δυνατότητες αυτής της γλώσσας, ας τα γνωρίσουμε.

Νέα στοιχεία στο html5 - σημασιολογία

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

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

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

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

Υποσέλιδο – το κάτω μέρος του ιστότοπου, το υπόγειο ή ό,τι άλλο μπορείτε να το ονομάσετε. Συνήθως περιέχει πληροφορίες πνευματικών δικαιωμάτων, μερικές φορές επιπλέον μενούΚαι στοιχεία επικοινωνίας. Στην περίπτωση αυτής της ετικέτας, η κατάσταση είναι η ίδια με την κεφαλίδα - μπορεί να μην είναι η μόνη στη σελίδα αυτή η ετικέτα μπορεί να χρησιμοποιηθεί για να επισημάνετε, για παράδειγμα, το κάτω τμήμα στην πλαϊνή γραμμή, εάν είναι πραγματικά διαφορετικό από αυτό οι άλλοι.

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

Άρθρο – κοντέινερ για περιεχόμενο σελίδας, είτε πρόκειται για άρθρο, ειδήσεις, νέο θέμαστο φόρουμ κλπ.

Εκτός – Υπάρχει ακόμη κάποια συζήτηση σχετικά με το σε τι πρέπει να χρησιμοποιηθεί αυτή η ετικέτα. Στην αρχή, κάποιος σκέφτηκε ότι ήταν συνηθισμένο για αυτούς να δημιουργήσουν μια πλαϊνή στήλη όπου βρίσκονται διάφορα widget. Αυτή η δήλωση θεωρείται πιο ουσιαστική - αυτή η ετικέτα πρέπει να πλαισιώνει όλες τις πληροφορίες που είναι πλευρικές πληροφορίες στην ιστοσελίδα. Για παράδειγμα, ένα απόσπασμα, ένα μπλοκ με πλοήγηση εγγράφων ή ένα μπλοκ με συμφραζόμενη διαφήμιση.

Ρύζι. 1. Σημασιολογικά στοιχεία και νέα σήμανσημε τη βοήθειά τους.

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

Εισαγωγή αρχείων πολυμέσων

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

Αυτό γίνεται για συμβατότητα μεταξύ προγραμμάτων περιήγησης. Αρκεί να γράψετε τη διαδρομή προς το αρχείο ήχου στις επεκτάσεις ogg και mp3. Επίσης ο ήχος έχει ορισμένα χαρακτηριστικά. Για παράδειγμα, το χαρακτηριστικό controls προσθέτει στοιχεία ελέγχου σε μια εγγραφή ήχου, ώστε να μπορείτε να αλλάξετε την ένταση και να σταματήσετε την αναπαραγωγή.

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

Αξίζει να πούμε ότι με το βίντεο η κατάσταση είναι λίγο πιο περίπλοκη. Για να μπορεί να παιχτεί σε όλα τα προγράμματα περιήγησης, πρέπει να το προσθέσετε σε τρεις μορφές ταυτόχρονα - ogg, mp4 και webm.

Γενικά, η ετικέτα έχει τα ίδια χαρακτηριστικά με τον ήχο. Επιπλέον, έχει ένα χαρακτηριστικό αφίσας, με το οποίο μπορείτε να ορίσετε τη διαδρομή προς την εικόνα που θα είναι ορατή εάν το βίντεο δεν παίζει. Επίσης, χρησιμοποιώντας τα χαρακτηριστικά πλάτους και ύψους, μπορείτε να προσδιορίσετε το μέγεθος της περιοχής στην οποία θα αναπαραχθεί το βίντεο. Αλλά εξακολουθεί να μου φαίνεται ότι είναι καλύτερο να γίνει αυτό μέσω css.

Για κάποιο λόγο δεν δίνω παραδείγματα, αλλά αυτό πρέπει να γίνει με την εισαγωγή βίντεο.

Η ετικέτα βίντεο δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας.

< video width = "600" height = "450" poster = "video/poster.jpg" controls = "controls" > < source src = "movie.ogv" type = "video/ogg; codecs="theora, vorbis"" > < source src = "movie.mp4" type = "video/mp4; codecs="avc1.42E01E, mp4a.40.2"" > < source src = "movie.webm" type = "video/webm; codecs="vp8, vorbis"" > Η ετικέτα βίντεο δεν υποστηρίζεται από το πρόγραμμα περιήγησής σας. < / video >

Όπως βλέπετε έχουμε το ίδιο αρχείο - ταινία. Απλώς είναι σε διαφορετικές μορφές. Πρέπει επίσης να καθορίσετε τον τύπο MIME και τους κωδικοποιητές. Αλλά δεν πρέπει να το απομνημονεύσετε και να προσπαθήσετε να το κρατήσετε στη μνήμη σας - απλώς αντιγράψτε το.

Εικόνα – μια ετικέτα που δημιουργήθηκε για να ομαδοποιήσει ορισμένα στοιχεία. Είναι άρρηκτα συνδεδεμένο με το figcaption. Με αυτά τα στοιχεία στη θέση τους, μπορούμε να επιτύχουμε αυτό που είχε γίνει προηγουμένως με άλλους τρόπους. Για παράδειγμα, εισαγάγετε μια λεζάντα σε μια εικόνα. Αυτό μπορεί να γίνει ως εξής:

Λεζάντα εικόνας

< figure > < img src = “image . jpg ”> < figcaption >ΛεζάντεςΕικόνα< / figcaption > < / figure >

Ρύζι. 2. Λεζάντα για την εικόνα.

Το Datalist είναι μια ενδιαφέρουσα ετικέτα που μπορεί να εισαχθεί χρησιμοποιώντας ετικέτες επιλογής πιθανές επιλογέςόταν ο χρήστης πληκτρολογεί λέξεις στο πεδίο κειμένου εισαγωγής. Μπορείτε να το δείτε στη μηχανή αναζήτησης - η ίδια σας λέει πιθανές επιλογές. Εδώ, φυσικά, το σύστημα δεν είναι τόσο έξυπνο - μπορείτε απλά να γράψετε μερικά από τα περισσότερα κοινές λέξειςπου μπορεί να αναζητήσουν οι άνθρωποι στον ιστότοπό σας. Το στοιχείο σχετίζεται με πεδίο κειμένουχρησιμοποιώντας το χαρακτηριστικό list, στο οποίο πρέπει να καθορίσετε το αναγνωριστικό που ορίσαμε για την ετικέτα λίστας δεδομένων.

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

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

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

Τα οποία σας επιτρέπουν να περιγράφετε με σαφήνεια τα μπλοκ περιεχομένου

Τι είναι η HTML5;

HTML5 είναι νεότερη έκδοση Hypertext Markup Language (HTML), η οποία αντιπροσωπεύει την πιο ριζική αναθεώρηση αυτής της γλώσσας σε ολόκληρη την ιστορία της. Αυτή η έκδοση εισάγει πολλές νέες δυνατότητες σε διάφορους τομείς. Τα πιο σημαντικά από αυτά περιλαμβάνουν τα ακόλουθα.

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

Βελτίωση των δεξιοτήτων προσόντων σε αυτό το θέμα

Αυτό το άρθρο είναι μέρος του προγράμματος «Path to Knowledge» για τη βελτίωση των δεξιοτήτων προσόντων (Knowledge Path). εκ.

Νέο σετδομικά στοιχεία (ετικέτες) στην HTML5 τροποποιούν τον τρόπο δομής των εγγράφων HTML. Οι νέες ετικέτες δομής επικεντρώνονται στη διαίρεση ενός εγγράφου HTML σε λογικά μέρη. Το όνομα κάθε ετικέτας δομής περιγράφει τον τύπο περιεχομένου που προορίζεται να αποθηκεύσει η ετικέτα. Αυτό το άρθρο είναι αφιερωμένο σε λεπτομερής περιγραφήαυτές οι νέες ετικέτες.

Φόντο

Το 1989, ο Tim Berners-Lee δημιούργησε την πρώτη έκδοση της γλώσσας HTML για να ξεπεράσει ορισμένους περιορισμούς των υφιστάμενων τότε μεθόδων πρόσβασης σε πληροφορίες στο Διαδίκτυο. Επί αρχικό στάδιοη ύπαρξη του Διαδικτύου, η πλοήγησή του ήταν ένα δύσκολο έργο. Το περιεχόμενο στο Διαδίκτυο ήταν μια συλλογή μεμονωμένα έγγραφα, αλλά δεν υπήρχε εύκολη μέθοδος πλοήγησης σε αυτά τα έγγραφα. Πράγματι, ο χρήστης έπρεπε να γνωρίζει την ακριβή διεύθυνση του εγγράφου που αναζητούσε και να εισαγάγει αυτή τη διεύθυνση χειροκίνητα. Για να λύσει αυτό το πρόβλημα, ο Berners-Lee δημιούργησε δύο τεχνολογίες: Πρωτόκολλο HTTP(Πρωτόκολλο μεταφοράς υπερκειμένου) και HTML (Γλώσσα σήμανσης υπερκειμένου).

Το HTTP είναι ένα πρωτόκολλο υπηρεσίας που χρησιμοποιούν οι διακομιστές Web για την παράδοση περιεχομένου. Κυτάζω γραμμή διευθύνσεωντο πρόγραμμα περιήγησής σας στο Web. Εάν το πρόγραμμα περιήγησής σας εμφανίζει μια πλήρη διεύθυνση URL, πιθανότατα αρχίζει με τους χαρακτήρες "http://". Αυτό το τμήμα της διεύθυνσης URL λέει στο πρόγραμμα περιήγησης ποιον τύπο πρωτοκόλλου να χρησιμοποιήσει κατά την υποβολή αιτήματος στον διακομιστή Ιστού. Όταν ένας διακομιστής Web λαμβάνει ένα αίτημα για ένα έγγραφο, στις περισσότερες περιπτώσεις το έγγραφο είναι σε μορφή HTML ή μετατρέπεται σε αυτήν τη μορφή. Είναι το έγγραφο HTML που αποστέλλεται στο πρόγραμμα περιήγησης που έστειλε αυτό το αίτημα.

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

Αυτός ο συνδυασμός Τεχνολογίες HTTPκαι η HTML παρέχει γρήγορη και εύκολη πλοήγηση στο περιεχόμενο του Διαδικτύου - για πλοήγηση μεταξύ εγγράφων, απλώς κάντε κλικ σε συνδέσμους στο κείμενο με το ποντίκι. Μετά τη δημιουργία των δύο τεχνολογιών που αναφέρθηκαν παραπάνω, ο Berners-Lee ίδρυσε έναν οργανισμό που ονομάζεται W3C (World Wide WebΚονσόρτσιουμ). Το W3C οδήγησε στην ανάπτυξη των πρώτων τεσσάρων εκδόσεων της HTML.

Ο αρχικός σκοπός του Διαδικτύου ήταν να εξυπηρετεί απλά έγγραφα κειμένου. Τα πρώτα προγράμματα περιήγησης ήταν μόνο κειμένου (με άλλα λόγια, δεν είχαν φανταχτερά παράθυρα - απλώς κείμενο στην οθόνη). Ακόμη και η προσθήκη εικόνων ήταν πολύ σημαντικό επίτευγμα όταν πρωτοεμφανίστηκαν. Σήμερα, οι άνθρωποι κάνουν διάφορα πράγματα στο Διαδίκτυο, από την αποστολή μηνυμάτων έως e-mailπριν την προβολή τηλεοπτικά προγράμματα. Το Διαδίκτυο έχει ήδη γίνει πολύ περισσότερο από ένας μηχανισμός για τη μεταφορά απλών εγγράφων κειμένου. Νέες δυνατότητες και νέες χρήσεις έχουν δημιουργήσει νέες δυσκολίες και νέα προβλήματα που η HTML δεν σχεδιάστηκε ποτέ να λύσει.

Το W3C προσπάθησε να λύσει τα προβλήματα του σημερινού Διαδικτύου με το πρότυπο XHTML 2.0 (Extensible Hypertext Markup Language). Ωστόσο, αυτό το πρότυπο δεν έχει υιοθετηθεί ευρέως και έχει πλέον ουσιαστικά εγκαταλειφθεί. Το 2004, ενώ το W3C επικέντρωνε τις προσπάθειές του στο πρότυπο XHMTL 2.0, ένας άλλος οργανισμός που ονομάζεται WHATWG (Web Hypertext Application Technology Working Group) άρχισε να αναπτύσσει το πρότυπο HTML5, το οποίο έτυχε πολύ πιο ευνοϊκής υποδοχής από την κοινότητα από το πρότυπο XHTML 2.0. Το W3C έχει σταματήσει να λειτουργεί σε XHTML 2.0 και αυτή τη στιγμή συνεργάζεται με το WHATWG για την ανάπτυξη της προδιαγραφής HTML5.

Υποστηριζόμενα προγράμματα περιήγησης

Τη στιγμή της συγγραφής αυτού του άρθρου, το πρότυπο HTML5 δεν έχει ακόμη κυκλοφορήσει επίσημα. Το μεγαλύτερο μέρος του περιεχομένου στον Ιστό εξακολουθεί να δημιουργείται σύμφωνα με την προδιαγραφή HTML 4, ωστόσο, ορισμένα προγράμματα περιήγησης υποστηρίζουν την προδιαγραφή HTML5. Αυτό μπορεί να είναι δύσκολο επειδή καθένα από αυτά τα προγράμματα περιήγησης μπορεί να υποστηρίξει μόνο ένα υποσύνολο λειτουργιών HTML5. Πριν δημιουργήσετε έναν ιστότοπο που βασίζεται σε HTML5, δοκιμάστε κάθε πρόγραμμα περιήγησης-στόχου για να βεβαιωθείτε ότι υποστηρίζει τις δυνατότητες που σκοπεύετε να χρησιμοποιήσετε στον ιστότοπό σας.

Ενημερωμένη δήλωση τύπου doctype

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

Η δήλωση doctype λέει στο πρόγραμμα περιήγησης σε ποια έκδοση της γλώσσας σήμανσης είναι γραμμένη τρέχουσα σελίδα. Αυτό το κάνει χρησιμοποιώντας ένα πρότυπο DTD (Document Type Definition). Ένα DTD καθορίζει τους κανόνες που χρησιμοποιεί μια γλώσσα σήμανσης για να βοηθήσει τα προγράμματα περιήγησης να εμφανίζουν σωστά το περιεχόμενο.

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

Πίνακας 1. Δηλώσεις Doctype και οι δυνατότητές τους Παράδειγμα δυνατοτήτων δήλωσης τύπου Doctype

Η HTML 4.01 είναι αυστηρή	Επιτρέπει τη χρήση όλων των στοιχείων και Χαρακτηριστικά HTML, ωστόσο, δεν επιτρέπει ετικέτες παρουσίασης όπως γραμματοσειρά. Δεν επιτρέπονται στοιχεία σετ πλαισίων.
HTML 4.01 μεταβατικό	Παρόμοια με την αυστηρή δήλωση HTML, αλλά επιτρέπει τη χρήση ετικετών όπως γραμματοσειρά. Δεν επιτρέπονται στοιχεία σετ πλαισίων.
Σύνολο πλαισίων HTML 4.01	Παρόμοια με τη μεταβατική δήλωση HTML, αλλά επιτρέπει τη χρήση στοιχείων συνόλου πλαισίων.
XHTML 1.0 αυστηρό	Παρόμοια με την αυστηρή δήλωση HTML, αλλά όλο το περιεχόμενο πρέπει να είναι σε μορφή XML. Για παράδειγμα, κάθε στοιχείο ανοίγματος πρέπει να έχει ένα αντίστοιχο στοιχείο κλεισίματος. Δεν επιτρέπονται στοιχεία σετ πλαισίων.
XHTML 1.0 μεταβατικό	Παρόμοια με τη μεταβατική δήλωση HTML, αλλά όλο το περιεχόμενο πρέπει να είναι σε μορφή XML. Δεν επιτρέπονται στοιχεία σετ πλαισίων.
Σύνολο πλαισίων XHTML 1.0	Παρόμοια με τη μεταβατική δήλωση XHTML, αλλά επιτρέπει στοιχεία συνόλου πλαισίων.
XHTML 1.1	Παρόμοια με την αυστηρή δήλωση XHTML, το plus παρέχει δυνατότητες λειτουργικών μονάδων, όπως υποστήριξη Ruby για γλώσσες της Ανατολικής Ασίας.

Ευτυχώς, η προδιαγραφή HTML5 απλοποιεί σημαντικά τη δήλωση τύπου doctype. Πράγματι, υπάρχει μόνο μία τέτοια δήλωση στην HTML5. Για απόδοση του προγράμματος περιήγησής σας χρησιμοποιώντας την προδιαγραφή HTML5, προσθέστε τη δήλωση τύπου doctype που εμφανίζεται στο .

Λίστα 1. Δήλωση τύπου HTML5

Η δήλωση πρέπει να βρίσκεται στην αρχή του εγγράφου HTML, πριν από το .

Ετικέτες νέας δομής

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

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

Προσέγγιση HTML 4

Ακόμα κι αν έχετε δημιουργήσει μόνο βασικά έγγραφα HTML στο παρελθόν, εξακολουθείτε να είστε εξοικειωμένοι με την ετικέτα div. Στην προ-HTML5 εποχή, η ετικέτα div ήταν ο πρωταρχικός μηχανισμός για τη δημιουργία μπλοκ περιεχομένου σε ένα έγγραφο HTML. Για παράδειγμα, δείχνει τη χρήση ετικετών div για τη δημιουργία μιας απλής σελίδας με κεφαλίδα, περιοχή περιεχομένου και υποσέλιδο.

Καταχώριση 2. Απλή σελίδα HTML με χρήση ετικετών div A Simple Σελίδα HTMLΧρήση του υποσέλιδου περιεχομένου κεφαλίδας Divs

Αυτή η προσέγγιση λειτουργεί εξαιρετικά. Η ετικέτα div είναι ένα εξαιρετικό στοιχείο γενικού σκοπού. Ωστόσο, χωρίς να εξετάσουμε το χαρακτηριστικό id κάθε ετικέτας div, είναι δύσκολο να πούμε ποιο τμήμα του εγγράφου αντιπροσωπεύει κάθε ετικέτα div. Μπορεί να προβληθεί ένα επιχείρημα ότι εάν το χαρακτηριστικό id έχει ονομαστεί σωστά, οι δυνατότητές του ως δείκτης είναι επαρκείς, ωστόσο, η χρήση των χαρακτηριστικών id δεν είναι υποχρεωτική. Υπάρχουν πολλές γεύσεις του χαρακτηριστικού id που μπορούν να θεωρηθούν εξίσου έγκυρες. Η ίδια η ετικέτα div δεν περιέχει καμία ένδειξη του τύπου περιεχομένου που της έχει ανατεθεί.

Προσέγγιση HTML5

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

Καταχώριση 4. Προσθήκη ενότητας Μια απλή ετικέτα κεφαλίδας σελίδας HTML

Αυτό είναι ένα σημαντικό τμήμα της σελίδας.

άρθρο με ετικέτα υποσέλιδου

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

Καταχώριση 5. Προσθήκη ετικετών άρθρου Μια απλή κεφαλίδα σελίδας HTML

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Ίσως μια ανάρτηση στο blog.

Το Footer Tag στην άκρη Η ετικέτα πλάι υποδεικνύει ότι το περιεχόμενο που περιέχεται σε αυτό το στοιχείο σχετίζεται, αλλά όχι μέρος, με το κύριο περιεχόμενο αυτής της σελίδας. Κατά μία έννοια, η χρήση του μοιάζει με την ενσωμάτωση ενός σχολίου στο σώμα του κειμένου (όπως αυτό το σχόλιο). Το περιεχόμενο σε παρένθεση παρέχειπρόσθετες πληροφορίες

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

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Καταχώριση 6. Προσθήκη ετικέτας κατά μέρος Μια απλή κεφαλίδα σελίδας HTML

Ετικέτα υποσέλιδου

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

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Καταχώριση 7. Προσθήκη ετικέτας υποσέλιδου Μια απλή κεφαλίδα σελίδας HTML

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Αυτή είναι μια άκρη για την πρώτη ανάρτηση ιστολογίου.

Υποσέλιδο

Σε αυτό το σημείο, όλες οι ετικέτες div από το αρχικό παράδειγμα έχουν αντικατασταθεί με ετικέτες δομής HTML5. The nav tagListing 8. Προσθήκη ετικέτας πλοήγησης Μια απλή κεφαλίδα σελίδας HTML Κάποιος σύνδεσμος Nav Κάποιος άλλος σύνδεσμος Nav

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Καταχώριση 7. Προσθήκη ετικέτας υποσέλιδου Μια απλή κεφαλίδα σελίδας HTML

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Ένας τρίτος σύνδεσμος πλοήγησης

Εμφανίζεται εδώ το αποτέλεσμα της αντικατάστασης των αρχικών ετικετών div με νέες ετικέτες δομής HTML5.

Καταχώριση 9. Τελική έκδοση του παραδείγματος A Simple HTML Page Header The nav tagListing 8. Προσθήκη ετικέτας πλοήγησης Μια απλή κεφαλίδα σελίδας HTML Κάποιος σύνδεσμος Nav Κάποιος άλλος σύνδεσμος Nav

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Καταχώριση 7. Προσθήκη ετικέτας υποσέλιδου Μια απλή κεφαλίδα σελίδας HTML

Αυτό είναι ένα σημαντικό τμήμα περιεχομένου στη σελίδα.

Αυτή είναι μια άκρη για την πρώτη ανάρτηση ιστολογίου.

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

Σύναψη

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

Στην HTML5, έχουν εισαχθεί αρκετές νέες ετικέτες για τη δομή του κώδικα: , , , , , οι οποίες σε ορισμένες περιπτώσεις αντικαθιστούν το συνηθισμένο . Αν και φαίνεται ότι δεν υπάρχει μεγάλη διαφορά μεταξύ των ετικετών, υπάρχει ένα τεράστιο χάσμα μεταξύ τους. Οι ετικέτες δεν απευθύνονται σε άτομα που δεν έχουν λόγο να τα εξετάσουν πηγαίος κώδικαςσελίδες, αλλά σε μηχανές που ερμηνεύουν τον κώδικα. Οι μηχανές ή τα ρομπότ δεν καταλαβαίνουν, γι 'αυτούς αυτή είναι μια τυπική ετικέτα σήμανσης - αντικαταστήστε την με και το νόημα δεν θα αλλάξει. Ένα άλλο πράγμα είναι ότι το ρομπότ, έχοντας εντοπίσει αυτήν την ετικέτα, την αντιλαμβάνεται ακριβώς ως την κεφαλίδα ενός ιστότοπου ή μιας ενότητας.

Τι δίνει αυτό τελικά; μηχανές αναζήτησηςΑρχίζουν να ευρετηριάζουν καλύτερα τον ιστότοπο επειδή διαχωρίζουν σαφώς το περιεχόμενο της σελίδας από τα βοηθητικά στοιχεία. Τα προγράμματα περιήγησης ομιλίας που έχουν σχεδιαστεί για τυφλούς παραλείπουν την κεφαλίδα και πηγαίνουν απευθείας στο περιεχόμενο. Οι ιστότοποι ενδέχεται να μοιράζονται αυτόματα περιεχόμενο και άλλες πληροφορίες μεταξύ τους. Όλα αυτά τα χαρακτηριστικά ονομάζονται σημασιολογία και σας επιτρέπουν να παρουσιάζετε δεδομένα σε μια μορφή κατάλληλη για τα ρομπότ.

Ας δημιουργήσουμε πρώτα την κεφαλίδα του ιστότοπου χρησιμοποιώντας μια ετικέτα (παράδειγμα 6.2).

Παράδειγμα 6.2. Χρήση

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

Παράδειγμα 6.3. Επικεφαλίδα ιστότοπου

HTML5 CSS 2.1 IE 7+ IE 9+ Cr Op Sa Fx

κεφαλίδα ( οθόνη: μπλοκ; φόντο: #00B0D8 url(images/header-gradient.png) repeat-x; )

Αυτό το παράδειγμα θα λειτουργήσει σε όλα τα προγράμματα περιήγησης εκτός από τα IE7 και IE8. Internet Explorerδεν προσθέτει στυλ σε στοιχεία που δεν κατανοεί. Αυτή η παρεξήγηση μπορεί να διορθωθεί δημιουργώντας ένα εικονικό στοιχείο με χρησιμοποιώντας JavaScript. Για να γίνει αυτό, θα το συμπεριλάβουμε στον κώδικα.

document.createElement("κεφαλίδα");

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

Παράδειγμα 6.4. Σενάριο για IE

var e = ("article,aside,figcaption,figure,footer,header,hgroup,nav,section,time").split(",");< e.length; i++) { document.createElement(e[i]); }

για (var i = 0; i

Το ίδιο το σενάριο περικλείεται σε σχόλια υπό όρους, έτσι ώστε να εκτελείται μόνο για την έκδοση IE 8.0 και χαμηλότερη. Ο IE9 περιλαμβάνει ήδη υποστήριξη για τις νέες ετικέτες HTML5.

Δεν χρειάζεται να ενσωματώσετε το παραπάνω παράδειγμα στον ιστότοπό σας. Για να το κάνετε αυτό, απλώς δώστε έναν σύνδεσμο προς αυτό, όπως φαίνεται στο παράδειγμα 6.5.

Παράδειγμα 6.5. Σενάριο για IE

Όλα τα καθορισμένα σενάρια πρέπει να βρίσκονται στον κώδικα πριν από το CSS.

Έτσι, για να χρησιμοποιηθούν πλήρως οι ετικέτες HTML5 σε όλα τα προγράμματα περιήγησης, αρκεί να πληρούνται τρεις προϋποθέσεις:

σύνολο doctype ;

συμπεριλάβετε το σενάριο από το παράδειγμα 6.4 ή 6.5.

στα στυλ για νέες ετικέτες, ορίστε εμφάνιση: μπλοκ.

Τώρα ας δούμε μερικές ετικέτες HTML5 με περισσότερες λεπτομέρειες για να κατανοήσουμε το εύρος τους.

Παράδειγμα 6.6. Χρήση ετικέτας

HTML5 IE Cr Op Sa Fx

άρθρο Ίχνη πρωτόγνωρων ζώων Η ιστορία του πώς εμφανίστηκαν μυστηριώδη ροζ ίχνη με έξι δάχτυλα κοντά στην τραπεζαρία και γιατί συνέβη αυτό.

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

Παράδειγμα 6.6. Χρήση ετικέτας

Παράδειγμα 6.7. Χρήση

aside document.createElement("aside");

document.createElement("άρθρο");

στην άκρη ( φόντο: #f0f0f0; /* Χρώμα φόντου */ πλήρωση: 10 εικονοστοιχεία; /* Περιθώρια */ πλάτος: 200 εικονοστοιχεία; /* Πλάτος πλευρικής γραμμής */ float: δεξιά; /* Αναδίπλωση αριστερά */ ) άρθρο ( περιθώριο-δεξιά: 240 εικονοστοιχεία ; /* Δεξιά εσοχή */ εμφάνιση: /* Στοιχείο μπλοκ */ )

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

Χρησιμοποιείται για την ομαδοποίηση οποιωνδήποτε στοιχείων, για παράδειγμα, εικόνων και λεζάντων (παράδειγμα 6.8).

Παράδειγμα 6.8. Χρήση

Παράδειγμα 6.6. Χρήση ετικέτας

figure document.createElement("figure");

document.createElement("figcaption");

σχήμα ( φόντο: #5f6a72; /* Χρώμα φόντου */ padding: 10 px; /* Περιθώρια γύρω από */ εμφάνιση: μπλοκ; /* Στοιχείο μπλοκ */ πλάτος: 150 px; /* Πλάτος */ float: αριστερά; /* Τα μπλοκ είναι σε γραμμή οριζόντια */ περιθώριο: 0 10 εικονοστοιχεία 10 εικονοστοιχεία 0 /* Επένδυση */ στοίχιση στο κέντρο */ ) figcaption ( χρώμα: #fff; /* Χρώμα κειμένου */ )

Καθεδρικός Ναός Αγίας Σοφίας

Πολωνική εκκλησία

Περιέχει μια περιγραφή για την ετικέτα. Η ετικέτα πρέπει να είναι το πρώτο ή το τελευταίο στοιχείο στην ομάδα.

Παράδειγμα 6.6. Χρήση ετικέτας

Καθορίζει το «υποσέλιδο» μιας τοποθεσίας ή ενότητας που συνήθως περιέχει το όνομα του συντάκτη, την ημερομηνία του εγγράφου, την επαφή και τις νομικές πληροφορίες (παράδειγμα 6.9).

Παράδειγμα 6.9. Χρήση

υποσέλιδο Προσωπική ιστοσελίδα της Kristina Vetrova Καλώς ορίσατε!

Χαίρομαι που σας καλωσορίζω στην ιστοσελίδα μου.

Πνευματικά δικαιώματα Kristina Vetrova

Καθορίζει την "κεφαλίδα" ενός ιστότοπου ή μιας ενότητας.

Παράδειγμα 6.6. Χρήση ετικέτας

Χρησιμοποιείται για την ομαδοποίηση επικεφαλίδων ιστοσελίδων ή ενοτήτων (Παράδειγμα 6.10).

Παράδειγμα 6.10. Χρήση

hgroup Kristina Vetrova Προσωπική ιστοσελίδα

Παράδειγμα 6.6. Χρήση ετικέτας

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

Παράδειγμα 6.11. Χρήση

nav Cheburashka και ο κροκόδειλος Gena Cheburashka | Γονίδιο |

Παράδειγμα 6.6. Χρήση ετικέτας

Shapoklyak | Lariska Καλώς ορίσατε!

Καθορίζει μια ενότητα ενός εγγράφου, η οποία μπορεί να περιλαμβάνει επικεφαλίδες, κεφαλίδα, υποσέλιδο και σώμα (Παράδειγμα 6.12). Επιτρέπεται η ένθεση μιας ετικέτας μέσα σε μια άλλη.

Παράδειγμα 6.12. Χρήση

τμήμα φιλμ Πολυπροπυλένιο

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

Καλή γλώσσα Η ιστορία είναι για το πώς έγινε ένα στούντιο για τη μελέτη της Εσπεράντος, ενώ πάνω από αυτό, στη βεράντα, υπήρχε ένα στούντιο φάρσας όπου έλεγαν αστεία και τι βγήκε από αυτό. 8601. Παραδείγματα σχεδίασης δίνονται στον πίνακα. 6.1.

Κάθε μονάδα έχει το δικό της δεδομένης μορφήςκαι περιορισμούς.

• Το έτος προσδιορίζεται με τέσσερα ψηφία (1860).
• Μήνας - διψήφιο (01 - Ιανουάριος, 02 - Φεβρουάριος, 12 - Δεκέμβριος).
• Ημέρα - δύο αριθμοί από 01 έως 31.
• Ώρα - δύο ψηφία από 00 έως 23.
• Τα λεπτά είναι διψήφια από το 00 έως το 59.
• Τα δευτερόλεπτα είναι διψήφια από το 00 έως το 59.
• Ζώνη ώρας - ώρες και λεπτά, που υποδεικνύονται με σύμβολο συν ή πλην.

Η ημερομηνία και η ώρα χωρίζονται με κεφαλαία γράμματα Λατινικό γράμμαΤ. Εάν είναι απαραίτητο, η ζώνη ώρας γράφεται μετά την ώρα με πρόσημο συν ή πλην. Για παράδειγμα, για τη Μόσχα η ζώνη ώρας θα είναι +03:00.

Παράδειγμα 6.13. Χρήση

Παράδειγμα 6.6. Χρήση ετικέτας

φορά

1957-10-04 εκτοξεύτηκε για πρώτη φορά τεχνητός δορυφόροςΓη.

1960-08-19 η πρώτη πτήση σκύλων στο διάστημα.

1961-04-12 η πρώτη επανδρωμένη πτήση στο διάστημα.

16-06-1963 η πρώτη πτήση γυναίκας αστροναύτη.

1969-07-21 άνθρωπος προσγειώνεται στο φεγγάρι.

Το πρότυπο HTML5 είναι μια γλώσσα για τη δομή και την παρουσίαση υλικών στο Διαδίκτυο, η οποία εισήχθη και προτάθηκε για χρήση το 2014. Αυτή τη στιγμή, σχεδόν όλα τα προγράμματα περιήγησης υποστηρίζουν τις περισσότερες από τις καινοτομίες της HTML5, αλλά μην ξεχνάτε ότι η ανάπτυξη της γλώσσας συνεχίζεται και η Κοινοπραξία Παγκόσμιος Ιστόςσυνεχίζει να αλλάζει και να βελτιώνει την πέμπτη έκδοση.

Σημειώστε ότι ξεκινώντας από την πέμπτη έκδοση, η HTML5 παρουσιάζεται όχι μόνο ως γλώσσα δόμησης, αλλά και ως γλώσσα παρουσίασης, η οποία αντικατοπτρίζεται στην σημασιολογική διάταξη, δηλ. Η HTML χρησιμοποιείται πλέον με νέο τρόπο.

Η υιοθέτηση του προτύπου HTML5 οδήγησε σε μείωση της μεταβλητότητας υπάρχουσες τεχνολογίεςδιατάξεις. Ναι, μέχρι αυτό το πρότυποΗ έκδοση 4.01 HTML και τα πρότυπα XHTML 1.0 και 1.1 χρησιμοποιήθηκαν ευρέως, με αποτέλεσμα οι σελίδες να παρουσιάζονται με ένα μείγμα από αυτές τις τεχνολογίες, γεγονός που δυσκόλεψε το πρόγραμμα περιήγησης να ερμηνεύσει τις σελίδες Ένας νέος τύπος doctype εισήχθη για το πρότυπο HTML5:

Ας δούμε τις κύριες αλλαγές που πρέπει να ληφθούν υπόψη πρώτα:

σύμφωνα με την HTML5, γλώσσα htmlείναι ανεξάρτητη από πεζά γράμματα, επομένως οι ετικέτες μπορούν να γραφτούν με οποιονδήποτε συνδυασμό πεζών και κεφαλαίων γραμμάτων: , , — αυτοί οι συλλαβισμοί είναι σωστές και ισοδύναμες.

Το html5 συνδυάζει τις δύο τεχνολογίες html και xhtml, με αποτέλεσμα να εξαλείφεται η δυνατότητα μικτών κανόνων κωδικοποίησης. Εάν νωρίτερα ήταν δυνατό να συναντήσετε ορθογραφία μη ζευγαρωμένων ετικετών:
έτσι και

έτσι και

στη συνέχεια στο πρότυπο html5 σωστή ορθογραφίαείναι:

Αλλαγές σε ετικέτες: παρωχημένα και προσαρμοσμένα στοιχεία

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

Υπερσύνδεσμος

Παράδειγμα

που σε προηγούμενα πρότυπα προκαλούσε σφάλματα γιατί πεζό στοιχείοτυλιγμένο σε μορφή μπλοκ, έγκυρο σε HTML5.

Ένα από τα πιο δημοφιλείς ερωτήσειςαρχάριοι σχεδιαστές διάταξης είναι: «Πώς να δημιουργήσετε μια υπερσύνδεση προς μπλοκ div? " Και η πιο συνηθισμένη απάντηση ήταν: «Χρησιμοποιήστε JS». Όπως μπορείτε να δείτε από το παράδειγμα, στην HTML5 μπορείτε απλά να βάλετε τα απαραίτητα μπλοκ μέσα σε έναν υπερσύνδεσμο.

Ετικέτες και

Η HTML 5 έφερε πίσω ετικέτες (κάνει τη γραμματοσειρά έντονη) και (κυρτά γράμματα). ΣΕ σύγχρονη ερμηνεία, αυτές οι ετικέτες χρησιμεύουν μόνο για οπτικό σχεδιασμό και δεν φέρουν κανένα σημασιολογικό νόημα.

Ετικέτα μικρό

Η ετικέτα χρησιμοποιήθηκε σε προηγούμενες εκδόσεις για να ορίσετε ένα μέγεθος γραμματοσειράς μικρότερο από το κύριο κείμενο (το αντίθετο ήταν η μεγάλη ετικέτα - η οποία αύξησε το μέγεθος της γραμματοσειράς). Διαφορετικές οθόνες σε διαφορετικά προγράμματα περιήγησηςοδήγησε στη μετατόπιση αυτού του στοιχείου span tag, το οποίο είναι πολύ πιο βολικό στη χρήση.

Στην HTML5, η ετικέτα επανήλθε, αλλά η ερμηνεία της άλλαξε, τώρα χρησιμοποιείται για την αναδίπλωση κειμένου που πρέπει να υπάρχει στη σελίδα, αλλά δεν πρέπει να αποσπά την προσοχή από το κύριο περιεχόμενο και πρέπει να είναι όσο πιο δυσδιάκριτο γίνεται. Αναλογικό – κείμενο που βασίζεται σε υποσημειώσεις ή διάφορες συνθήκεςμερίδια Επίσης, μειώνει οπτικά το μέγεθος της γραμματοσειράς του κειμένου που αναδιπλώνεται.

ετικέτα διεύθυνσης

Διαφορετικός προηγούμενες εκδόσειςΗ HTML στην πέμπτη έκδοση χρησιμοποιείται μόνο για να υποδείξει τα στοιχεία επικοινωνίας του συγγραφέα του υλικού. Μην χρησιμοποιείτε την ετικέτα για να υποδείξετε στοιχεία επικοινωνίας στον ιστότοπο του οργανισμού (για αυτό θα πρέπει να χρησιμοποιούνται μικρομορφές και μικροδεδομένα).

Όπως ήδη αναφέρθηκε, εντός αυτό το μάθημαΕίναι αδύνατο να ληφθούν υπόψη όλες οι αλλαγές στις ετικέτες, παραπάνω εξετάσαμε τις προσαρμοσμένες ετικέτες, τώρα παραθέτουμε τις ξεπερασμένες:

• , αντικαθίσταται από μια ετικέτα (χρησιμοποιείται για την ενσωμάτωση αντικειμένων).
• — αντικαταστάθηκε με ετικέτα (χρησιμοποιείται για συντομογραφίες).
• — αντικαταστάθηκε με ετικέτα (για ενσωμάτωση του προγράμματος αναπαραγωγής στη σελίδα).
• - αντικαταστάθηκε από ;
• , - αντικαταστάθηκε με ετικέτες AND (για την εισαγωγή λιστών προγραμμάτων και κωδικών).
• - αντικαταστάθηκε από

Ιδιότητες μορφοποίησης κειμένου , , , - έχουν αφαιρεθεί, το CSS θα πρέπει να χρησιμοποιηθεί για στυλ.

Υπενθυμίζουμε ότι πολλές ετικέτες παλαιού τύπου υποστηρίζονται από προγράμματα περιήγησης, αλλά οι σελίδες με ετικέτες παλαιού τύπου δεν θα περάσουν την επικύρωση. Γι' αυτό, αφού ολοκληρώσετε τη διάταξη της σελίδας, θα πρέπει να την ελέγξετε με έναν επικυρωτή.

Το HTML 5 και το CSS 3 πρόσθεσαν έναν τεράστιο αριθμό νέων ετικετών και ιδιοτήτων στη διάταξη. Ελέγξτε τις δυνατότητες κινούμενων σχεδίων με νέο CSS 3 ακίνητα.

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

Ας δούμε την τυπική δομή μιας σύγχρονης ιστοσελίδας. Υπάρχουν πολλά μπλοκ που υπάρχουν στον κώδικα με τον ένα ή τον άλλο τρόπο - αυτή είναι η "κεφαλίδα", η γραμμή πλοήγησης (πλοήγηση), η πλαϊνή γραμμή (πλευρική γραμμή), η κύρια ενότητα περιεχομένου (περιεχόμενο), το "υποσέλιδο" του ιστότοπου (υποσέλιδο) και μερικοί άλλοι. Εάν χρησιμοποιείται διάταξη μπλοκ(και οι πίνακες είναι του περασμένου αιώνα, δεν έχω δει διάταξη πίνακα σε σύγχρονους ιστότοπους για πολύ καιρό), τότε αυτά τα μπλοκ εμφανίζονται χρησιμοποιώντας την ετικέτα div.

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

τμήμα

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

επί κεφαλής

Καθορίζει την "κεφαλίδα" ενός ιστότοπου ή μιας ενότητας συνήθως ο τίτλος βρίσκεται εκεί. Τίποτα το ιδιαίτερο

nav

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

υποσέλιδο

«Υπόγειο» τοποθεσίας ή τμήματος. Πλήρες αναλογικό της ετικέτας κεφαλίδας

άρθρο

Καθορίζει το κείμενο του περιεχομένου ενός άρθρου, την καταχώριση ιστολογίου και άλλα παρόμοια.

κατά μέρος

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

Ο παρακάτω κώδικας απεικονίζει τη χρήση δομικών ετικετών HTML5.

Όνομα ιστολογίου

• Σπίτι
• Ενότητες
• Συγγραφέας
• Επαφές

Επικεφαλίδα Lorem ipsum... Δεύτερος τίτλος Lorem ipsum... Τρίτος τίτλος Lorem ipsum... Πνευματικά δικαιώματα και όλα αυτά

Λάβετε υπόψη ότι όλες οι ετικέτες δομής απαιτούν ετικέτα κλεισίματος. Παρεμπιπτόντως, η ετικέτα κλεισίματος /article, για παράδειγμα, είναι πολύ πιο ενημερωτική από το /div. Μπορείτε να δείτε αμέσως τι είναι πού. Αυτός ο κώδικας διαβάζεται πολύ πιο εύκολα. Τουλάχιστον για αυτό το λόγο αξίζει να εφαρμοστεί σε υπάρχοντα έργα ή να προγραμματιστεί για μελλοντικά.

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

Document.createElement("κεφαλίδα"); document.createElement("footer"); document.createElement("τμήμα"); document.createElement("aside"); document.createElement("nav"); document.createElement("άρθρο");

Το σενάριο δημιουργεί στοιχεία DOM και ο IE τα χειρίζεται σωστά.
Μια μικρή προσθήκη - το HTML5 από προεπιλογή ερμηνεύει οποιοδήποτε σενάριο ως type="text/javascript" , επομένως δεν χρειάζεται να το υποδείξετε συγκεκριμένα. Κάτι που πάλι κάνει τον κώδικα απλούστερο και ευκολότερο. Πλήρη πλεονεκτήματα Άλλα προγράμματα περιήγησης λειτουργούν καλά, το μόνο είναι ο Firefox που υποστηρίζει πλήρως ετικέτες από την έκδοση 4.0, αλλά από την έκδοση 3 λειτουργεί και τις εμφανίζει σωστά.
Αυτό είναι όλο για σήμερα. Αν σε ενδιαφέρει, εδώ έγραψα για την εφαρμογή της νέας προδιαγραφής στην πράξη. Μείνετε σε επαφή - θα είναι ενδιαφέρον.