Κατάλογος ετικετών HTML5. Στοιχεία HTML5 - νέες ετικέτες

Πρόγραμμα Kerish Doctor. 01.05.2019
Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει...

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

ετικέτα κεφαλίδας

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

Με άλλα λόγια, η ετικέτα κεφαλίδας ορίζει την κεφαλίδα του ιστότοπου (κεφαλίδα τοποθεσίας).

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

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

HTML

Πνευματικά δικαιώματα 20011 Όλα τα δικαιώματα

ετικέτα πλοήγησης

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

HTML
  • Σπίτι
  • Λήψη
  • Αρχείο
  • Σχετικά με εμάς

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

στην άκρη ετικέτα

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

Ετικέτα άρθρου

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

ετικέτα σχήματος

Μερικές φορές είναι απαραίτητο να τοποθετήσετε μια εικόνα και το συνοδευτικό κείμενο ως ενιαία απεικόνιση. Το στοιχείο σχήμα υποδεικνύει ότι το κείμενο και η εικόνα αποτελούν μέρος ενός ενιαίου συνόλου.

HTML Εδώ περιγράφω την εικόνα Διάλογος ετικέτας

Η ετικέτα διαλόγου είναι η περιοχή όπου εμφανίζονται τα σχόλια (συνομιλία, συνομιλία). Η ετικέτα διαλόγου αποτελείται από τα ακόλουθα μέρη:

  • την ίδια την ετικέτα διαλόγου, η οποία ορίζει ένα μπλοκ με σχόλια
  • Η ετικέτα dt θα καθορίσει ποιος μιλάει
  • η ετικέτα dd ορίζει το κείμενο του σχολίου
HTML Vasya Ήμουν εδώ Petya Επιβεβαιώνω ότι όλα όσα έγραψε η Vasya είναι αληθινή Σήμανση βασισμένη σε ετικέτες HTML5

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

Τυπικό ιστολόγιο

  • Σπίτι
  • Λήψη
  • Αρχείο
  • Σχετικά με εμάς
Τίτλος

Lorem ipsum...

Τίτλος

Lorem ipsum...

Πνευματικά δικαιώματα 20011 Όλα τα δικαιώματα

Όπως μπορείτε να δείτε, οι ίδιες οι ετικέτες είναι πιο περιγραφικές από ό,τι αν χρησιμοποιούσατε κανονικά αναγνωριστικά για ετικέτες div. Υπάρχει επίσης ένα προφανές όφελος από τη χρήση επαρκών ετικετών κλεισίματος, όπως το άρθρο. Για παράδειγμα, η σήμανση ενός εγγράφου γίνεται πιο κατανοητή (συμπεριλαμβανομένων των μηχανών αναζήτησης) εάν αντί για ένα ακατανόητο μπλοκ με id="something" (όπου πρέπει ακόμα να αναζητηθεί η ετικέτα κλεισίματος!) χρησιμοποιήσετε την ετικέτα άρθρου.

Πρέπει να χρησιμοποιήσετε ετικέτες δομής τώρα;

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

Πρώτον, δεδομένου ότι τα περισσότερα προγράμματα περιήγησης δεν κατανοούν τον τύπο HTML5, δεν γνωρίζουν τις νέες ετικέτες στο HTML5. Ευτυχώς, τα προγράμματα περιήγησης είναι αρκετά ευαίσθητα, επιτρέποντάς τους να αντιμετωπίζουν άγνωστες ετικέτες. Το μόνο πρόβλημα είναι ότι οι άγνωστες ετικέτες δεν έχουν προεπιλεγμένα στυλ και τέτοιες ετικέτες αντιμετωπίζονται ως ενσωματωμένες ετικέτες. Αλλά οι νέες μας ετικέτες HTML5 είναι δομικές και προφανώς θα πρέπει να αποτελούν στοιχεία μπλοκ. Έτσι, όταν τους κάνουμε στυλ σε css, πρέπει να συμπεριλάβουμε μια δήλωση display:block.

Απλώς συμπεριλάβετε ένα μικρό κομμάτι κώδικα στο CSS σας και οι νέες ετικέτες HTML5 είναι έτοιμες. Και, φυσικά, μόλις υιοθετηθεί πλήρως το HTML5, η περιγραφή display:block μπορεί να αφαιρεθεί, καθώς αυτή η περιγραφή θα συμπεριληφθεί στα προεπιλεγμένα στυλ.

