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

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

Ορισμένα από τα σημασιολογικά στοιχεία που υποστηρίζονται από την HTML5 περιλαμβάνουν:

• <header>: Χρησιμοποιείται για τον κύριο τίτλο ή την εισαγωγή μιας ιστοσελίδας.
• <nav>: Χρησιμοποιείται για την περιοχή πλοήγησης μιας ιστοσελίδας.
• <main>: Χρησιμοποιείται για το κύριο περιεχόμενο μιας ιστοσελίδας.
• <article>: Χρησιμοποιείται για αυτόνομα και αυτότελη κομμάτια περιεχομένου μιας ιστοσελίδας, όπως ένα άρθρο ή μια είδηση.
• <section>: Χρησιμοποιείται για να ομαδοποιήσει λογικά σχετιζόμενο περιεχόμενο μιας ιστοσελίδας.
• <aside>: Χρησιμοποιείται για πληροφορίες που είναι άμεσα σχετικές με το περιεχόμενο γύρω του, όπως πλευρικά πλαίσια ή widget.
• <footer>: Χρησιμοποιείται για το τέλος μιας ιστοσελίδας και περιλαμβάνει πληροφορίες όπως συντάκτες, πνευματικά δικαιώματα ή συνδέσμους επικοινωνίας.

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

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

Παραδείγματα μη σημασιολογικών στοιχείων: <div> και <span> – Δεν περιγράφουν το περιεχόμενό τους.

Παραδείγματα σημασιολογικών στοιχείων: <form>, <table> και <article> – Περιγράφουν σαφώς το περιεχόμενό τους.

Τα σημασιολογικά στοιχεία βοηθούν στην κατανόηση της δομής της ιστοσελίδας και επιτρέπουν στον περιηγητή και στις μηχανές αναζήτησης να κατανοήσουν καλύτερα το περιεχόμενο της σελίδας. Αυτό έχει θετικές επιπτώσεις στην προσβασιμότητα, την αναζητησιμότητα και την απομακρυσμένη αναζήτηση (web scraping).

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

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

• <article>: Χρησιμοποιείται για ανεξάρτητο και αυτόνομο περιεχόμενο, όπως ένα άρθρο ή μια είδηση.
• <aside>: Χρησιμοποιείται για πληροφορίες που είναι συναφείς με το κύριο περιεχόμενο, αλλά δεν είναι απαραίτητες για την κατανόησή του.
• <details>: Χρησιμοποιείται για την αναδίπλωση περιεχομένου που μπορεί να εμφανιστεί ή να αποκρυφθεί από τον χρήστη.
• <figcaption>: Χρησιμοποιείται για την περιγραφή μιας εικόνας ή ενός γραφήματος.
• <figure>: Χρησιμοποιείται για να ομαδοποιήσει μια εικόνα ή ένα γράφημα με την αντίστοιχη λεζάντα (figcaption).
• <footer>: Χρησιμοποιείται για το τέλος μιας ιστοσελίδας ή του περιεχομένου ενός τμήματος.
• <header>: Χρησιμοποιείται για το κεφαλίδα μιας ιστοσελίδας ή του περιεχομένου ενός τμήματος.

• <main>: Χρησιμοποιείται για τον κύριο περιεχόμενο της ιστοσελίδας.
• <mark>: Χρησιμοποιείται για την επισήμανση ή την κορυφαία προειδοποίηση ενός κειμένου.
• <nav>: Χρησιμοποιείται για την περιοχή πλοήγησης μιας ιστοσελίδας.
• <section>: Χρησιμοποιείται για να ομαδοποιήσει λογικά σχετιζόμενο περιεχόμενο μιας ιστοσελίδας.
• <summary>: Χρησιμοποιείται για την περίληψη ενός <details> στοιχείου.
• <time>: Χρησιμοποιείται για την αναπαράσταση μιας ημερομηνίας ή ώρας.

[adinserter block=”2″]

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

Το στοιχείο <section> ορίζει ένα τμήμα (section) σε ένα έγγραφο.

