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

Η σημασιολογία (από την αρχαία ελληνική) ορίζεται ως η μελέτη της σημασίας της γλώσσας.

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

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

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

Μη σημασιολογικόΠαραδείγματα στοιχείων: <div> και <span> - δεν μπορούν να παρέχουν πληροφορίες για το περιεχόμενό τους.

ΣημασιολογίαΠαραδείγματα στοιχείων: <form>, <table> και <img> - καθαρά ορίζουν το περιεχόμενό τους.

Υποστήριξη περιηγητών

Ναι Ναι Ναι Ναι Ναι

Όλοι οι σύγχρονοι περιηγητές υποστηρίζουν τα σημασιολογικά στοιχεία του HTML5.

Επιπλέον, μπορείτε να "βοηθήσετε" τους παλιούς περιηγητές να χειριστούν τα "άγνωστα στοιχεία".

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

Τα νέα σημασιολογικά στοιχεία του HTML5

Πολλοί ιστότοποι περιέχουν κώδικα HTML που δείχνουν την πλοήγηση, την κεφαλίδα και τα πόδια της σελίδας, όπως αυτά: <div id="nav"> <div class="header"> <div id="footer">.

Το HTML5 παρέχει νέες σημασιολογικές στοιχεία για τη χαρακτηριστική διαίρεση των μέρους της σελίδας:

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

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

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

Το στοιχείο <section> του HTML5

Το στοιχείο <section> ορίζει την ενότητα ενός έγγραφου.

Σύμφωνα με το έγγραφο HTML του W3C: "Η ενότητα (section) είναι ένα σύνολο περιεχομένου με θέμα, που συνήθως έχει τίτλο".

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

Παράδειγμα

<section>
   <h1>WWF</h1>
   <p>Το World Wide Fund for Nature (WWF) είναι....</p>
</section>

Δοκιμάστε το προσωπικά σας

Το στοιχείο <article> του HTML5

Το στοιχείο <article> καθορίζει αυτόνομο περιεχόμενο που περιέχει.

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

Εφαρμογές του στοιχείου <article>:

  • Φόρουμ
  • Blog
  • Ειδήσεις

Παράδειγμα

<article>
   <h1>Τι κάνει το WWF;</h1>
   <p>Η αποστολή του WWF είναι να σταματήσει τη βλάβη του φυσικού περιβάλλοντος του πλανήτη μας,</p>
  και να δημιουργήσουμε ένα μέλλον όπου οι άνθρωποι ζουν σε συμφωνία με τη φύση.</p>
</article>

Δοκιμάστε το προσωπικά σας

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

Στα πρότυπα HTML5, το στοιχείο <article> ορίζει έναν πλήρη αυτοπεριέχοντα μπλοκ σχετικών στοιχείων.

Το στοιχείο <section> ορίζεται ως μπλοκ στοιχείων που σχετίζονται.

Μπορούμε να χρησιμοποιήσουμε αυτήν τη διατύπωση για να αποφασίσουμε πώς να ενσωματώσουμε τα στοιχεία; Όχι, δεν μπορούμε!

Στο Διαδίκτυο, θα βρείτε σελίδες HTML με στοιχεία <section> που περιέχουν στοιχεία <article>, καθώς και σελίδες με στοιχεία <article> που περιέχουν στοιχεία <sections>.

Θα βρείτε επίσης στοιχεία <section> που περιέχουν στοιχεία <section>, καθώς και στοιχεία <article> που περιέχουν στοιχεία <sections>.

Το στοιχείο <header> του HTML5

Το στοιχείο <header> καθορίζει το κεφαλίδι για το έγγραφο ή το κεφάλαιο.

Το στοιχείο <header> πρέπει να χρησιμοποιείται ως κάδος περιεχομένου εισαγωγικών.

Ένα έγγραφο μπορεί να περιέχει πολλαπλά στοιχεία <header>.

Το παρακάτω παράδειγμα καθορίζει το κεφαλίδι ενός άρθρου:

Παράδειγμα

<article>
   <header>
     <h1>Τι κάνει το WWF;</h1>
     <p>Η αποστολή του WWF:</p>
   </header>
   <p>Η αποστολή του WWF είναι να σταματήσει τη βλάβη του φυσικού περιβάλλοντος του πλανήτη μας,</p>
  και να δημιουργήσουμε ένα μέλλον όπου οι άνθρωποι ζουν σε συμφωνία με τη φύση.</p>