Υποστήριξη IE

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

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

document.createElement("footer");

document.createElement("τμήμα");

document.createElement("aside");

document.createElement("nav");

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

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

Σύναψη

Έτσι, μπορείτε να δομήσετε τα έγγραφά σας χρησιμοποιώντας τις νέες ετικέτες HTML5 αυτήν τη στιγμή.
HTML - γλώσσα σήμανσης υπερκειμένου. Βασίζεται στις λεγόμενες ετικέτες. Οι ετικέτες είναι μερικά στοιχεία περιτυλίγματος που καθορίζουν τη μορφή και τις ιδιότητες των στοιχείων της ιστοσελίδας. Έχουμε συγκεντρώσει μια ενημερωμένη αναφορά ετικετών HTML για εσάς σε μία σελίδα.
Υπάρχουν περισσότερα από εκατό στοιχεία σήμανσης συνολικά. Το καθένα έχει έναν αριθμό χαρακτηριστικών και τη δική του σύνταξη. Η Αναφορά ετικετών HTML θα σας βοηθήσει να βρείτε γρήγορα το στοιχείο που χρειάζεστε.
Λίστα ετικετών HTML
Ο παρακάτω πίνακας παρουσιάζει μια λίστα ετικετών HTML5 με μια σύντομη περιγραφή στα ρωσικά.
Ετικέτα Σύντομη περιγραφή
Σχόλιο.
Καθορίζει τον τύπο του εγγράφου.
Εκτός περιεχομένου (το περιεχόμενο δεν είναι το κύριο περιεχόμενο της σελίδας)
Σας επιτρέπει να εισάγετε ένα αρχείο ήχου που αναπαράγεται αυτήν τη στιγμή.
Έντονο κείμενο.
Καθορίζει το βασικό URL ή το χαρακτηριστικό προορισμού για σχετικούς συνδέσμους στο έγγραφο.
Ένας τομέας όπου η συγγραφή κειμένου μπορεί να πάρει διαφορετική κατεύθυνση.
Ορίζει την κατεύθυνση γραφής κειμένου. Σε αντίθεση με την κατεύθυνση, υποδεικνύεται η φυσική κατεύθυνση
Παραθέτω.
Καθορίζει την περιοχή του σώματος του εγγράφου.