Σύμφωνα με την τεκμηρίωση της W3C για την HTML: “Ένα τμήμα είναι μια θεματική ομαδοποίηση περιεχομένου, συνήθως με έναν τίτλο (heading).”

Παραδείγματα όπου μπορεί να χρησιμοποιηθεί το στοιχείο <section>:

• Κεφάλαια
• Εισαγωγή
• Στοιχεία ειδήσεων
• Στοιχεία επικοινωνίας

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

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

Παρακάτω παρουσιάζεται ένα παράδειγμα χρήσης του στοιχείου <section> σε μια ιστοσελίδα:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <section></title>
</head>
<body>
  <header>
    <h1>Καλώς ήρθατε στην ιστοσελίδα μας!</h1>
  </header>

  <nav>
    <!-- Περιοχή πλοήγησης -->
  </nav>

  <section>
    <h2>Εισαγωγή</h2>
    <p>Καλωσορίσατε στην ιστοσελίδα μας! Εδώ θα βρείτε πληροφορίες σχετικά με την εταιρία μας και τις υπηρεσίες που παρέχουμε.</p>
  </section>

  <section>
    <h2>Υπηρεσίες</h2>
    <p>Παρέχουμε μια πληθώρα υπηρεσιών για τους πελάτες μας. Από την ανάπτυξη ιστοσελίδων μέχρι την παροχή τεχνικής υποστήριξης, είμαστε εδώ για να σας βοηθήσουμε.</p>
  </section>

  <section>
    <h2>Επικοινωνία</h2>
    <p>Για οποιαδήποτε απορία, ερώτηση ή πληροφορία παρακαλούμε να επικοινωνήσετε μαζί μας στα παρακάτω στοιχεία:</p>
    <ul>
      <li>Τηλέφωνο: 1234567890</li>
      <li>Email: info@example.com</li>
    </ul>
  </section>

  <footer>
    <p>&copy; 2023 Όλα τα δικαιώματα κατοχυρωμένα.</p>
  </footer>
</body>
</html>

Σε αυτό το παρ

άδειγμα, η ιστοσελίδα χωρίζεται σε τρία τμήματα με χρήση του στοιχείου <section>. Κάθε τμήμα περιγράφει ένα θεματικά συνδεδεμένο περιεχόμενο και περιέχει έναν τίτλο για την επισήμανσή του. Μέσα σε κάθε τμήμα, χρησιμοποιούνται επίσης άλλα σημασιολογικά στοιχεία, όπως <header>, <nav> και <footer>, για να δομήσουν την ιστοσελίδα περαιτέρω.

Το στοιχείο <article> προσδιορίζει ανεξάρτητο και αυτόνομο περιεχόμενο.

Ένα άρθρο θα πρέπει να έχει νόημα από μόνο του και θα πρέπει να είναι δυνατόν να διανεμηθεί ανεξάρτητα από τον υπόλοιπο ιστότοπο.

Παραδείγματα όπου μπορεί να χρησιμοποιηθεί το στοιχείο <article>:

• Μηνύματα σε φόρουμ
• Αναρτήσεις ιστολογίου
• Σχόλια χρηστών
• Κάρτες προϊόντων
• Άρθρα εφημερίδων

Το στοιχείο <article> χρησιμοποιείται για να δηλώσει ένα αυτόνομο και ανεξάρτητο κομμάτι περιεχομένου. Είναι σημαντικό να χρησιμοποιούμε το <article> όταν έχουμε περιεχόμενο που αποτελεί μια αυτόνομη οντότητα και θα μπορούσε να είναι αυτοτελές και ανεξάρτητο από τον υπόλοιπο ιστότοπο.

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

[adinserter block=”3″]