</article>

Δοκιμάστε το προσωπικά σας

Το στοιχείο <footer> του HTML5

Το στοιχείο <footer> καθορίζει την υποσέλιδα για το έγγραφο ή το κεφάλαιο.

Το στοιχείο <footer> πρέπει να παρέχει πληροφορίες για τα στοιχεία που περιέχει.

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

Μπορείτε να χρησιμοποιήσετε πολλαπλές στοιχεία <footer> σε ένα έγγραφο.

Παράδειγμα

<footer>
   <p>Αναρτήθηκε από: Hege Refsnes</p>
   <p>Επικοινωνιακή πληροφορία: <a href="mailto:someone@example.com">
  <a href="someone@example.com"></a>.</p>
</footer>

Δοκιμάστε το προσωπικά σας

HTML5 <nav> στοιχείο

Το στοιχείο <nav> ορίζει μια συλλογή σύνδεσμων πλοήγησης.

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

Παράδειγμα

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

Δοκιμάστε το προσωπικά σας

HTML5 <aside> στοιχείο

<aside> Το στοιχείο περιέχει ορισμένα περιεχόμενα εκτός από το κύριο περιεχόμενο της σελίδας (π.χ. πλευρική στήλη).

Το περιεχόμενο του aside πρέπει να είναι σχετικό με το περιεχόμενο γύρω του.

Παράδειγμα

<p>Η οικογένειά μου και εγώ επισκέφτηκα το Epcot center το καλοκαίρι.</p>
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

Δοκιμάστε το προσωπικά σας

HTML5 <figure> και <figcaption> στοιχεία

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

Η λειτουργία του τίτλου (caption) είναι να προσθέσει μια ορατή εξήγηση στην εικόνα.

Με το HTML5, οι εικόνες και τα τίτλοι μπορούν να συνδυαστούν σε <figure> στο στοιχείο:

Παράδειγμα

<figure>
   <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
   <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

Δοκιμάστε το προσωπικά σας

<img> Το στοιχείο defines an image,<figcaption> Το στοιχείο defines a title.

Γιατί να χρησιμοποιήσετε στοιχεία HTML5;

Αν χρησιμοποιήσετε το HTML4, οι προγραμματιστές θα χρησιμοποιήσουν τα αγαπημένα τους ονόματα ιδιοτήτων για να ρυθμίσουν τα στυλ των στοιχείων της σελίδας:

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

Όπως αυτό, ο περιηγητής δεν μπορεί να αναγνωρίσει το σωστό περιεχόμενο της ιστοσελίδας.

Και μέσω των στοιχείων HTML5, όπως: <header> <footer> <nav> <section> <article>, το πρόβλημα λύεται.

Σύμφωνα με το W3C, το Semantic Web:

“Επιτρέπει τη διακίνηση και επαναχρησιμοποίηση δεδομένων μεταξύ εφαρμογών, επιχειρήσεων και ομάδων.”

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

Ακολουθούν τα νέα σημασιολογικά στοιχεία HTML5 που είναι κατάλογος κατά αλφαβητική σειρά.

Αυτοί οι σύνδεσμοι οδηγούν στο πλήρες εγχειρίδιο αναφοράς HTML.

Ετικέτα Περιγραφή
<article> Ορίζει το άρθρο.
<aside> Ορίζει το περιεχόμενο εκτός της σελίδας.
<details> Ορίζει τις πρόσθετες λεπτομέρειες που μπορούν να δείξουν ή να κρύψουν οι χρήστες.
<figcaption> Ορίζει τον τίτλο του στοιχείου <figure>.
<figure> Ορίζει το περιεχόμενο εκτός της σελίδας.
<footer> Ορίζει το πιέωμα ή το πόδι του εγγράφου ή του κεφαλαίου.
<header> Ορίζει το κεφαλίδι του εγγράφου ή του κεφαλαίου.
<main> Ορίζει το κύριο περιεχόμενο του εγγράφου.
<mark> Ορίζει το σημαντικό ή τον έμφαση κείμενο.
<nav> Ορίζει τη σύνδεση πλοήγησης.
<section> Ορίζει το κεφάλαιο του εγγράφου.
<summary> Ορίζει τον ορατό τίτλο του στοιχείου <details>.
<time> Ορίζει την ημερομηνία και την ώρα.