Διάλειμμα γραμμής.
Κουμπί με δυνατότητα κλικ
Χρησιμοποιείται για τη σχεδίαση γραφικών χρησιμοποιώντας σενάρια
Υπογραφή πίνακα.
Υποσημείωση στον τίτλο του υλικού.
Χρησιμοποιείται για την εισαγωγή κώδικα υπολογιστή σε μορφή κειμένου.
Καθορίζει τα χαρακτηριστικά των στηλών στον πίνακα.
Καθορίζει μια ομάδα από μία ή περισσότερες στήλες πίνακα για μορφοποίηση.
Χρησιμοποιείται για τον καθορισμό προκαθορισμένων επιλογών από τις οποίες μπορείτε να επιλέξετε όταν πληκτρολογείτε σε ένα πεδίο κειμένου
Καθορίζει την περιγραφή ενός όρου από μια ετικέτα σε μια λίστα όρων
Κείμενο που έχει αφαιρεθεί στη νέα έκδοση του εγγράφου.
Καθορίζει πρόσθετες πληροφορίες που ο χρήστης μπορεί να προβάλει ή να αποκρύψει
Υποδεικνύει ότι το περιεχόμενο είναι όρος.
Ορίζει ένα πλαίσιο διαλόγου ή ένα διαδραστικό στοιχείο
Ένα στοιχείο μπλοκ είναι ένα από τα κύρια στοιχεία διάταξης.
Ορίζει μια λίστα ορισμών
Όνομα του όρου στη λίστα ορισμών
κείμενο επισημασμένο για νόημα (συνήθως κείμενο με πλάγιους χαρακτήρες).
Δοχείο για εξωτερική εφαρμογή
Ομάδα σχετικών στοιχείων σε μια φόρμα
Τίτλος για το στοιχείο
Ορίζει μια αυτόνομη ομάδα πολλών στοιχείων (για παράδειγμα, μια εικόνα με λεζάντα)
Υποσέλιδο
Καθορίζει μια φόρμα εισαγωγής χρήστη
- Επικεφαλίδες HTML διαφορετικών επιπέδων: , , , , , .
Καθορίζει την περιοχή κεφαλής του εγγράφου.
Μπλοκ κεφαλίδας
Η οριζόντια γραμμή είναι ένα θεματικό διαχωριστικό.
Στοιχείο ρίζας. Λέει στο πρόγραμμα περιήγησης ότι το δεδομένο έγγραφο είναι έγγραφο HTML.
Πλάγια κείμενο.
Ορίζει ένα ενσωματωμένο πλαίσιο
Εικόνα, εικόνα.
Πεδίο εισαγωγής
Κείμενο που έχει προστεθεί στη νέα έκδοση του εγγράφου.
Κείμενο που εισάγεται από το πληκτρολόγιο ή ονόματα κουμπιών πληκτρολογίου. Συνήθως με γραμματοσειρά monospace.
Ετικέτα για το πεδίο εισαγωγής. Υποδεικνύει τη σύνδεση ενός στοιχείου (συνήθως κειμένου) σε ένα πεδίο εισαγωγής.
Κεφαλίδα στοιχείου
    		• Στοιχείο λίστας
    Καθορίζει μια σύνδεση εξωτερικού πόρου (τις περισσότερες φορές μια σύνδεση φύλλου στυλ CSS)
    Κύριο περιεχόμενο
    Δοχείο για. Καθορίζει έναν προσαρμοσμένο χάρτη σε μια εικόνα
    Επιλεγμένο κείμενο (συνήθως με χρήση επισήμανσης φόντου).
    Δοχείο για μια λίστα με στοιχεία μενού
    Καθορίζει στοιχεία που ο χρήστης μπορεί να καλέσει από το μενού περιβάλλοντος
    Χρησιμοποιείται για τον ορισμό μεταδεδομένων εγγράφου.
    Μετρητής τιμών σε ένα δεδομένο εύρος
    Δοχείο για στοιχεία πλοήγησης
    Εναλλακτικό περιεχόμενο για χρήστες που έχουν απενεργοποιήσει τα σενάρια
    Ορίζει ένα ενσωματωμένο αντικείμενο
    Καθορίζει μια αριθμημένη λίστα
    Καθορίζει μια ομάδα σχετικών επιλογών σε μια αναπτυσσόμενη λίστα. Δίνει το όνομα στην ομάδα
    Παράμετρος (επιλογή επιλογής) στην αναπτυσσόμενη λίστα
    Αποτέλεσμα υπολογισμού

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

    Πώς να αντικαταστήσετε την παρωχημένη ετικέτα HTML; Στις περισσότερες περιπτώσεις, τα CSS Cascading Style Sheets θα κάνουν. Υπάρχουν επίσης εναλλακτικές σε ετικέτες που δεν χρησιμοποιούνται στη νέα προδιαγραφή εντός HTML. Ο παρακάτω πίνακας δείχνει τις καταργημένες ετικέτες HTML με επιλογές για την αντικατάστασή τους.

    Έτσι, μπορείτε να δομήσετε τα έγγραφά σας χρησιμοποιώντας τις νέες ετικέτες HTML5 αυτήν τη στιγμή.
    Ακρώνυμο. Χρησιμοποιήστε μια ετικέτα αντί
    Ενσωματωμένη μικροεφαρμογή. Χρησιμοποιήστε ή αντί.
    Καθορίζει το χρώμα, το μέγεθος και την οικογένεια γραμματοσειρών όλου του κειμένου στο έγγραφο. Χρησιμοποιήστε το αντί
    Μεγαλύτερο κείμενο. Χρησιμοποιήστε το αντί
    Κεντρικό κείμενο. Χρησιμοποιήστε το αντί
    Λίστα καταλόγων. Χρήση
      αντί γι' αυτόν
    Καθορίζει το χρώμα, το μέγεθος και την οικογένεια της γραμματοσειράς. Χρησιμοποιήστε το αντί
    Πλαίσιο εσωτερικά. Χρησιμοποιήστε το αντί
    Ορίζει ένα σύνολο πλαισίων. Για να προσθέσετε πολλά ενσωματωμένα πλαίσια, χρησιμοποιήστε πολλά στοιχεία
    Εναλλακτικό κείμενο εάν τα πλαίσια δεν υποστηρίζονται
    Διαγραμμένο κείμενο. Χρησιμοποιήστε ή αντί
    Μονοδιαστημικό κείμενο. Χρησιμοποιήστε το αντί
    Υπογραμμισμένο κείμενο. Χρησιμοποιήστε το αντί

    Οι ετικέτες HTML είναι η βάση της γλώσσας HTML. Οι ετικέτες χρησιμοποιούνται για την οριοθέτηση της αρχής και του τέλους των στοιχείων στη σήμανση.

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

    Όλα τα στοιχεία HTML χωρίζονται σε πέντε τύπους:

    • άδεια στοιχεία - , ,
      , , , , , ,
    Χρησιμοποιείται για την αποθήκευση πρόσθετων πληροφοριών σχετικά με τη σελίδα. Αυτές οι πληροφορίες χρησιμοποιούνται από τα προγράμματα περιήγησης για την επεξεργασία της σελίδας και από τις μηχανές αναζήτησης για την ευρετηρίασή της. Μπορεί να υπάρχουν πολλές ετικέτες σε ένα μπλοκ, αφού ανάλογα με τα χαρακτηριστικά που χρησιμοποιούνται φέρουν διαφορετικές πληροφορίες.
    Δείκτης μέτρησης σε δεδομένο εύρος.
    Ένα τμήμα ενός εγγράφου που περιέχει συνδέσμους πλοήγησης για τον ιστότοπο.
    Καθορίζει μια ενότητα που δεν υποστηρίζει δέσμες ενεργειών.
    Δοχείο για ενσωμάτωση πολυμέσων (π.χ. ήχου, βίντεο, μικροεφαρμογές Java, ActiveX, PDF και Flash). Μπορείτε επίσης να εισαγάγετε μια άλλη ιστοσελίδα στο τρέχον έγγραφο HTML. Η ετικέτα χρησιμοποιείται για τη μετάδοση των παραμέτρων του πρόσθετου.
    Ταξινομημένη αριθμημένη λίστα. Η αρίθμηση μπορεί να είναι αριθμητική ή αλφαβητική.
    Ένα δοχείο με τίτλο για μια ομάδα στοιχείων.
    Καθορίζει μια επιλογή/επιλογή για επιλογή από την αναπτυσσόμενη λίστα , ή ,.
    Πεδίο για την εμφάνιση του αποτελέσματος ενός υπολογισμού που υπολογίζεται με τη χρήση του σεναρίου.

    		Παράγραφοι στο κείμενο.
    Ορίζει παραμέτρους για πρόσθετα που έχουν δημιουργηθεί χρησιμοποιώντας το στοιχείο.
    Ένα στοιχείο δοχείου που περιέχει ένα στοιχείο και μηδέν ή περισσότερα στοιχεία. Από μόνο του δεν εμφανίζει τίποτα. Επιτρέπει στο πρόγραμμα περιήγησης να επιλέξει την πιο κατάλληλη εικόνα.
    Εξάγει κείμενο χωρίς μορφοποίηση, διατηρώντας κενά και διαλείμματα κειμένου. Μπορεί να χρησιμοποιηθεί για την εμφάνιση κωδικού υπολογιστή, μηνυμάτων email κ.λπ.
    Ένας δείκτης της ολοκλήρωσης μιας εργασίας κάθε είδους.
    Ορίζει ένα σύντομο απόσπασμα.
    Δοχείο για σύμβολα της Ανατολικής Ασίας και την αποκωδικοποίησή τους.
    Ορίζει το ένθετο κείμενό του ως το βασικό στοιχείο του σχολιασμού.
    Προσθέτει μια σύντομη περιγραφή πάνω ή κάτω από τους χαρακτήρες που περιέχονται στο στοιχείο, που εμφανίζονται με μικρότερη γραμματοσειρά.
    Επισημαίνει το ενσωματωμένο κείμενο ως πρόσθετο σχολιασμό.
    Εμφανίζει εναλλακτικό κείμενο εάν το πρόγραμμα περιήγησης δεν υποστηρίζει το στοιχείο.
    Εμφανίζει κείμενο που δεν είναι τρέχον με διαγραφή.
    Χρησιμοποιείται για την εμφάνιση κειμένου που αντιπροσωπεύει το αποτέλεσμα της εκτέλεσης κώδικα προγράμματος ή σεναρίου, καθώς και μηνυμάτων συστήματος. Εμφανίζεται με γραμματοσειρά monospace.
    Χρησιμοποιείται για τον ορισμό ενός σεναρίου από την πλευρά του πελάτη (συνήθως JavaScript). Περιέχει είτε κείμενο σεναρίου είτε σημεία σε ένα εξωτερικό αρχείο σεναρίου χρησιμοποιώντας το χαρακτηριστικό src.
    Καθορίζει μια λογική περιοχή (τμήμα) μιας σελίδας, συνήθως με κεφαλίδα.
    Ένα στοιχείο ελέγχου που σας επιτρέπει να επιλέξετε τιμές από ένα προτεινόμενο σύνολο. Οι τιμές παραλλαγής τοποθετούνται στο .
    Εμφανίζει κείμενο σε μικρότερο μέγεθος γραμματοσειράς.
    Καθορίζει τη θέση και τον τύπο των εναλλακτικών πόρων μέσων για το , , .
    Δοχείο για ενσωματωμένα στοιχεία. Μπορεί να χρησιμοποιηθεί για τη μορφοποίηση αποσπασμάτων κειμένου, όπως η επισήμανση μεμονωμένων λέξεων με χρώμα.
    Δίνει έμφαση στο κείμενο, επισημαίνοντάς το με έντονη γραφή.
    Περιλαμβάνει ενσωματωμένα φύλλα στυλ.
    Καθορίζει τη γραφή των συμβόλων, για παράδειγμα, δείκτη στοιχείων σε χημικούς τύπους.
    Δημιουργεί έναν ορατό τίτλο για την ετικέτα. Εμφανίζεται με ένα γεμάτο τρίγωνο, κάνοντας κλικ σε αυτό σας επιτρέπει να δείτε τις λεπτομέρειες του τίτλου.
    Καθορίζει την εκθέτη ορθογραφία των χαρακτήρων.

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

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

    Τα συστατικά frobonitor και barbinator τηγανίζονται.

    Και οδηγεί (πρώτη παράγραφος ενός άρθρου στη δημοσιογραφία)


    Γατάκια «υιοθετημένα» από κατοικίδιο κουνέλι

    Έξι εγκαταλελειμμένα γατάκια βρήκαν μια απροσδόκητη νέα μητρική φιγούρα - ένα κατοικίδιο κουνέλι.


    Η κτηνιατρική νοσοκόμα Melanie Humble πήρε τα γατάκια τριών εβδομάδων στο σπίτι της στο Αμπερντίν.


    Με τη σειρά του, όπως και πριν, σημαίνει την αυξημένη σημασία του περιεχομένου του.

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

    Ανά aspera ad Astra— μεταφρασμένο από τα λατινικά, το ρητό σημαίνει «Μέσα από αγκάθια στα αστέρια».

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

    Δεν μπορείτε να εκτελέσετε, μπορείτε να έχετε έλεος.

    Διαβάστε προσεκτικά το συμβόλαιο! Κατά κανόνα, επισημαίνουμε "ψιλό κείμενο" (πληροφορίες που αποτελούν νομική διατύπωση, όπως άδεια επιχείρησης ή νομική διεύθυνση κ.λπ.) με ένα στοιχείο με μια κλάση που καθορίζει μια μικρότερη γραμματοσειρά στους οπτικούς πράκτορες χρηστών. Τώρα ένα νέο παλιό σημασιολογικό στοιχείο εμφανίστηκε στο οπλοστάσιό μας - .Holivar o Προηγουμένως δεν ήταν τίποτα περισσότερο από ένα διαγραμμένο κείμενο. Τώρα αντιπροσωπεύει πληροφορίες που έχουν χάσει τη συνάφειά τους.
    Έχουμε επίσης ένα στοιχείο του οποίου το προεπιλεγμένο αποτέλεσμα σε οπτικούς πράκτορες χρήστη είναι το κείμενο διαγραφής. Σημαίνει αλλαγές σε ένα έγγραφο και με την πρώτη ματιά ο σκοπός τους μπορεί να φαίνεται ο ίδιος. Ωστόσο, υπάρχει ένα λεπτό σημείο εδώ. Ας δούμε ένα παράδειγμα σελίδας προϊόντος σε ηλεκτρονικό κατάστημα.
    Μπορεί να αναφέρει δύο τιμές, εκ των οποίων η μία είναι διαγραμμένη. Το σημειώνουμε με το στοιχείο . Αυτό σημαίνει ότι η παλιά τιμή έχει χάσει τη συνάφειά της (δεν έχει σημασία πότε ήταν, το ίδιο το γεγονός είναι σημαντικό). Πώς να ελέγξετε αν δεν είναι; συνεπάγεταιαλλαγές που έγιναν στο έγγραφο (το σημαντικό είναι ότι). Στην περίπτωσή μας, το νέο έγγραφο περιέχει ήδη άσχετες πληροφορίες Νέα σημασιολογία και παλιό doctype Εάν, για κάποιο άγνωστο λόγο, δεν μπορείτε να αντικαταστήσετε το doctype με ένα νέο και να το τοποθετήσετε επίσημα σε HTML 4.01, μην απελπίζεστε. Χρησιμοποιήστε παλιά νέα στοιχεία με νέο νόημα και με τον καιρό θα ευχαριστήσετε τον εαυτό σας. Ίσως κάποιος θα πει ότι αυτό είναι λάθος, αλλά αυτά τα στοιχεία δεν είναι καν άκυρα. Επιπλέον, η HTML5 σχεδιάστηκε με γνώμονα τη συμβατότητα προς τα πίσω και το ίδιο ισχύει για τη νέα σημασιολογία των παλαιών στοιχείων. Τίποτα δεν έχει αλλάξει ριζικά, αλλά έχει προστεθεί μόνο ένα σημασιολογικό καρύκευμα.

    Όλοι όσοι ασχολούνται με την ανάπτυξη ιστού γενικά και τη διάταξη ειδικότερα γνωρίζουν την προδιαγραφή 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 λειτουργεί και τις εμφανίζει σωστά.
    Αυτό είναι όλο για σήμερα. Αν σε ενδιαφέρει, εδώ έγραψα για την εφαρμογή της νέας προδιαγραφής στην πράξη. Μείνετε σε επαφή - θα είναι ενδιαφέρον.



    Συνιστούμε να διαβάσετε



    Ετικέτα για τη δημιουργία πίνακα.
    Καθορίζει το σώμα του πίνακα.
    Δημιουργεί ένα κελί πίνακα.
    Χρησιμοποιείται για τη δήλωση θραυσμάτων κώδικα HTML που μπορούν να κλωνοποιηθούν και να εισαχθούν σε ένα έγγραφο μέσω ενός σεναρίου. Το περιεχόμενο μιας ετικέτας δεν είναι θυγατρικό στοιχείο.
    Δημιουργεί μεγάλα πεδία εισαγωγής κειμένου.
    Ορίζει το υποσέλιδο του πίνακα.
    Δημιουργεί έναν τίτλο κελιού πίνακα.
    Καθορίζει τον τίτλο του πίνακα.
    Καθορίζει την ημερομηνία/ώρα.
    Ο τίτλος ενός εγγράφου HTML που εμφανίζεται στην κορυφή της γραμμής τίτλου του προγράμματος περιήγησης. Μπορεί επίσης να εμφανίζεται στα αποτελέσματα αναζήτησης, επομένως αυτό θα πρέπει να λαμβάνεται υπόψη κατά την παροχή ενός τίτλου.
    Δημιουργεί μια σειρά πίνακα.
    Προσθέτει υπότιτλους για στοιχεία και .
    Επισημαίνει ένα απόσπασμα κειμένου με υπογράμμιση, χωρίς πρόσθετη έμφαση.
    		Δημιουργεί μια λίστα με κουκκίδες.
    Επισημαίνει μεταβλητές από προγράμματα εμφανίζοντάς τες με πλάγιους χαρακτήρες.
    Προσθέτει αρχεία βίντεο στη σελίδα. Υποστηρίζει 3 μορφές βίντεο: MP4, WebM, Ogg.
    Υποδεικνύει στο πρόγραμμα περιήγησης όπου μπορεί να σπάσει μια μεγάλη ουρά.