Παρακάτω παρουσιάζεται ένα παράδειγμα χρήσης του στοιχείου <article> σε μια ιστοσελίδα:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <article></title>
</head>
<body>
  <header>
    <h1>Καλώς ήρθατε στο ιστολόγιό μας!</h1>
  </header>

  <nav>
    <!-- Περιοχή πλοήγησης -->
  </nav>

  <article>
    <h2>Νέα ανακοίνωση</h2>
    <p>Χαρούμενοι ανακοινώνουμε ότι κυκλοφόρησε το νέο μας προϊόν. Είναι μια εξαιρετική επιλογή για όλους τους λάτρεις της τεχνολογίας.</p>
    <p>Για περισσότερες πληροφορίες, ανατρέξτε στο άρθρο που ακολουθεί.</p>
  </article>

  <section>
    <h2>Άρθρο: Τίτλος άρθρου</h2>
    <p>Εδώ βρίσκεται το περιεχόμενο του άρθρου...</p>
  </section>

  <footer>
    <p>&copy; 2023 Όλα τα δικαιώματα κατοχυρωμένα.</p>
  </footer>
</body>
</html>

Σε αυτό το παράδειγμα, χρησιμοποιείται το στοιχείο <article> για να δηλωθεί μια αυτόνομη ανακοίνωση στην αρχή της ιστοσελίδας και ένα άρθρο στον επόμενο τμήμα. Το στοιχείο <section> χρησιμοποιείται για να ομαδοποιήσει το υπόλοιπο περιεχόμενο της σελίδας.

Η χρήση του στοιχείου <article> μαζί με άλλα σημασιολογικά στοιχεία σας βοηθά να οργανώσετε και να δομήσετε το περιεχόμενο της ιστοσελίδας σας, δίνοντάς του νόημα και αυτονομία.

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

Το <article> χρησιμοποιείται για την καθορισμένη ανεξαρτησία ενός κομματιού περιεχομένου, ενώ το <section> χρησιμοποιείται για την οργάνωση θεματικών ενοτήτων σε ένα έγγραφο.

Δεν υπάρχει κανόνας που να απαγορεύει το να φωλιάσουμε ένα <article> μέσα σε ένα <section> ή ένα <section> μέσα σε ένα <article>. Η επιλογή προς φωλιάσματος εξαρτάται από τη λογική και τη δομή της ιστοσελίδας.

Παραδείγματα χρήσης μπορούν να περιλαμβάνουν:

1. Ένα <section> που περιέχει πολλαπλά <article>:

<section>
  <article>
    <!-- Περιεχόμενο άρθρου 1 -->
  </article>
  <article>
    <!-- Περιεχόμενο άρθρου 2 -->
  </article>
</section>

2. Ένα <article> που περιέχει πολλαπλά <section>:

<article>
  <section>
    <!-- Περιεχόμενο τμήματος 1 -->
  </section>
  <section>
    <!-- Περιεχόμενο τμήματος 2 -->
  </section>
</article>

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

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

Ένα στοιχείο <header> συνήθως περιέχει:

• Ένα ή περισσότερα στοιχεία τίτλου (<h1> – <h6>)
• Λογότυπο ή εικονίδιο
• Πληροφορίες συγγραφής

Σημείωση: Μπορείτε να έχετε πολλά στοιχεία <header> σε ένα έγγραφο HTML. Ωστόσο, το <header> δεν μπορεί να τοποθετηθεί εντός ενός στοιχείου <footer>, <address> ή άλλου στοιχείου <header>.

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

Εδώ έχουμε ένα παράδειγμα χρήσης του <header>:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <header></title>
</head>
<body>
  <header>
    <h1>Καλώς ήρθατε!</h1>
    <img src="logo.png" alt="Λογότυπο">
    <p>Συγγραφέας: Όνομα Συγγραφέα</p>
  </header>

  <!-- Υπόλοιπο περιεχόμενο της ιστοσελίδας -->

</body>
</html>

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

[adinserter block=”4″]

Το στοιχείο <footer> ορίζει το υποσέλιδο (footer) ενός εγγράφου ή μιας ενότητας.

Ένα στοιχείο <footer> συνήθως περιλαμβάνει:

