Δεν χρειάζεται να χρησιμοποιείτε ετικέτες div κάθε φορά. Χρησιμοποιήστε αυτές τις σημασιολογικές ετικέτες HTML για να κάνετε τον ιστότοπό σας πιο δομημένο και προσβάσιμο.
Πριν από την εισαγωγή του σημασιολογικού HTML, οι προγραμματιστές χρησιμοποιούσαν div για να τακτοποιήσουν το περιεχόμενο. Τα στοιχεία Div δεν έχουν νόημα από μόνα τους. Παρέχουν μόνο έναν τρόπο εφαρμογής στυλ και τακτοποίησης περιεχομένου.
Η λέξη σημασιολογικό σημαίνει που σχετίζονται με το νόημα. Τα σημασιολογικά στοιχεία HTML περιγράφουν τον σκοπό του περιεχομένου τους. Παρέχουν νόημα στον προγραμματιστή, τον χρήστη, τις μηχανές αναζήτησης και τις υποστηρικτικές τεχνολογίες. Ακολουθεί μια λίστα με δημοφιλείς σημασιολογικές ετικέτες HTML που μπορείτε να χρησιμοποιήσετε στο επόμενο έργο σας.
Τι είναι τα Divs;
Στην HTML, το στοιχείο div (διαίρεση) είναι ένα κοντέινερ σε επίπεδο μπλοκ. Χρησιμοποιείτε ένα div για να ομαδοποιήσετε ή να διαιρέσετε στοιχεία HTML σε ενότητες σε μια ιστοσελίδα. Η σύνταξη είναι όπως φαίνεται παρακάτω:
<div>
div>
Οφέλη από τη χρήση σημασιολογικών στοιχείων HTML σε Divs
Η HTML5 εισήγαγε σημασιολογικά στοιχεία HTML για να διευκολύνει την ανάγνωση του κώδικα. Τα σημασιολογικά στοιχεία παρέχουν νόημα και δομή στο περιεχόμενο Ιστού.
Κάνουν τον κώδικά σας κατανοητό σε άλλους προγραμματιστές. Διευκολύνουν επίσης τις μηχανές αναζήτησης να βρουν το περιεχόμενό σας και να οδηγήσουν την επισκεψιμότητα στον ιστότοπό σας. Εδώ είναι μερικά σημασιολογικά στοιχεία που μπορείτε να χρησιμοποιήσετε στο δικό σας Έργα HTML και CSS.
1.
ο Η ετικέτα ορίζει την ενότητα κεφαλίδας σε ένα έγγραφο. Συνήθως, περιέχει το λογότυπο του ιστότοπου, την πλοήγηση και τον τίτλο της σελίδας. Είναι η ενότητα που εμφανίζεται στην κορυφή μιας ιστοσελίδας. Μπορείτε να προσαρμόσετε την κεφαλίδα σύμφωνα με τις ανάγκες σας. Η σύνταξη έχει ως εξής:
<σώμα><επί κεφαλής>
<h1> Γεια σου!h1>
<Π>Είμαι κεφαλιάΠ>
επί κεφαλής>
σώμα>
2.
ο Η ετικέτα περιέχει τους συνδέσμους πλοήγησης για τον ιστότοπο. Αυτά μπορεί να είναι μενού, πίνακες περιεχομένων ή ευρετήρια. Συνήθως τοποθετείται μέσα στο ετικέτα. Η σύνταξη έχει ως εξής:
<επί κεφαλής><nav>
<ul>
<li>Οι σύνδεσμοι της ιστοσελίδας μουli>
<li><έναhref="#"> Σπίτιένα>li>
<li ><έναhref="#"> Σχετικά με εμάς ένα>li>
ul>
nav>
<h1>Το παραπάνω είναι μέρος πλοήγησης του ιστότοπού μου.h1>
επί κεφαλής>
Στο πρόγραμμα περιήγησης θα μοιάζει με αυτό:
Μπορείτε να χρησιμοποιήσετε μοντέλα διάταξης CSS όπως π.χ CSS flexbox για να ευθυγραμμιστεί το
3.
ο Η ετικέτα περιέχει το κύριο περιεχόμενο της ιστοσελίδας. Διαχωρίζει το περιεχόμενο από την κεφαλίδα, την πλαϊνή γραμμή και το υποσέλιδο. Το κύριο αντιπροσωπεύει το κυρίαρχο περιεχόμενο του Ενότητα.
<σώμα><επί κεφαλής>
<τίτλος> Στοιχεία ιστότοπου τίτλος>
επί κεφαλής>
<κύριος>
<Π> Αυτός ο ιστότοπος είναι μια σύντομη επίδειξη του πώς λειτουργεί η κύρια ετικέτα.Π>
<Π> Περικλείει το μέρος της ιστοσελίδας με χρήσιμο περιεχόμενο.Π>
κύριος>
<υποσέλιδο>
<h3> Αυτό είναι ένα υποσέλιδο h3>
υποσέλιδο>
σώμα>
Φαίνεται κάπως έτσι:
4.
Χρησιμοποιήστε το ετικέτα για να ορίσετε αυτόνομες ενότητες σε ένα έγγραφο ή ιστότοπο. Για παράδειγμα, μπορείτε να τα χρησιμοποιήσετε για τη δομή αναρτήσεων ιστολογίου, περιοδικών ή καρτών προϊόντων. ο Το στοιχείο μπορεί να περικλείει άλλα στοιχεία, συμπεριλαμβανομένων άλλων άρθρων, ενοτήτων και επικεφαλίδων. Τα στοιχεία που εσωκλείονται πρέπει να σχετίζονται με το θέμα του άρθρου.
<άρθρο>
<h1>Πιο περίεργο από μυθιστόρημαh1><άρθρο>
<h3>Εισαγωγήh3>
<Π>Τα γεγονότα και τα πρόσωπα που αφηγούνται σε αυτό το βιβλίο είναι πλασματικά.Π>
άρθρο>
<άρθρο>
<h3>Κεφάλαιο έναh3>
<Π> Η μέρα ήταν φωτεινή και ο ήλιος χαμογέλασε από τον ουρανόΠ>
άρθρο>
άρθρο>
Φαίνεται κάπως έτσι:
5.
ο Η ετικέτα περιέχει το περιεχόμενο που σχετίζεται με το κύριο περιεχόμενο. Χρησιμοποιήστε αυτήν την ετικέτα για να δημιουργήσετε πλευρικές γραμμές για εισαγωγικά, σχόλια ή φωνές. επισημαίνει πληροφορίες που μπορεί να χάσει ο αναγνώστης. Ξεχωρίζει από το υπόλοιπο περιεχόμενο.
html><html>
<στυλ>
σώμα{
background-color:#abdbe3;
}
κατά μέρος {
πλάτος: 30%;
padding-αριστερά: 0,5rem;
περιθώριο-αριστερά: 1rem;
flex: αριστερά;
box-shadow: inset 5px 0 5px -5px green;
στυλ γραμματοσειράς: πλάγια;
χρώμα: κόκκινο;
}
στην άκρη > p {
περιθώριο: 0,5 rem;
στυλ>
<σώμα>
<κύριος>
<h1> Weaver Birdsh1>
<Π>Οι Ploceidae είναι μια οικογένεια μικρών πουλιών περαστικών. Πολλά από τα οποία ονομάζονται υφαντές, υφαντοπουλάκια, υφαντές σπίνοι και επίσκοποι.Π>
<κατά μέρος>
<Π>Βασίλειο: Animalia
Phylum: ΧορδάταΠ>κατά μέρος>
<Π>Στις πιο πρόσφατες ταξινομήσεις, το Ploceidae είναι ένα clade, αποκλείει ορισμένα πουλιά που έχουν τοποθετηθεί ιστορικά στην οικογένεια. Μερικά από τα σπουργίτια, αλλά περιλαμβάνει τη μονοτυπική υποοικογένεια Amblyospizinae.Π>
κύριος>
σώμα>
html>
6.
ο Το στοιχείο περιέχει ένα μέρος της σελίδας χωρίς συγκεκριμένο σημασιολογικό στοιχείο. Οι ενότητες μπορεί να έχουν μια επικεφαλίδα για να εισάγουν το περιεχόμενο και να περικλείουν άλλα στοιχεία HTML. αντιπροσωπεύει τα στοιχεία μιας ιστοσελίδας όπως κεφάλαια σε βιβλίο ή ιστολόγιο.
html><html>
<σώμα>
<h1>Η Βίβλοςh1>
<Ενότητα>
<h2>Εισαγωγήh2>
<Π>Η Βίβλος είναι μια συλλογή από θρησκευτικές γραφές ιερές στον Χριστιανισμό, τον Ιουδαϊσμό, τον Σαμαρετανισμό. Η Βίβλος είναι μια ανθολογία – μια συλλογή κειμένων ποικίλων μορφών – γραμμένο αρχικά στα εβραϊκά, αραμαϊκά και ελληνικά Κοινά.Π>
Ενότητα>
<Ενότητα>
<h2>Κεφάλαιο πρώτο: Γένεσηh2>
<Π>Το Βιβλίο της Γένεσης είναι το πρώτο βιβλίο της Εβραϊκής Βίβλου και της Χριστιανικής Παλαιάς Διαθήκης. Το εβραϊκό του όνομα είναι το ίδιο με την πρώτη του λέξη, Bereshit. Η Γένεση είναι μια αφήγηση της δημιουργίας του κόσμου, της πρώιμης ιστορίας της ανθρωπότητας και των προγόνων του Ισραήλ και της καταγωγής του εβραϊκού λαούΠ>
Ενότητα>σώμα>
html>
Φαίνεται κάπως έτσι:
7.
ο εσωτερικά στοιχεία, όπως εικόνες ή διαγράμματα. Αυτές οι εικόνες αναφέρονται στο περιεχόμενο στην κύρια σελίδα. Οι αριθμοί συνοδεύονται από λεζάντες που καθορίζονται από το στοιχείο. ο εξηγεί περί τίνος πρόκειται η εικόνα. ο
html><html>
<σώμα>
<κύριος>
<Ενότητα>
<h1>Μέρη ενός υπολογιστήh1>
<Π> Υπάρχουν πολλά μέρη που συνεργάζονται για να δημιουργήσουν έναν υπολογιστήΠ>
<εικόνα>
<imgsrc="some-url.jpg"alt="ποντίκι υπολογιστή">
<figcaption>Αυτό είναι ένα ποντίκι υπολογιστήfigcaption>
εικόνα>
Ενότητα>
κύριος>
σώμα>
html>
Μπορείτε να προχωρήσετε περισσότερο και να μάθετε πώς να δημιουργήσετε εικόνες με απόκριση σε HTML.
ο Το στοιχείο HTML εσωκλείει πληροφορίες στο κάτω μέρος της ιστοσελίδας. Είναι το αντίθετο του στοιχείο. ο μπορεί να περιέχει πληροφορίες για τον ιδιοκτήτη της σελίδας. Αυτό περιλαμβάνει δεδομένα πνευματικών δικαιωμάτων ή συνδέσμους προς πρόσθετες πληροφορίες του ιστότοπου.
html><html>
<σώμα>
<κύριος>
<Ενότητα>
<h1>Μέρη ενός υπολογιστήh1>
<εικόνα>
<imgsrc="some-url.jpg"alt="ποντίκι υπολογιστή">
<figcaption>Αυτό είναι ένα ποντίκι υπολογιστήfigcaption>
εικόνα>
Ενότητα>
κύριος>
<υποσέλιδο>
<Π> Κατασκευάζεται από την ComputerTech © 2023Π>
υποσέλιδο>
σώμα>
html>
Ο παραπάνω κώδικας προσθέτει ένα υποσέλιδο στο Μέρη ενός υπολογιστή σελίδα όπως φαίνεται στην παρακάτω εικόνα.
Γιατί να χρησιμοποιήσουμε σημασιολογικά στοιχεία HTML;
Η χρήση σημασιολογικών στοιχείων HTML δίνει πλαίσιο στον κώδικα. Όποιος κοιτούσε τον κώδικα θα μπορούσε εύκολα να τον καταλάβει. Οι ετικέτες διευκολύνουν το στυλ των στοιχείων και τη συνεργασία σε έργα.
Μπορείτε να χρησιμοποιήσετε σημασιολογικό HTML με βιβλιοθήκες και πλαίσια frontend. Τα περισσότερα σύγχρονα προγράμματα περιήγησης ιστού προτιμούν τα σημασιολογικά στοιχεία HTML έναντι των παραδοσιακών στοιχείων. Ξεκινήστε να χρησιμοποιείτε σημασιολογικό HTML και παρακολουθήστε τον κώδικά σας να φαίνεται σύγχρονος, ευανάγνωστος και εμφανίσιμος.