Σημασιολογικά στοιχεία HTML5

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

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

Τι είναι τα Σημασιολογικά Στοιχεία;

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

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

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

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

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

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

Κατάλογος νέων σημασιολογικών στοιχείων

Τα σημασιολογικά στοιχεία που προστίθενται στο HTML5 είναι:

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

Ένα παράδειγμα διάταξης σημασιολογικού στοιχείου από τα w3schools

Σημασιολογικά στοιχεία που καθορίζουν μια σελίδα από τα w3schools

Γιατί να χρησιμοποιήσετε σημασιολογικά στοιχεία;

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

Ενώ αυτό το δεύτερο μπλοκ κώδικα χρησιμοποιεί μη σημασιολογικά στοιχεία:

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

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

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

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

και

«Ποια είναι η διαφορά;», μπορείτε να ρωτήσετε. Και τα δύο αυτά στοιχεία χρησιμοποιούνται για τομή ενός περιεχομένου και ναι, μπορούν σίγουρα να χρησιμοποιηθούν εναλλακτικά. Είναι θέμα σε ποια κατάσταση. Το HTML4 προσέφερε μόνο έναν τύπο στοιχείου κοντέινερ, δηλαδή . Ενώ αυτό εξακολουθεί να χρησιμοποιείται στο HTML5, το HTML5 μας παρείχε και με έναν τρόπο αντικατάστασης .

Τα στοιχεία και τα στοιχεία είναι εννοιολογικά παρόμοια και εναλλάξιμα. Για να αποφασίσετε ποια από αυτά πρέπει να επιλέξετε, λάβετε υπόψη τα εξής:

  1. Ένα άρθρο προορίζεται να διανεμηθεί ή να επαναχρησιμοποιηθεί ανεξάρτητα.
  2. Μια ενότητα είναι μια θεματική ομαδοποίηση περιεχομένου.

Top Stories

News

Story 1 Story 2 Story 3

Sport

Story 1 Story 2 Story 3

και

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

Company A

  • Home
  • About
  • Contact us

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

Heading 1

Subheading 1

Subheading 2

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

προς το

και συμπεριλαμβανομένων .

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

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Πριν από το HTML5, δημιουργήθηκαν τα μενού μας με

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

    
           
    • Home
    • About
    • Contact us

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

    ©Company A

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

    ©Company A Date

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

    Tuesday, 31 October 2017

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

    και

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

    Shadow of Mordor Cover art for Middle-earth: Shadow of Mordor 

    Μάθετε περισσότερα σχετικά με τα νέα στοιχεία HTML5:

    • Το w3schools παρέχει απλές και σαφείς περιγραφές πολλών από τα στοιχεία ειδήσεων και πώς / πού πρέπει να χρησιμοποιηθούν.
    • Το MDN παρέχει επίσης μια εξαιρετική αναφορά για όλα τα στοιχεία HTML και πηγαίνει βαθύτερα σε κάθε ένα.