• Πληροφορίες συγγραφής
• Πληροφορίες πνευματικής ιδιοκτησίας
• Στοιχεία επικοινωνίας
• Χάρτη ιστότοπου
• Σύνδεσμους επιστροφής στην κορυφή
• Σχετικά έγγραφα

Μπορείτε να έχετε πολλά στοιχεία <footer> σε ένα έγγραφο HTML.

Εδώ έχουμε ένα παράδειγμα χρήσης του <footer>:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <footer></title>
</head>
<body>
  <!-- Υπόλοιπο περιεχόμενο της ιστοσελίδας -->

  <footer>
    <p>Πνευματική ιδιοκτησία &copy; 2023 Ονομασία Εταιρείας</p>
    <p>Επικοινωνία: email@example.com</p>
  </footer>
</body>
</html>

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

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

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

Παράδειγμα χρήσης του στοιχείου <nav>:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <nav></title>
</head>
<body>
  <header>
    <h1>Τίτλος Ιστοσελίδας</h1>
  </header>

  <nav>
    <ul>
      <li><a href="#">Αρχική</a></li>
      <li><a href="#">Υπηρεσίες</a></li>
      <li><a href="#">Προϊόντα</a></li>
      <li><a href="#">Επικοινωνία</a></li>
    </ul>
  </nav>

  <!-- Υπόλοιπο περιεχόμενο της ιστοσελίδας -->

</body>
</html>

Σε αυτό το παράδειγμα, το στοιχείο <nav> περιλαμβάνει έναν σύνολο συνδέσμων πλοήγησης (navigation links) που αναπαριστούν την αρχική σελίδα, τις υπηρεσίες, τα προϊόντα και την επικοινωνία. Οι σύνδεσμοι παρουσιάζονται ως μια λίστα με τη χρήση του στοιχείου <ul> και <li>.

Το στοιχείο <aside> ορίζει περιεχόμενο που είναι παράλληλο με το περιεχόμενο που περικλείεται (όπως ένα πλαϊνό πλαίσιο).

[adinserter block=”5″]

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

Παράδειγμα χρήσης του στοιχείου <aside>:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείου <aside></title>
</head>
<body>
  <main>
    <h1>Τίτλος Άρθρου</h1>
    <p>Κύριο περιεχόμενο του άρθρου...</p>
  </main>

  <aside>
    <h2>Σχετικά Άρθρα</h2>
    <ul>
      <li><a href="#">Άρθρο 1</a></li>
      <li><a href="#">Άρθρο 2</a></li>
      <li><a href="#">Άρθρο 3</a></li>
    </ul>
  </aside>

</body>
</html>

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

Το στοιχείο <figure> και το στοιχείο <figcaption> χρησιμοποιούνται για την παρουσίαση αυτόνομου περιεχομένου, όπως εικόνες, διαγράμματα, φωτογραφίες, λίστες κώδικα κ.λπ.

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

Το στοιχείο <figcaption> καθορίζει μια λεζάντα (caption) για το στοιχείο <figure>. Συνήθως τοποθετείται ως πρώτο ή τελευταίο παιδί του στοιχείου <figure>. Χρησιμοποιείται για να περιγράψει ή να εξηγήσει το αυτόνομο περιεχόμενο του <figure>.

Το στοιχείο <img> ορίζει την πραγματική εικόνα ή εικονογράφηση.

Ένα παράδειγμα χρήσης των στοιχείων <figure>, <figcaption>, και <img>:

<!DOCTYPE html>
<html>
<head>
  <title>Παράδειγμα Ιστοσελίδας με Χρήση Στοιχείων <figure> και <figcaption></title>
</head>
<body>
  <figure>
    <img src="image.jpg" alt="Εικόνα">
    <figcaption>Περιγραφή της εικόνας.</figcaption>
  </figure>

  <!-- Υπόλοιπο περιεχόμενο της ιστοσελίδας -->

</body>
</html>

Σε αυτό το παράδειγμα, το στοιχείο <figure> περικλείει μια εικόνα με τη χρήση του στοιχείου <img>. Ο τίτλος της εικόνας περιγράφεται από το στοιχείο <figcaption>.