Σωστή δομή του εγγράφου html5. Προεπισκόπηση HTML5. έως, που αντιπροσωπεύει μια δομική επικεφαλίδα στην περίπτωση που ο τίτλος έχει πολλά επίπεδα, όπως υποτίτλους, εναλλακτικούς τίτλους ή συνθήματα. Κατάχρηση
Σήμερα θα μιλήσουμε για τη σημασιολογία στην HTML5. Έχω ήδη γράψει μια σύντομη αναθεώρηση σχετικά με το . Σας συνιστώ να εξοικειωθείτε με αυτό πριν διαβάσετε αυτό το άρθρο. Τώρα θα εξετάσουμε αυτό το ζήτημα με περισσότερες λεπτομέρειες, σχετικά με το πώς να συνθέσουμε σωστά και με ικανοποίηση τη σημασιολογική δομή ενός εγγράφου HTML5.
Σε αυτό το άρθρο θα δημιουργήσουμε σταδιακά μια σελίδα HTML και θα τη διακοσμήσουμε με σημασιολογικές ετικέτες HTML5.
Σχέδιο - Σημασιολογική δομήγια σελίδα HTML5.
DOCTYPE και μετα-ετικέτες στον τίτλο της σελίδαςΑς ξεκινήσουμε με πρότυπο πρότυποέγγραφο HTML5 και προσθέστε μετα-ετικέτεςστο κεφάλι:
Τίτλος σελίδας
Πρόσθεσα μια ετικέτα που είναι υπεύθυνη λέξεις-κλειδιά. Και η ετικέτα που είναι υπεύθυνη για την περιγραφή της σελίδας. Για Βελτιστοποίηση SEOαυτές οι ετικέτες απαιτούνται. Είναι επίσης απαραίτητο να συμπληρώσετε σωστά την ετικέτα. Τίτλος σελίδαςπρέπει να είναι μοναδικό για ολόκληρο τον ιστότοπο και να περιέχει στον τίτλο ολόκληρη την ουσία της σελίδας για την οποία έχει καθοριστεί.
Ας πάμε παρακάτω. Η HTML5 έχει νέες ετικέτες που χρησιμοποιούνται για να κάνουν σημασιολογική σήμανσηέγγραφο. Αυτές είναι ετικέτες κεφαλίδας, πλοήγησης, κύριας, άρθρου, κατά μέρος, υποσέλιδου κ.λπ. Όσον αφορά την εμφάνιση, λειτουργούν με τον ίδιο τρόπο όπως οι κανονικές ετικέτες, δηλαδή είναι στοιχεία μπλοκ. Αλλά αν δεν έχει σημασιολογικό φορτίο, τότε το header, το nav, το main και άλλα θα πρέπει να χρησιμοποιούνται μόνο με νόημα.
Τίτλος σελίδαςΗ κεφαλίδα της σελίδας μορφοποιείται στην ετικέτα κεφαλίδας. Λάβετε υπόψη ότι ο τίτλος της σελίδας γράφεται χρησιμοποιώντας την ετικέτα h1.
Τίτλος Ιστοσελίδας
Αν έχουμε και ένα σλόγκαν δίπλα στον τίτλο, τότε το τοποθετούμε σε p, div ή span.
Τίτλος Ιστοσελίδας
σλόγκαν του ιστότοπου
Μια σημείωση για την ετικέτα H1
Θα πρέπει να σημειωθεί ότι στην HTML5 η ετικέτα H1 χρησιμοποιείται για να υποδείξει τον τίτλο του κοντέινερ στο οποίο βρίσκεται (αυτό θα μπορούσε να είναι κεφαλίδα, ενότητα, άρθρο κ.λπ.)
Πριν από την εμφάνιση των ετικετών HTML5, η σημασιολογία ήταν κάπως διαφορετική και διαφορετική. Έτσι στην HTML4 θα μπορούσε να υπάρχει μόνο μία επικεφαλίδα H1 ανά σελίδα! Κατά κανόνα, αυτός ήταν ο τίτλος του άρθρου ή ο τίτλος της σελίδας (για παράδειγμα, εάν πρόκειται για σελίδα κατηγορίας στην οποία εμφανίζονται πολλά άρθρα.) Το H2 χρησιμοποιήθηκε για υποτίτλους ή για ενότητες Κύριο άρθρο. H3 για υποενότητες και ούτω καθεξής.
Πλοήγηση στη σελίδαΟ σχεδιασμός της κύριας πλοήγησης του ιστότοπου θα πρέπει να περιέχεται στην ετικέτα πλοήγησης. Θα πρέπει επίσης να θυμάστε ότι θεωρείται καλή πρακτική να σχεδιάζετε πλοήγηση με στοιχεία λίστας.
- Σπίτι
- Χαρτοφυλάκιο
- Εκθεσιακός χώρος
- Επαφές
Το κύριο περιεχόμενο της σελίδας μορφοποιείται στην κύρια ετικέτα. Αυτό μπορεί να είναι ένα άρθρο ή πολλά άρθρα προεπισκόπησης εάν μιλάμε γιασχετικά με μια σελίδα ιστολογίου με πολλές καταχωρήσεις. Δεν μπορείτε να τοποθετήσετε πλαϊνή γραμμή, κεφαλίδα σελίδας, υποσέλιδο ή κύρια πλοήγησηστην κύρια ετικέτα!
...περιεχόμενο της κύριας σελίδας...
Σχεδιασμός άρθρουΗ ετικέτα άρθρου χρησιμοποιείται για την αναδίπλωση άρθρων. Γενικά, αυτή η ετικέτα περιέχει ένα μπλοκ περιεχομένου που μπορεί να αφαιρεθεί από το περιβάλλον της σελίδας και να χρησιμοποιηθεί ξεχωριστά αλλού. Αυτό θα μπορούσε να είναι ένα άρθρο (το πλήρες κείμενο του άρθρου ή μια προεπισκόπηση), μια ανάρτηση στο φόρουμ κ.λπ.
Στο παρακάτω παράδειγμα, έδειξα τη σχεδίαση του άρθρου στο πλαίσιο, μέσα στην κύρια ετικέτα. Το άρθρο έχει ένα μπλοκ κεφαλίδας με τον τίτλο του άρθρου. Η ημερομηνία δημοσίευσης του άρθρου καθορίζεται από μια ειδική ετικέτα ώρας, η οποία εμφανίζεται ως κανονικό ενσωματωμένο στοιχείο. Η χρονική ετικέτα έχει ένα ειδικό χαρακτηριστικό στο οποίο ο χρόνος δημοσίευσης πρέπει να καθοριστεί σε μορφή μηχανής. Αυτό μπορεί να είναι απλώς datetime="2015-09-30" ή με ώρες λεπτά και δευτερόλεπτα datetime="2015-09-30T15:25:55" . Η παράμετρος pubdate υποδεικνύει ότι το άρθρο δημοσιεύτηκε την ίδια στιγμή που γράφτηκε. Εάν πρόκειται για είδηση, τότε μπορεί η ώρα ειδήσεων να είναι μία και η ώρα δημοσίευσης διαφορετική, γι' αυτό πρέπει να καθορίσετε την ετικέτα ώρας δύο φορές και να βάλετε το pubdate μόνο στην ετικέτα όπου υποδεικνύεται η ώρα δημοσίευσης.
... Τίτλος άρθρου 30 Σεπτεμβρίου Υπότιτλος άρθρου
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam, soluta sunt, aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde;
Από το παραπάνω παράδειγμα, μπορείτε να δείτε ότι οι ετικέτες κεφαλίδας και υποσέλιδου χρησιμοποιήθηκαν μέσα στο άρθρο για να τονίσουν τον τίτλο και το υποσέλιδο του άρθρου.
Πλαϊνή γραμμή ή στήλη με γραφικά στοιχείαΓια κάθε μεμονωμένο στοιχείο πλαϊνής γραμμής χρησιμοποιούμε ένα μπλοκ κατά μέρος. Μέσα σε αυτό, ο τίτλος μορφοποιείται με την ετικέτα h1. Έτσι, μια στήλη πλευρικής γραμμής μπορεί να μοιάζει με αυτό:
Τίτλος widget... Οι τελευταίες σημειώσεις... Δημοφιλή σχόλια ...
Ετικέτα ενότηταςΗ ετικέτα ενότητας χρησιμοποιείται για την αναπαράσταση μιας ομάδας ή μιας ενότητας θεματικά σχετικού περιεχομένου. Η χρήση της είναι παρόμοια με ένα άρθρο με τη βασική διαφορά ότι το περιεχόμενο ενός στοιχείου επιτρέπεται να είναι χωρίς νόημα εκτός του περιβάλλοντος της ίδιας της σελίδας. Συνιστάται η χρήση ετικετών ( – ) για να υποδείξετε το θέμα της ενότητας.
Για να δώσετε ένα παράδειγμα του άρθρου που διαβάζετε τώρα, θα μπορούσατε να τυλίξετε κάθε παράγραφο σε μια ετικέτα. Για παράδειγμα, η ετικέτα ενότητας μπορεί να χρησιμοποιηθεί για την επισήμανση μπλοκ περιεχομένου σε μια σελίδα προορισμού. Ακούγεται παρόμοιο με τον ορισμό στοιχείο div, το οποίο χρησιμοποιείται συχνά ως δοχείο για περιεχόμενο. Η διαφορά είναι ότι ένα div δεν έχει σημασιολογική σημασία και δεν λέει τίποτα για το περιεχόμενο μέσα σε αυτό. Η ετικέτα ενότητας, αντίθετα, χρησιμοποιείται για να υποδείξει ξεκάθαρα ότι το περιεχόμενο σε αυτήν σχετίζεται ως προς το νόημα. Μπορείτε να αντικαταστήσετε μερικά από τα δικά σας ετικέτες divστην ενότητα , αλλά απαντάτε πάντα στον εαυτό σας στην ερώτηση: "Σχετίζεται αυτό το περιεχόμενο μεταξύ τους ή όχι;"
Ένα παράδειγμα χρήσης της ετικέτας ενότητας σε μια λίστα με πόλεις:
Μια εκδήλωση εκτός πόλεων
Ελάτε μαζί μας σε αυτές τις πόλεις το 2010.
ΣιάτλΑκολουθήστε τον δρόμο με τα κίτρινα τούβλα.
ΒοστώνηΑυτό είναι το Beantown για τους φίλους του.
ΜινεάποληΕίναι τόσο ωραία.
Δεν παρέχεται κατάλυμα.Υποσέλιδο ιστότοπου - ΥποσέλιδοΤο υποσέλιδο του ιστότοπου έχει σχεδιαστεί με την ετικέτα
© 2015 ιστότοπος Πνευματικά δικαιώματα
συμπέρασμαΜπορείτε να χρησιμοποιήσετε το εργαλείο περιγράμματος HTML5 για να ελέγξετε τη δομή της σελίδας. Δείχνει τη δομή της σελίδας κατά μπλοκ και επικεφαλίδες.
Η σημασιολογία στην HTML5 δεν περιορίζεται στις ετικέτες που δίνονται παραπάνω στο άρθρο. Ωστόσο, χρησιμοποιώντας τα παραπάνω παραδείγματα, μπορείτε να ανανεώσετε τη σήμανση και να κάνετε τον ιστότοπό σας πιο φιλικό στις μηχανές αναζήτησης, κάτι που θα έχει ως αποτέλεσμα υψηλότερη κατάταξη για τον ιστότοπό σας στα αποτελέσματα αναζήτησης.
Για να συνεχίσετε αυτό το θέμα, μπορείτε να εξερευνήσετε άλλες νέες ετικέτες HTML5. Καθώς και μικρομορφές για το σχεδιασμό και τη δόμηση δεδομένων, όπως το schema.org
Μια σημαντική σημείωση σχετικά με τη χρήση ετικετών HTML5. Η προδιαγραφή δεν καθορίζει αυστηρούς κανόνες για τη χρήση σημασιολογικών ετικετών· παρέχει μόνο συστάσεις για τη χρήση τους. Εάν δεν καταλαβαίνετε ή δεν ξέρετε πού και ποια ετικέτα HTML5 να χρησιμοποιήσετε, είναι καλύτερα να χρησιμοποιήσετε ένα div για να μην βλάψετε ή σπάσετε τη δομή του εγγράφου.
Άρθρα και υλικά
Τα σημασιολογικά στοιχεία HTML5 περιγράφουν ξεκάθαρα το νόημα ή τον σκοπό τους τόσο για προγράμματα περιήγησης όσο και για προγραμματιστές ιστού.
Πριν από την εμφάνιση του προτύπου HTML5, όλη η σήμανση σελίδων γινόταν κυρίως με τη χρήση στοιχείων, στα οποία εκχωρήθηκαν κλάσεις ή αναγνωριστικά αναγνωριστικών για τη σαφήνεια της σήμανσης (για παράδειγμα, ). Με τη βοήθειά τους, κεφαλίδες, υποσέλιδα, πλαϊνές γραμμές, πλοήγηση και πολλά άλλα τοποθετήθηκαν σε ένα έγγραφο HTML.
Το πρότυπο HTML5 εισήγαγε νέα στοιχεία για τη δόμηση, την ομαδοποίηση περιεχομένου και τη σήμανση περιεχομένου κειμένου. Νέα σημασιολογικά στοιχεία κατέστησαν δυνατή τη βελτίωση της δομής της ιστοσελίδας, προσθέτοντας σημασιολογικό νόημα στο περιεχόμενο που περιέχεται σε αυτά (ήταν, έγινε). Δεν υπάρχουν κανόνες για την εμφάνιση της εμφάνισης των στοιχείων, επομένως τα στοιχεία μπορούν να διαμορφωθούν όπως θέλετε. Διαθέσιμο για όλα τα είδη.
Σύμφωνα με την προδιαγραφή HTML5, κάθε στοιχείο ανήκει σε μια συγκεκριμένη (μηδενική ή μεγαλύτερη) κατηγορία. Καθένα από αυτά ομαδοποιεί στοιχεία με παρόμοια χαρακτηριστικά. Διακρίνονται οι ακόλουθες γενικές κατηγορίες:
- Meta περιεχόμενο
- Ροή περιεχομένου
- Περιεχόμενο ενότητας
- Περιεχόμενο κεφαλίδας
- Περιεχόμενο κειμένου
- Ενσωματωμένο περιεχόμενο
- Διαδραστικό περιεχόμενο
Κατηγορίες Περιεχομένου: Περιεχόμενο ροής.
Ομάδες εισαγωγικά στοιχεία και στοιχεία πλοήγησης, προαιρετικά. Μπορεί να περιέχει επικεφαλίδες, να αναδιπλώνει τα περιεχόμενα μιας ενότητας σελίδας, μια φόρμα αναζήτησης ή ένα λογότυπο. Ένα έγγραφο HTML μπορεί να περιέχει πολλά στοιχεία ταυτόχρονα και μπορούν να βρίσκονται σε οποιοδήποτε μέρος της σελίδας.
Περιγραφή τοποθεσίας
- Σχετικά με
- Δικαστήριο
- Κατεβάστε
Ένα στοιχείο δεν μπορεί να τοποθετηθεί μέσα σε στοιχεία ή ένα άλλο στοιχείο.
2. ΣτοιχείοΚατηγορίες περιεχομένου:
Σχεδιασμένο για να δημιουργεί ένα μπλοκ πλοήγησης για μια ιστοσελίδα ή έναν ολόκληρο ιστότοπο, αλλά δεν χρειάζεται να βρίσκεται μέσα στο . Μπορεί να υπάρχουν πολλά στοιχεία σε μια σελίδα. Δεν αντικαθιστά ετικέτες
- ή, απλώς τα πλαισιώνει. Δεν χρειάζεται να αναδιπλωθούν όλες οι ομάδες συνδέσμων σε μια σελίδα, αυτό το στοιχείο προορίζεται κυρίως για ενότητες που αποτελούνται από κύρια μπλοκ πλοήγησης.
- Συμβατό με τα υπάρχοντα προγράμματα περιήγησης.
- Οι συγγραφείς είναι ήδη εξοικειωμένοι με τη σύνταξη.
- Η επιεικής σύνταξης δεν θα οδηγήσει σε Κίτρινη Οθόνη Θανάτου εάν παρουσιαστεί τυχαίο σφάλμα.
- Βολική σύνταξη συντομογραφίας, για παράδειγμα, οι συγγραφείς μπορούν να παραλείψουν ορισμένες ετικέτες και τιμές χαρακτηριστικών.
- Η αυστηρή σύνταξη της XML ενθαρρύνει τους συγγραφείς να γράφουν σωστό κώδικα και για ορισμένους συγγραφείς είναι ευκολότερο να διατηρηθεί.
- Ενσωματώνεται άμεσα με άλλες τεχνολογίες XML όπως το SVG και το MathML.
- Επιτρέπει τη χρήση ενός επεξεργαστή XML, τον οποίο ορισμένοι συγγραφείς χρησιμοποιούν στην εργασία τους.
- Οι Διαφορές από την HTML 4 περιγράφουν τις αλλαγές που έχουν συμβεί έκτοτε προηγούμενη έκδοση HTML.
- Οι Αρχές σχεδίασης HTML συζητούν τις αρχές που χρησιμοποιούνται για τη λήψη αποφάσεων και θα σας βοηθήσουν να κατανοήσετε τη λογική πίσω από πολλές τρέχουσες αποφάσεις σχεδιασμού.
- Ο Οδηγός προγραμματιστή Ιστού για την HTML 5 έχει γραφτεί για να βοηθήσει τους σχεδιαστές και τους προγραμματιστές ιστού να κατανοήσουν όλα όσα χρειάζεται να γνωρίζουν για να γράψουν κατάλληλα έγγραφα HTML5 και να εφαρμόσουν αυτές τις αρχές στην πράξη.
- Meta,
- Επί κεφαλής,
- Κείμενο,
- Ροή,
- Τμηματικός,
- Ενσωματωμένο
- Διαδραστικό.
Μπορείτε να χρησιμοποιήσετε περισσότερα από απλά στοιχεία λίστας ως στοιχεία γραμμής πλοήγησης:
...
Μπορείτε επίσης να προσθέσετε κεφαλίδες μέσα σε ένα στοιχείο:
...
3. ΣτοιχείοΚατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο ενοτήτων.
Χρησιμοποιείται για την ομαδοποίηση καταχωρήσεων - δημοσιεύσεων, άρθρων, καταχωρήσεων ιστολογίου, σχολίων. Είναι ένα ανεξάρτητο ξεχωριστό μπλοκ σχεδιασμένο για επαναχρησιμοποιήσιμο, κατά κανόνα, αρχίζει με τίτλο. Μπορεί να αντιγραφεί σε άλλες σελίδες του ιστότοπου και να περιέχει άλλα στοιχεία στο εσωτερικό του που σχετίζονται στενά ως προς το περιεχόμενο με το περιεχόμενο του εξωτερικού άρθρου. Εάν υπάρχει μόνο ένα άρθρο σε μια σελίδα με τίτλο και περιεχόμενο κειμένου, δεν χρειάζεται να αναδιπλωθεί με ένα . Συνιστάται η χρήση ενός στοιχείου μόνο εάν τα περιεχόμενα του στοιχείου καθορίζονται ρητά στο σχήμα του εγγράφου.
... Δημοσιεύτηκε στην κατηγορία ΜΟΥΣΙΚΗ. 0 σχόλια
4. ΣτοιχείοΚατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο ενοτήτων.
Ένα στοιχείο αντιπροσωπεύει μια γενική ενότητα ενός εγγράφου. Ομαδοποιεί θεματικό περιεχόμενο και συνήθως περιέχει έναν τίτλο. Δεν είναι μπλοκ περιτυλίγματος· για αυτούς τους σκοπούς είναι πιο κατάλληλο να χρησιμοποιήσετε το στοιχείο. Το περιεχόμενο μπορεί να είναι πίνακας περιεχομένων, ενότητες επιστημονικές δημοσιεύσεις, πρόγραμμα εκδήλωσης. Αρχική σελίδαο ιστότοπος μπορεί επίσης να χωριστεί σε ενότητες - μπλοκ γενικές πληροφορίες, νέα και επαφές. Συνιστάται η χρήση ενός στοιχείου μόνο εάν τα περιεχόμενα του στοιχείου καθορίζονται ρητά στο σχήμα του εγγράφου.
... ... ...
μέσαΜπορείτε να δημιουργήσετε μητρικά στοιχείαμε ένθετα στοιχεία, τα οποία περιέχουν ένα ή περισσότερα στοιχεία. Δεν χρειάζεται να διατάσσονται όλες οι σελίδες με αυτόν τον τρόπο, αλλά είναι ένας αποδεκτός τρόπος ένθεσης στοιχείων. Για παράδειγμα, η κύρια περιοχή περιεχομένου μιας σελίδας περιέχει δύο μπλοκ με άρθρα διαφορετικά θέματα. Μπορείτε να το τονίσετε αυτό τοποθετώντας κάθε άρθρο για το ίδιο θέμα μέσα στο στοιχείο
Σημειώσεις για τη φύση ... ... Ιστορικές σημειώσεις ... ...
5ο στοιχείοΚατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο ενοτήτων.
Ομαδοποιεί περιεχόμενο που σχετίζεται άμεσα με το περιβάλλον περιεχόμενο, αλλά που θα μπορούσε να θεωρηθεί ξεχωριστό (δηλαδή, η κατάργηση αυτού του αποκλεισμού δεν θα επηρεάσει την κατανόηση του κύριου περιεχομένου). Τις περισσότερες φορές, το στοιχείο τοποθετείται ως πλάγια στήλη (όπως στα βιβλία) και περιλαμβάνει μια ομάδα στοιχείων: , ψηφιακά δεδομένα, εισαγωγικά, διαφημιστικά μπλοκ, αρχειακά αρχεία. Δεν είναι κατάλληλο για μπλοκ που απλά τοποθετούνται στο πλάι.
... ...
.........
6. ΣτοιχείοΚατηγορίες Περιεχομένου: Περιεχόμενο ροής.
Αντιπροσωπεύει το υποσέλιδο της ενότητας ή του ριζικού στοιχείου που περιέχει. Συνήθως περιέχει πληροφορίες για τον συγγραφέα του άρθρου, πληροφορίες πνευματικών δικαιωμάτων κ.λπ. Όταν χρησιμοποιείται ως υποσέλιδο πλήρους σελίδας, το περιεχόμενο συμπληρώνεται με σημειώσεις πνευματικών δικαιωμάτων, συνδέσμους προς όρους χρήσης, στοιχεία επικοινωνίας, συνδέσμους προς σχετικό περιεχόμενο κ.λπ.
Μπορεί να υπάρχουν πολλά στοιχεία . σε ένα έγγραφο web. Κάθε σελίδα, όπως και κάθε άρθρο, μπορεί να έχει το δικό της στοιχείο· επιπλέον, μπορεί να τοποθετηθεί στο στοιχείο για να υποδείξει την πηγή της αναφοράς.
... @2014...
7. ΣτοιχείοΚατηγορίες Περιεχομένου: Περιεχόμενο ροής.
Χρησιμοποιείται για τον προσδιορισμό των στοιχείων επικοινωνίας του συγγραφέα/κατόχου ενός εγγράφου ή άρθρου. Για να υποδείξετε τον συγγραφέα του εγγράφου, η ετικέτα τοποθετείται μέσα στο στοιχείο, για να εμφανιστεί ο συγγραφέας του άρθρου - μέσα στην ετικέτα. Το πρόγραμμα περιήγησης συνήθως εμφανίζει πλάγιους χαρακτήρες.
Κατηγορίες Περιεχομένου: Περιεχόμενο ροής.
Το στοιχείο αντιπροσωπεύει το κύριο περιεχόμενο του εγγράφου (στοιχείο περιεχόμενο). Το περιεχόμενο μέσα στο στοιχείο πρέπει να είναι μοναδικό και να μην επαναλαμβάνεται σε όλα τα έγγραφα του ιστότοπου, όπως συνδέσμους πλοήγησης, πληροφορίες πνευματικών δικαιωμάτων, λογότυπα, φόρμες αναζήτησης (αν η φόρμα αναζήτησης είναι η κύρια λειτουργία του εγγράφου).
Ένα στοιχείο δεν μπορεί να είναι θυγατρικό στοιχείων όπως , , ή .
Σγουρόμαλλο σκυλάκι
Σχετικά με τη φυλή ποικιλίες Εμφάνιση ΧαρακτήραςΠνευματικά δικαιώματα © 2016 My dog.ru 9. ΣτοιχείοΚατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο ρίζας.
Το στοιχείο αντιπροσωπεύει αυτόνομο περιεχόμενο (προαιρετικά με τίτλο) που αποτελεί ξεχωριστό στοιχείο της κύριας ροής. Ένα στοιχείο μπορεί να μετακινηθεί από το κύριο περιεχόμενο του εγγράφου σε μια πλαϊνή γραμμή ή εφαρμογή χωρίς να επηρεαστεί η ροή του εγγράφου. Χρησιμοποιώντας το στοιχείο, μπορείτε να προσθέσετε σύντομες περιγραφές σε εικόνες, φωτογραφίες, διαγράμματα, αποσπάσματα κώδικα κ.λπ.
Φθινοπωρινό δάσος
Το στοιχείο είναι ένα στοιχείο μπλοκ, το πλάτος του καταλαμβάνει ολόκληρο το πλάτος του μπλοκ κοντέινερ μείον τα εξωτερικά περιθώρια:
10. ΣτοιχείοΤο στοιχείο είναι απόγονος του στοιχείου και δεν ανήκει σε καμία κατηγορία περιεχομένου. Το στοιχείο είναι σε επίπεδο μπλοκ, το πλάτος είναι ίσο με το πλάτος του στοιχείου, το προεπιλεγμένο ύψος είναι 18 εικονοστοιχεία.
11. ΣτοιχείοΚατηγορίες περιεχομένου:
Καθορίζει την ώρα (24 ώρες) ή την ημερομηνία σύμφωνα με το Γρηγοριανό ημερολόγιο, με πιθανή ένδειξη μετατόπισης ώρας και ζώνης ώρας. Το κείμενο που περικλείεται σε αυτήν την ετικέτα δεν έχει στυλ από το πρόγραμμα περιήγησης. Η ετικέτα διαθέτει ένα χαρακτηριστικό datetime, το περιεχόμενο του οποίου υποδεικνύει τι θα δει ο χρήστης στην οθόνη του υπολογιστή του:
Για να διαβάζεται αυτόματα η ημερομηνία, πρέπει να έχει τη μορφή ΕΕΕΕ-ΜΜ-ΗΗ. Η ώρα, η οποία μπορεί επίσης να καθοριστεί, καθορίζεται στη μορφή ΩΩ:ΛΛ με την προσθήκη ενός διαχωριστικού προθέματος T (χρόνος):
12. ΣτοιχείοΚατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο κειμένου.
Το κείμενο που τοποθετείται μέσα σε μια ετικέτα επισημαίνεται από προεπιλογή κίτρινος(το χρώμα φόντου και το χρώμα της γραμματοσειράς στο επιλεγμένο μπλοκ μπορούν να αλλάξουν ορίζοντας συγκεκριμένα στυλ CSS). Με τη χρήση αυτής της ετικέταςΜπορείτε να επισημάνετε σημαντικό περιεχόμενο καθώς και λέξεις-κλειδιά.
Κατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο κειμένου.
Διαχωρίζει ένα κομμάτι κειμένου που πρέπει να απομονωθεί από το υπόλοιπο κείμενο για αμφίδρομη μορφοποίηση κειμένου. Χρησιμοποιείται για κείμενα που γράφτηκαν ταυτόχρονα σε γλώσσες που διαβάζονται από αριστερά προς τα δεξιά και από δεξιά προς τα αριστερά.
Κατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο κειμένου.
Μεμονωμένη ετικέτα, δείχνει στο πρόγραμμα περιήγησης πού να προσθέσει ένα διάλειμμα μακριά γραμμήαν είναι απαραίτητο.
Κατηγορίες περιεχομένου: περιεχόμενο ροής, περιεχόμενο κειμένου.
Το στοιχείο σάς επιτρέπει να επισημάνετε ένα ή περισσότερα στοιχεία της κατηγορίας περιεχομένου κειμένου χρησιμοποιώντας έναν σχολιασμό ρουμπινιού. Ο σχολιασμός Ruby χρησιμοποιείται κυρίως στην τυπογραφία της Ανατολικής Ασίας ως οδηγός για την προφορά ή για να συμπεριλάβει άλλα χαρακτηριστικά. Το στοιχείο μπορεί να περιέχει:
— έναν ή περισσότερους κόμβους ή στοιχεία κειμένου.
— ένα ή περισσότερα στοιχεία , , καθένα από τα οποία προηγείται ή αμέσως ακολουθεί το στοιχείο .
Τα στοιχεία , , και δεν ανήκουν σε καμία κατηγορία περιεχομένου.
Το στοιχείο ορίζει το ένθετο κείμενό του ως το βασικό στοιχείο του σχολιασμού.
Το στοιχείο εμφανίζει έναν σχολιασμό για το κείμενο πάνω ή κάτω από αυτό.
Το στοιχείο επισημαίνει το ένθετο κείμενο ως πρόσθετο σχολιασμό.
Το στοιχείο εμφανίζει εναλλακτικό κείμενο εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το στοιχείο.
Λάχλαν Χαντ
Πρωτότυπο άρθρο στα αγγλικά: http://www.alistapart.com/articles/previewofhtml5
Εικονογράφηση: Kevin Cornell
Μετάφραση: Vlad Merzhevich
Το δίκτυο εξελίσσεται συνεχώς. Νέοι και καινοτόμοι ιστότοποι δημιουργούνται καθημερινά, πιέζοντας τα όρια της HTML προς κάθε κατεύθυνση. Η HTML4 είναι γύρω μας εδώ και σχεδόν μια δεκαετία και οι εκδότες αναζητούν νέες μεθόδους για την παροχή προηγμένης λειτουργικότητας που περιορίζεται από τους περιορισμούς της γλώσσας και του προγράμματος περιήγησης.
Για να δώσει στους συγγραφείς περισσότερη ευελιξία και διαλειτουργικότητα, κάνοντας τους ιστότοπους και τις εφαρμογές τους πιο διαδραστικές και καθηλωτικές, η HTML5 εισάγει και επεκτείνει μια σειρά δυνατοτήτων για να συμπεριλάβει στοιχεία φόρμας, API, μέσα, δομή και σημασιολογία.
Οι εργασίες για την HTML5 ξεκίνησαν το 2004 και επί του παρόντος είναι μια κοινή προσπάθεια μεταξύ του W3C HTML WG και του WHATWG. Πολλοί βασικοί παίκτες συμμετέχουν στις εργασίες του W3C, συμπεριλαμβανομένων εκπροσώπων από τους τέσσερις μεγάλους προμηθευτές προγραμμάτων περιήγησης: Apple, Mozilla, Opera και Microsoft, καθώς και ορισμένους άλλους οργανισμούς και άτομα με τα δικά τους ενδιαφέροντα και τεχνογνωσία.
Σημειώστε ότι η προδιαγραφή είναι ακόμη ένα έργο σε εξέλιξη και απέχει πολύ από το να έχει ολοκληρωθεί. Επομένως, είναι πιθανό ορισμένες από τις λειτουργίες που περιγράφονται σε αυτό το άρθρο να αλλάξουν στο μέλλον. Αυτό το άρθρο προορίζεται για σύντομη περιγραφήμερικά από τα κύρια χαρακτηριστικά που υπάρχουν στο τρέχον έργο.
ΔομήΗ HTML5 εισάγει μια σειρά από νέα στοιχεία που απλοποιούν τη δομή των σελίδων. Οι περισσότερες σελίδες HTML4 περιέχουν τυπικά στοιχεία, όπως "κεφαλίδα", "υποσέλιδο" και στήλες. Σήμερα, κατά κανόνα, στον κώδικα εγγράφου συμβολίζονται με στοιχεία, που περιγράφουν το καθένα με ένα χαρακτηριστικό id ή class.
Το σχήμα δείχνει μια τυπική διάταξη δύο στηλών που σχηματίζονται χρησιμοποιώντας τα χαρακτηριστικά id και class. Η διάταξη περιέχει κεφαλίδα, υποσέλιδο και οριζόντια πλοήγησηκάτω από τον τίτλο. Το κύριο περιεχόμενο περιλαμβάνει το άρθρο και την πλαϊνή γραμμή στα δεξιά (πλευρική γραμμή).
Είναι σωστό να χρησιμοποιείτε στοιχεία επειδή η HTML4 δεν διαθέτει την απαραίτητη σημασιολογία για να περιγράψει αυτά τα μέρη πιο συγκεκριμένα. Η HTML5 επιλύει αυτό το πρόβλημα εισάγοντας νέα στοιχεία για την αναπαράσταση καθεμιάς από αυτές τις διαφορετικές ενότητες.
Τα στοιχεία μπορούν να αντικατασταθούν από νέα στοιχεία , , , και
Ο κωδικός αυτού του εγγράφου είναι ο ακόλουθος.
... ... ... ... ...
Ακολουθούν ορισμένα οφέλη από τη χρήση αυτών των στοιχείων. Όταν χρησιμοποιείται σε συνδυασμό με στοιχεία επικεφαλίδας (έως ), αυτό επιτρέπει τη διάταξη των υποενοτήτων ανά επίπεδα επικεφαλίδων, μέχρι το έκτο. Η προδιαγραφή περιλαμβάνει, η οποία λαμβάνει υπόψη και λαμβάνει υπόψη τη δομή αυτών των στοιχείων συμβατό προς τα πίσωμε προηγούμενες εκδόσεις. Τόσο τα εργαλεία ανάπτυξης όσο και τα προγράμματα περιήγησης μπορούν να το χρησιμοποιήσουν για να δημιουργήσουν έναν πίνακα περιεχομένων για να βοηθήσουν τους χρήστες να πλοηγηθούν στο έγγραφο.
Για παράδειγμα, ο παρακάτω κώδικας είναι δομημένος με ένθετα και στοιχεία.
Επίπεδο 1 Επίπεδο 2 Επίπεδο 3
Σημειώστε ότι για καλύτερη συμβατότητα με τα υπάρχοντα προγράμματα περιήγησης, είναι επίσης δυνατή η χρήση άλλων στοιχείων κεφαλίδας (προς ) αντί για το αντίστοιχο .
Προσθέτοντας ετικέτες σε στοχευμένα τμήματα μιας σελίδας με ειδικές ετικέτες, οι υποστηρικτικές τεχνολογίες μπορούν να βοηθήσουν τον χρήστη να περιηγηθεί εύκολα στη σελίδα. Για παράδειγμα, μπορεί απλώς να παραλείψουν την ενότητα πλοήγησης ή να μετακινηθούν γρήγορα από το ένα άρθρο στο άλλο. Ο συγγραφέας δεν θα έπρεπε να παρέχει μηχανισμό δημιουργίας συνδέσμων για αυτό. Οι συγγραφείς αποκτούν επίσης ένα πλεονέκτημα από την αντικατάσταση ενός σετ με πολλά διάφορα στοιχείαβοηθά να γίνει ο πηγαίος κώδικας σαφέστερος και απλούστερος.
Το στοιχείο καθορίζει έναν τίτλο ενότητας, ο οποίος μπορεί να περιέχει περισσότερα από τον τίτλο της ενότητας. Για παράδειγμα, μπορεί να είναι λογικό ένας τίτλος να περιλαμβάνει υπότιτλο, πληροφορίες έκδοσης ιστορίας ή απόδοση.
Προεπισκόπηση HTML5
Blog Εισαγάγετε το σύνθημα εδώ.Το στοιχείο ορίζει το υποσέλιδο της ενότητας στην οποία προστίθεται. Το υποσέλιδο περιέχει συνήθως πληροφορίες όπως: ποιος το έγραψε, συνδέσμους προς σχετικά έγγραφα, πνευματικά δικαιώματα και παρόμοια.
© 2011 Example Inc.
Το στοιχείο αντιπροσωπεύει ένα τμήμα συνδέσμους πλοήγησης, είναι κατάλληλο για πλοήγηση ιστότοπου ή πίνακα περιεχομένων.
Ένα στοιχείο προορίζεται να περιέχει περιεχόμενο που σχετίζεται έμμεσα με το περιεχόμενο δίπλα του, που συνήθως χρησιμοποιείται για να υποδείξει μια πλαϊνή γραμμή.
Αρχεία
Το στοιχείο ορίζει μια γενική ενότητα ενός εγγράφου ή μιας εφαρμογής, όπως ένα κεφάλαιο.
Κεφάλαιο 1: Εκείνη την εποχή
Ήταν το καλύτερο όλων των εποχών, ήταν το χειρότερο όλων των εποχών. Ήταν μια εποχή σοφίας, ήταν μια εποχή βλακείας. Ήταν μια εποχή πίστης, ήταν μια εποχή απιστίας. Αυτά ήταν τα χρόνια του Φωτός, αυτά ήταν τα χρόνια του Σκότους. ...
(Απόσπασμα από το "A Tale of Two Cities")
Ένα στοιχείο είναι μια ανεξάρτητη ενότητα ενός εγγράφου, σελίδας ή τοποθεσίας. Είναι κατάλληλο για περιεχόμενο όπως ειδήσεις, άρθρο ιστολογίου, ανάρτηση φόρουμ ή μεμονωμένα σχόλια.
Σχόλιο #2Τζακ Ο' Νιλ
29 Αυγούστου 2007 στις 01:58 μ.μ
Αυτό είναι ένα καταπληκτικό άρθρο!
Βίντεο και ήχοςΣΕ τα τελευταία χρόνιαΤο βίντεο και ο ήχος στο Διαδίκτυο γίνονται όλο και πιο βιώσιμοι και ιστότοποι όπως το YouTube, το Viddler, το Revver, το MySpace και δεκάδες άλλοι διευκολύνουν τη ζωή όσων δημοσιεύουν βίντεο και ήχο. Επειδή η HTML λείπει αυτήν τη στιγμή απαραίτητα κεφάλαιαΓια την επιτυχή εφαρμογή και διαχείριση πολυμέσων, πολλοί ιστότοποι βασίζονται στο Flash για την παροχή αυτής της λειτουργικότητας. Αν και μπορείτε να ενσωματώσετε μέσα χρησιμοποιώντας διάφορα πρόσθετα(όπως το QuickTime, Windows Mediaκ.λπ.), Το Flash είναι πλέον το μόνο ευρέως χρησιμοποιούμενο πρόσθετο που παρέχει συμβατότητα μεταξύ προγραμμάτων περιήγησης με τα API που απαιτούνται από τους προγραμματιστές.
Όπως αποδεικνύεται από διάφορες συσκευές αναπαραγωγής πολυμέσων που βασίζονται σε Flash, οι δημιουργοί τους ενδιαφέρονται να υποστηρίξουν τις δικές τους διεπαφές χρήστη, οι οποίες συνήθως επιτρέπουν στους χρήστες να παίζουν, να παύουν, να διακόπτουν, να αναζητούν και να προσαρμόζουν την ένταση του ήχου. Το σχέδιο είναι να παρέχεται αυτή η λειτουργία σε προγράμματα περιήγησης προσθέτοντας εγγενή υποστήριξη για βίντεο και ήχο και παρέχοντας ένα API για σενάρια για τον έλεγχο της αναπαραγωγής.
Νέα στοιχεία το κάνουν πολύ απλό. Τα περισσότερα από τα API είναι τα ίδια για αυτά τα δύο στοιχεία, η διαφορά οφείλεται στις εγγενείς διαφορές μεταξύ οπτικών και μη οπτικών μέσων.
Παρουσίαση ΕγγράφουΣε αντίθεση με τις προηγούμενες εκδόσεις HTML και XHTML, οι οποίες ορίστηκαν ως προς τη σύνταξή τους, η HTML5 ορίζεται επί του παρόντος με όρους μοντέλο αντικειμένουέγγραφο (DOM) - το δέντρο παρουσίασης που χρησιμοποιούν τα προγράμματα περιήγησης για την εμφάνιση ενός εγγράφου. Για παράδειγμα, εξετάστε ένα πολύ απλό έγγραφο που αποτελείται από έναν τίτλο, μια επικεφαλίδα και μια παράγραφο. Το δέντρο DOM μπορεί να μοιάζει κάπως έτσι.
Το δέντρο DOM περιλαμβάνει το στοιχείο μέσα , καθώς και
Το πλεονέκτημα του ορισμού της HTML5 με βάση το DOM είναι ότι η ίδια η γλώσσα μπορεί να οριστεί ανεξάρτητα από τη σύνταξη. Υπάρχουν δύο συντάξεις που μπορούν να χρησιμοποιηθούν για την αναπαράσταση εγγράφων HTML: δημοσίευση HTML (γνωστή ως HTML5) και δημοσίευση XML (γνωστή ως XHTML5).
Η σύνταξη HTML βασίζεται σε SGML, μια πρώιμη Εκδόσεις HTML, αλλά ορίζεται ότι είναι πιο συμβατό με το πρόγραμμα περιήγησης στην πράξη.
Παράδειγμα εγγράφου HTML
Αυτό είναι ένα παράδειγμα εγγράφου HTML
Σημειώστε, όπως και σε προηγούμενες εκδόσεις του HTML, ορισμένες ετικέτες είναι προαιρετικές και υπονοούνται αυτόματα.
Η δημοσίευση σε XML βασίζεται στη σύνταξη με χρησιμοποιώντας XML 1.0 και τον χώρο ονομάτων XHTML 1.0.
Παράδειγμα εγγράφου HTML
Αυτό είναι ένα παράδειγμα εγγράφου HTML
Εκτός από την κλειστή ετικέτα και την παρουσία του χαρακτηριστικού xmlns, αυτά τα δύο παραδείγματα είναι πανομοιότυπα.
Τα προγράμματα περιήγησης χρησιμοποιούν τον τύπο MIME για διαφοροποίηση. Κάθε έγγραφο που αποστέλλεται ως κείμενο/html πρέπει να πληροί τις απαιτήσεις για δημοσίευση σε HTML και ένα έγγραφο που αποστέλλεται με την εφαρμογή τύπου MIME/xhtml+xml πρέπει να πληροί τις απαιτήσεις για δημοσίευση σε XML.
Οι συγγραφείς πρέπει να κάνουν μια ενημερωμένη επιλογή σχετικά με την επιλογή που θα χρησιμοποιήσουν, η οποία εξαρτάται από πολλούς διαφορετικούς παράγοντες. Οι συγγραφείς δεν πρέπει να χρησιμοποιούν τη μία ή την άλλη επιλογή χωρίς επιφύλαξη· καθεμία είναι βελτιστοποιημένη για διαφορετικές καταστάσεις.
Οφέλη από τη χρήση HTML
Οφέλη από τη χρήση XHTML
Οι εργασίες για την HTML5 προχωρούν γρήγορα, αλλά αναμένεται να χρειαστούν αρκετά χρόνια για να ολοκληρωθεί. Λόγω της απαίτησης να διεξαχθεί μια σειρά δοκιμών και να επιτευχθεί διαλειτουργικότητα των υλοποιήσεων, οι εργασίες για τις τρέχουσες αξιολογήσεις θα πρέπει να ολοκληρωθούν σε 10-15 χρόνια. Κατά τη διάρκεια αυτής της διαδικασίας, απαιτείται επιτυχία μεγάλης σημασίας Ανατροφοδότησημε ένα ευρύ φάσμα ανθρώπων, συμπεριλαμβανομένων σχεδιαστών ιστού, CMS και προγραμματιστών προγραμμάτων περιήγησης. Κάθε συνεισφορά στην HTML5 ενθαρρύνεται ενεργά.
Εκτός από τις προδιαγραφές, υπάρχουν πολλά άλλα έργα που βοηθούν τους ανθρώπους να κατανοήσουν καλύτερα αυτήν την εργασία.
Υπάρχουν πολλές κοινότητες μέσω των οποίων μπορείτε να συνεισφέρετε. Μπορείτε να εγγραφείτε στο W3C HTML και να εγγραφείτε στη λίστα αλληλογραφίας ή στο wiki. Μπορείτε επίσης να εγγραφείτε και να συνεισφέρετε σε οποιοδήποτε από τα
Απλό έγγραφο HTML5
Ας δούμε ένα από τα πιο απλά έγγραφα HTML5. Ξεκινά καθορίζοντας τον τύπο του εγγράφου χρησιμοποιώντας ειδικό κωδικόπεριγραφές του τύπου εγγράφου (η σημασία αυτού του κωδικού εξηγείται στην επόμενη ενότητα), μετά την οποία ορίζεται η κωδικοποίηση και το όνομα του εγγράφου και, στη συνέχεια, τα περιεχόμενά του. ΣΕ σε αυτήν την περίπτωσηΤο περιεχόμενο αποτελείται από μία παράγραφο κειμένου:
Μικρό έγγραφο HTML5
Αυτό το απλό έγγραφο μπορεί να απλοποιηθεί ακόμη περισσότερο. Για παράδειγμα, η ετικέτα τέλους δεν απαιτείται στην πραγματικότητα στο πρότυπο HTML5, αφού τα προγράμματα περιήγησης ξέρουν πώς να κλείνουν τα πάντα ανοιχτά στοιχείαστο τέλος του εγγράφου (και το πρότυπο HTML5 νομιμοποιεί αυτήν τη συμπεριφορά). Αλλά η κοπή γωνιών όπως αυτή αντί να την απλοποιήσει καθιστά τη σήμανση πιο δύσκολη στην κατανόηση και μπορεί να δημιουργήσει απροσδόκητα σφάλματα.
Οι περισσότεροι προγραμματιστές ιστού είναι της γνώμης ότι η χρήση παραδοσιακών ενοτήτων είναι χρήσιμη για να γίνει πιο κατανοητό το έγγραφο, επειδή διαχωρίζουν σαφώς τις πληροφορίες σχετικά με τη σελίδα (τον τίτλο της σελίδας) από το ίδιο το περιεχόμενο (το σώμα της σελίδας). Αυτή η δομή είναι ιδιαίτερα χρήσιμη όταν προσθέτετε σενάρια, φύλλα στυλ και μεταστοιχεία σε μια σελίδα:
Μικρό έγγραφο HTML5
Ας ανακινήσουμε το πρόγραμμα περιήγησης σε στυλ HTML5!
Τέλος, ολόκληρο το έγγραφο (εκτός από τη γραμμή doctype) μπορεί να τυλιχθεί σε ένα παραδοσιακό στοιχείο, όπως φαίνεται στην ακόλουθη λίστα:
Μικρό έγγραφο HTML5
Ας ανακινήσουμε το πρόγραμμα περιήγησης σε στυλ HTML5!
Μέχρι την HTML5, κάθε έκδοση της επίσημης προδιαγραφής HTML απαιτούσε τη χρήση του στοιχείου, παρόλο που η παρουσία αυτού του στοιχείου δεν επηρεάζει με κανέναν τρόπο τον τρόπο με τον οποίο το πρόγραμμα περιήγησης επεξεργάζεται τον υπόλοιπο κώδικα της σελίδας. Στην HTML5, η χρήση αυτού του στοιχείου επαφίεται αποκλειστικά στην προσωπική κρίση του προγραμματιστή.
Η χρήση των στοιχείων και είναι απλώς θέμα στυλ. Μια σελίδα χωρίς αυτά τα στοιχεία θα λειτουργεί τέλεια ακόμα και σε παλαιότερα προγράμματα περιήγησης που δεν έχουν καν ακούσει ποτέ για HTML5. Στην πραγματικότητα, το πρόγραμμα περιήγησης αναλαμβάνει αυτόματα την παρουσία αυτών των στοιχείων. Επομένως, αν κοιτάξετε Μοντέλο DOM(ένα σύνολο αντικειμένων λογισμικού που αντιπροσωπεύουν μια σελίδα) σελίδα που χρησιμοποιεί μια δέσμη ενεργειών JavaScript, θα περιέχει αντικείμενα για τα στοιχεία , και ,, ακόμα κι αν ο προγραμματιστής δεν τα χρησιμοποίησε.
Επί σε αυτό το στάδιοαυτό το παράδειγμα σελίδας βρίσκεται κάπου μεταξύ του απλούστερου εγγράφου HTML5 και ενός προηγμένου σημείου εκκίνησης πρακτική ιστοσελίδα HTML5. Σε επόμενες ενότητες θα προσθέσουμε τα υπόλοιπα σε αυτό απαραίτητα στοιχείακαι σκάψτε βαθύτερα στα σημάδια.
HTML5 Τύπος εγγράφου ΠεριγραφήΗ πρώτη γραμμή κάθε εγγράφου HTML5 περιγράφει πάντα τον τύπο του εγγράφου. Αυτή η περιγραφή δείχνει ξεκάθαρα ότι αυτό που ακολουθεί είναι περιεχόμενο HTML5 και μοιάζει με αυτό:
Το πρώτο πράγμα που παρατηρείτε σχετικά με τον τύπο εγγράφου HTML5 είναι η εκπληκτική του απλότητα. Συγκρίνετε αυτό, για παράδειγμα, με την βαρετή περιγραφή του τύπου εγγράφου που απαιτείται να χρησιμοποιούν οι προγραμματιστές ιστού όταν εργάζονται με αυστηρή XHTML 1.0:
Ακόμη και επαγγελματίες προγραμματιστές ιστού αναγκάστηκαν να εισαγάγουν μια περιγραφή τύπου εγγράφου XHTML με αντιγραφή και επικόλληση από άλλο έγγραφο. Και η περιγραφή του τύπου εγγράφου HTML5 είναι σύντομη, σαφής και εύκολη στην εισαγωγή με μη αυτόματο τρόπο.
Η περιγραφή του τύπου εγγράφου HTML5 είναι επίσης αξιοσημείωτη στο ότι δεν περιέχει αριθμό. επίσημη έκδοση HTML (5 για HTML5). Απλώς δηλώνει ότι η σελίδα είναι σελίδα HTML. Αντιστοιχεί νέα έννοιαΗ HTML5 ως ζωντανή γλώσσα. Προστέθηκε HTML νέοΟι λειτουργίες είναι αυτόματα διαθέσιμες για τοποθέτηση στη σελίδα χωρίς να απαιτούνται αλλαγές στην περιγραφή του τύπου εγγράφου.
Όλα αυτά εγείρουν ένα δύσκολο ερώτημα: εάν η HTML5 είναι μια ζωντανή γλώσσα, τότε γιατί μια σελίδα χρειάζεται ακόμη και μια περιγραφή τύπου εγγράφου;
Η απάντηση σε αυτό το ερώτημα είναι ότι η περιγραφή του τύπου εγγράφου συνεχίζει να χρησιμοποιείται ιστορικούς λόγους. Κατά την επεξεργασία μιας σελίδας με περιγραφή τύπου εγγράφου που λείπει, τα περισσότερα προγράμματα περιήγησης (συμπεριλαμβανομένων Internet Explorerκαι Firefox) μεταβείτε στο λειτουργία συμβατότητας (λειτουργία παραξενιάς). Σε αυτήν τη λειτουργία, προσπαθούν να εμφανίσουν τη σελίδα λαμβάνοντας υπόψη τα σφάλματα στους κανόνες που έχουν χρησιμοποιηθεί σε περισσότερα προηγούμενες εκδόσεις. Το πρόβλημα με αυτό είναι ότι η λειτουργία συμβατότητας ενός προγράμματος περιήγησης μπορεί να είναι διαφορετική από αυτή ενός άλλου προγράμματος περιήγησης, πράγμα που σημαίνει ότι οι σελίδες που έχουν σχεδιαστεί για ένα πρόγραμμα περιήγησης πιθανότατα θα εμφανίζουν σφάλματα σε άλλο πρόγραμμα περιήγησης, όπως π.χ. λάθος μέγεθοςγραμματοσειρά, σπασμένη δομή σχεδίασης κ.λπ.
Και όταν το πρόγραμμα περιήγησης βρει μια περιγραφή του τύπου εγγράφου στη σελίδα, γνωρίζει ότι η επεξεργασία αυτής της σελίδας πρέπει να πραγματοποιείται σύμφωνα με πιο αυστηρούς κανόνες λειτουργία προτύπων, το οποίο εξασφαλίζει συνεπή μορφοποίηση και δομή σελίδας όταν εμφανίζεται από οποιαδήποτε σύγχρονο πρόγραμμα περιήγησης. Με λίγες εξαιρέσεις, το πρόγραμμα περιήγησης είναι εντελώς αδιάφορο για το είδος του εγγράφου που καθορίζεται στην περιγραφή. Απλώς ελέγχει ότι η σελίδα έχει κάποιο είδος περιγραφής τύπου εγγράφου. Μια περιγραφή τύπου εγγράφου HTML5 είναι απλώς η συντομότερη έγκυρη περιγραφή τύπου εγγράφου που ενεργοποιεί τη λειτουργία προτύπων προγράμματος περιήγησης.
Κωδικοποίηση χαρακτήρωνΗ κωδικοποίηση είναι ένα πρότυπο που λέει στον υπολογιστή πώς να μετατρέψει κείμενο σε μια ακολουθία byte κατά τη σύνταξη κειμένου σε αρχείο (και επίσης πώς να αντίστροφη μετατροπήόταν ανοίγετε ένα αρχείο). Για ιστορικούς λόγους, υπάρχουν πολλές διαφορετικές κωδικοποιήσεις σε όλο τον κόσμο. Σήμερα, σχεδόν όλοι οι ιστότοποι χρησιμοποιούν τη συμπαγή και γρήγορη κωδικοποίηση UTF-8, η οποία υποστηρίζει όλα τα άλλα αλφάβητα που θα χρειαστείτε ποτέ.
Οι διακομιστές Ιστού διαμορφώνονται συχνά για να ενημερώνουν τα προγράμματα περιήγησης που τους επισκέπτονται ότι οι σελίδες που προσφέρει ο διακομιστής έχουν μια συγκεκριμένη κωδικοποίηση. Αλλά δεν μπορείτε να είστε σίγουροι ότι ο διακομιστής ιστού στον οποίο σκοπεύετε να φιλοξενήσετε τον ιστότοπό σας θα ρυθμιστεί με αυτόν τον τρόπο (εκτός εάν είναι ο δικός σας διακομιστής). Επιπλέον, η προσπάθεια του προγράμματος περιήγησης να μαντέψει την πιο πιθανή κωδικοποίηση που χρησιμοποιείται μπορεί να αποτύχει λόγω κάποιου ασαφούς ζητήματος ασφαλείας. Για αυτούς τους λόγους, θα πρέπει πάντα να συμπεριλαμβάνετε πληροφορίες σχετικά με την κωδικοποίηση που χρησιμοποιείται στη σήμανση της σελίδας σας.
Η HTML5 κάνει αυτή την εργασία εύκολη. Για να το κάνετε αυτό, πρέπει απλώς να εισαγάγετε το στοιχείο στην αρχή του μπλοκ (ή, εάν το στοιχείο δεν χρησιμοποιείται, αμέσως μετά τον κωδικό περιγραφής τύπου εγγράφου):
Μικρό έγγραφο HTML5
Τα εργαλεία ανάπτυξης ιστού όπως το Dreamweaver ή το Expression Web εισάγουν αυτό το στοιχείο αυτόματα όταν δημιουργείτε τη σελίδα. Αυτά τα εργαλεία παρέχουν επίσης αποθήκευση αρχείων σε Κωδικοποίηση UTF. Ωστόσο, όταν δημιουργείτε μια ιστοσελίδα χρησιμοποιώντας ένα κανονικό πρόγραμμα επεξεργασίας κειμένου, ίσως χρειαστεί να κάνετε πρόσθετα βήματα για να διασφαλίσετε ότι τα αρχεία αποθηκεύονται στη σωστή κωδικοποίηση.
Γλώσσαμετράει σε καλή φόρμαυποδεικνύουν τη φυσική γλώσσα της ιστοσελίδας. Αυτές οι πληροφορίες μπορεί μερικές φορές να είναι χρήσιμες σε άλλους, π.χ. μηχανές αναζήτησηςμπορεί να το χρησιμοποιήσει για να φιλτράρει τα αποτελέσματα αναζήτησης για να επιστρέψει μόνο σελίδες σε μια καθορισμένη γλώσσα.
Ο ευκολότερος τρόπος για να εισαγάγετε πληροφορίες γλώσσας σε μια ιστοσελίδα είναι μέσω του στοιχείου:
Οι πληροφορίες γλώσσας μπορεί επίσης να είναι χρήσιμες εάν η σελίδα περιέχει κείμενο διαφορετικές γλώσσες, το οποίο πρέπει να διαβαστεί χρησιμοποιώντας ένα πρόγραμμα ανάγνωσης κειμένου οθόνης. Σε αυτήν την περίπτωση, εισάγεται το χαρακτηριστικό lang με τον αντίστοιχο κωδικό γλώσσας στο σωστό μέροςτεκμηριώστε, για παράδειγμα, σε στοιχεία που καλύπτουν κείμενο σε διαφορετικές γλώσσες. Με αυτόν τον τρόπο, το πρόγραμμα ανάγνωσης κειμένου οθόνης μπορεί να προσδιορίσει ποιο κείμενο μπορεί να διαβάσει.
Προσθήκη φύλλου στυλΣχεδόν κάθε σελίδα ενός σωστά σχεδιασμένου επαγγελματικού ιστότοπου χρησιμοποιεί φύλλα στυλ. Για να καθορίσετε το απαιτούμενο φύλλο στυλ, χρησιμοποιήστε ένα στοιχείο σε ένα μπλοκ εγγράφων HTML5:
Μικρό έγγραφο HTML5
Αυτή η μέθοδος είναι παρόμοια με τον καθορισμό φύλλων στυλ σε παραδοσιακά έγγραφα HTML, αλλά λίγο πιο απλή. Γιατί υπάρχει μόνο μία γλώσσα διαδοχικά τραπέζιαστυλ - CSS και, στη συνέχεια, η προσθήκη του χαρακτηριστικού type="text/css", που απαιτούνταν προηγουμένως, δεν είναι πλέον απαραίτητη.
Προσθήκη κώδικα JavaScriptΓλώσσα Σενάρια JavaScriptδημιουργήθηκε αρχικά ως ένας τρόπος έντασης εργασίας για να προσθέσετε λάμψη και γοητεία σε βαρετές ιστοσελίδες. Επί του παρόντος η κύρια περιοχή Εφαρμογές JavaScriptέχει μετατοπιστεί από την ανάπτυξη κουδουνιών και σφυρίχτρες διεπαφής στην ανάπτυξη προσαρμοσμένων εφαρμογών ιστού, συμπεριλαμβανομένων εξαιρετικά αποδοτικών πελατών ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ, συντάκτες κειμένουκαι μηχανές χαρτών που εκτελούνται απευθείας στο πρόγραμμα περιήγησης.
Ο κώδικας JavaScript εισάγεται σε ένα έγγραφο HTML5 από σε μεγάλο βαθμόμε τον ίδιο τρόπο όπως μια παραδοσιακή σελίδα HTML. Η ακόλουθη λίστα είναι ένα παράδειγμα εισαγωγής κώδικα JavaScript σε ένα έγγραφο web χρησιμοποιώντας έναν σύνδεσμο προς εξωτερικό αρχείο:
Μικρό έγγραφο HTML5
Το χαρακτηριστικό language="JavaScript" είναι προαιρετικό γιατί, εκτός και αν έχει καθοριστεί κάποια άλλη γλώσσα δέσμης ενεργειών (και δεδομένου ότι η JavaScript είναι η μόνη ευρέως υποστηριζόμενη γλώσσα δέσμης ενεργειών για HTML, η πιθανότητα να συμβεί αυτό είναι αμελητέα), τα προγράμματα περιήγησης υποθέτουν αυτόματα ότι χρησιμοποιείται JavaScript. Αλλά ακόμα και όταν συνδέεστε σε ένα εξωτερικό αρχείο JavaScript, πρέπει να θυμάστε την ετικέτα κλεισίματος. Εάν παραλείψετε αυτήν την ετικέτα λόγω επίβλεψης ή προσπαθώντας να συντομεύσετε τον κώδικα χρησιμοποιώντας σύνταξη κενού στοιχείου, η σελίδα δεν θα λειτουργήσει όπως αναμένεται.
Εάν ξοδεύετε πολύ χρόνο δοκιμάζοντας τις σελίδες σας JavaScript στον Internet Explorer, ίσως χρήσιμη προσθήκηετικέτες MOTW (Σήμα Ιστού - σήμα χαρακτηριστικών δικτύου)στο μπλοκ αμέσως μετά τη γραμμή κωδικοποίησης. Αυτό γίνεται με αυτόν τον τρόπο:
Μικροσκοπικό έγγραφο HTML5
Αυτή η γραμμή κώδικα λέει στον Internet Explorer να αντιμετωπίζει τη σελίδα σαν να είχε φορτωθεί από απομακρυσμένο ιστότοπο. Διαφορετικά, ο IE μεταβαίνει σε ειδική μεταχείρισηαποκλεισμός, εμφανίζει μια προειδοποίηση ασφαλείας στη γραμμή μηνυμάτων και αρνείται να εκτελέσει κάποια Κώδικας JavaScriptμέχρι να κάνετε κλικ στο κουμπί "Να επιτρέπεται το αποκλεισμένο περιεχόμενο".
Όλα τα άλλα προγράμματα περιήγησης αγνοούν το σήμα MOTW και χρησιμοποιούν τις ίδιες ρυθμίσεις ασφαλείας και για τις δύο σελίδες που έχουν φορτωθεί από απομακρυσμένους ιστότοπους και τοπικά αρχεία HTML.
Με την έλευση νέα έκδοση HTML, κατέστη δυνατή η διάταξη των σελίδων με νέο τρόπο. Συγκεκριμένα, η HTML5 εισήγαγε νέες σημασιολογικές ετικέτες που επισημαίνουν ξεκάθαρα μέρη της σελίδας και κάνουν τη δομή της εντελώς διαφανή. Τι είναι αυτές οι ετικέτες και γιατί είναι σημαντικό να τις χρησιμοποιείτε κατά την κωδικοποίηση;
Προηγουμένως, μια σελίδα μπορούσε να διαμορφωθεί με οποιονδήποτε τρόπο, για παράδειγμα, απλά τοποθετώντας μπλοκ div. Σε αυτή την περίπτωση, το σημασιολογικό νόημα υπολογίστηκε από τις μηχανές αναζήτησης και άλλες υπηρεσίες χρησιμοποιώντας κλάσεις και αναγνωριστικά. Τώρα οι πιο πρόσφατες ετικέτες λύνουν αυτό το πρόβλημα. Εκτός από τη σημασιολογία, οι ετικέτες βοηθούν στη δημιουργία εμφάνιση σύγχρονη διαδικτυακή εφαρμογήή τον ιστότοπο πληρέστερα.
Σύμφωνα με την προδιαγραφή HTML5, κάθε νέα ετικέτα ανήκει σε μια συγκεκριμένη κατηγορία (0 ή περισσότερο) περιεχομένου. Ας παραθέσουμε αυτές τις κατηγορίες περιεχομένου:
Όπως μπορείτε να δείτε, υπάρχουν πολύ λίγες κατηγορίες. Αυτές οι υπό όρους διαιρέσεις σε κατηγορίες είναι απαραίτητες για μια σαφέστερη δόμηση των ετικετών. Ας παραθέσουμε τις ίδιες τις ετικέτες: κεφαλίδα, πλοήγηση, άρθρο, ενότητα, κατά μέρος, υποσέλιδο, διεύθυνση, κύρια, εικόνα, εικονίδιο, χρόνος, σημάδι, bdi, wbr. Εκτός από αυτές τις ετικέτες, πρέπει επίσης να θυμάστε τα στοιχεία για την περιγραφή χαρακτήρων της Ανατολικής Ασίας: ρουμπίνι, rb, rt, rtc, rp. Παρακάτω θα δούμε συνοπτικά τις νέες ετικέτες· το όνομα και η κατηγορία περιεχομένου δίνονται σε παρένθεση.
ετικέτα κεφαλίδας (ροή)Αυτή η ετικέτα σάς επιτρέπει να ομαδοποιήσετε στοιχεία πλοήγησης και εισαγωγικά στοιχεία. Μπορείτε να τοποθετήσετε όσες από αυτές τις ετικέτες θέλετε, ή καθόλου, σε οποιοδήποτε μέρος της σελίδας. Δεν μπορείτε να τοποθετήσετε ετικέτες υποσέλιδου και διεύθυνσης ή την ίδια την ετικέτα κεφαλίδας.
ετικέτα πλοήγησης (ροή, τμηματική)Όπως φαίνεται από το όνομα της ετικέτας, χρησιμοποιείται για τη δημιουργία ενός μπλοκ πλοήγησης, διάφορα μενούκαι μπλοκ συνδέσμων. Μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα.
Ετικέτα άρθρου (ροή, τμηματική)Η ετικέτα προορίζεται για την ομαδοποίηση άρθρων σε μια σελίδα. Θα πρέπει να χρησιμοποιείται εάν υπάρχουν πολλά άρθρα σε μια σελίδα, αλλά εάν υπάρχει μόνο ένα άρθρο, τότε δεν χρειάζεται να χρησιμοποιήσετε αυτήν την ετικέτα.
Ετικέτα ενότητας (ροή, τμηματική)Η ετικέτα προορίζεται να χωρίσει μια σελίδα σε μέρη και ενότητες, επισημαίνοντας ορισμένες ενότητες στη σελίδα. Για παράδειγμα, μπορείτε να δημιουργήσετε μια ενότητα άρθρου, μια ενότητα σχολίων, μια ενότητα συλλογής κ.λπ. σε μια σελίδα.
ετικέτα στην άκρη (με ροή, τμηματική)Αυτή η ετικέτα σάς επιτρέπει να διαχωρίσετε οποιοδήποτε περιεχόμενο σελίδας σε ένα ξεχωριστό λογικό τμήμα, για παράδειγμα, μπορείτε να το χρησιμοποιήσετε για να δημιουργήσετε μια πλαϊνή στήλη, όπως σε ένα βιβλίο.
Ετικέτα υποσέλιδου (ροή)Η ετικέτα χρησιμοποιείται για τη δημιουργία ενός υποσέλιδου στον ιστότοπο, ενός μέρους όπου συνήθως τοποθετούνται πληροφορίες σχετικά με τον ιστότοπο, πνευματικά δικαιώματα κ.λπ. Μπορεί να χρησιμοποιηθεί πολλές φορές σε μια σελίδα.
Ετικέτα διεύθυνσης (ροή)Η ετικέτα είναι χρήσιμη για τη δημιουργία μπλοκ με πληροφορίες διεύθυνσης, ιδιαίτερα σημαντικές για την προώθηση στις μηχανές αναζήτησης. Το περιεχόμενο σε αυτήν την ετικέτα είναι συνήθως πλάγιο από τα προγράμματα περιήγησης.
Κύρια ετικέτα (streaming)Το στοιχείο μπορεί να χρησιμοποιηθεί για τον καθορισμό του κύριου μέρους της σελίδας· δεν μπορεί να είναι θυγατρικό των ετικετών: άρθρο, παράπλευρη, υποσέλιδο, κεφαλίδα, πλοήγηση.
ετικέτα σχήματος (streaming, root)Αυτή η ετικέτα χρησιμοποιείται για την επισήμανση αυτόνομου περιεχομένου, για παράδειγμα, μπορείτε να τη χρησιμοποιήσετε για να δημιουργήσετε ένα μπλοκ που περιέχει μια φωτογραφία και μια περιγραφή για αυτό.
ετικέτα figcaption (-)Η ετικέτα είναι απόγονος της ετικέτας figure και σας επιτρέπει να τοποθετήσετε μια περιγραφή ή λεζάντα, καθώς και άλλες πληροφορίες για το απαιτούμενο στοιχείοΣτη σελίδα.
Ετικέτα χρόνου (ροή, κείμενο)Μια σημαντική ετικέτα που σας επιτρέπει να εισάγετε την ημερομηνία και την ώρα. Αυτό μπορεί να είναι χρήσιμο για τις μηχανές αναζήτησης καθώς και για τους χρήστες. Με την εμφάνιση αυτής της ετικέτας, κατέστη δυνατός ο ορισμός της ημερομηνίας σε τυπικές μορφές ώρας.
Επισήμανση ετικέτας (ροή, κείμενο)Η ετικέτα σάς επιτρέπει να επισημάνετε το περιεχόμενο στη σελίδα με χρώμα, όπως ένας δείκτης σε χαρτί. Συνήθως αυτό κίτρινος, αλλά μπορείτε να αλλάξετε το χρώμα με στυλ.
Ετικέτα bdi (ροή, κείμενο) Ετικέτα wbr (ροή, κείμενο)Μια μεμονωμένη ετικέτα σάς επιτρέπει να καθορίσετε ένα μέρος όπου το πρόγραμμα περιήγησης μπορεί να σπάσει μια μεγάλη γραμμή.
Έτσι, οι νέες ετικέτες επιτρέπουν την αποτελεσματική σήμανση σελίδας, κάτι που είναι εξαιρετικά σημαντικό προώθηση μηχανών αναζήτησηςκαι να χρησιμοποιείτε ιστοσελίδες σε διάφορες υπηρεσίες.