HTML-008 — Semantic HTML5: Προηγμένη δομή και σημασιολογικά στοιχεία

HTML-008 — Semantic HTML5

Προηγμένη δομή και σημασιολογικά στοιχεία

Στα προηγούμενα μαθήματα γνωρίσαμε τη βασική δομή μιας HTML σελίδας. Τώρα θα προχωρήσουμε ένα βήμα παραπέρα και θα γνωρίσουμε το Semantic HTML5: τα σημασιολογικά στοιχεία που δίνουν νόημα και οργάνωση στο περιεχόμενο.

1. Τι είναι το Semantic HTML;

Η λέξη semantic σημαίνει «σημασιολογικός». Στην HTML, σημαίνει ότι χρησιμοποιούμε στοιχεία που περιγράφουν τον ρόλο του περιεχομένου τους.

Για παράδειγμα, το <header> δηλώνει την κεφαλίδα μιας σελίδας ή μιας ενότητας, ενώ το <footer> δηλώνει το υποσέλιδο.

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

2. Η δομή μιας Semantic HTML5 σελίδας

Μια τυπική ιστοσελίδα μπορεί να οργανωθεί με τα παρακάτω στοιχεία:

• <header> — Κεφαλίδα της σελίδας.
• <nav> — Περιοχή πλοήγησης.
• <main> — Το κύριο περιεχόμενο.
• <section> — Θεματική ενότητα.
• <article> — Αυτοτελές περιεχόμενο.
• <aside> — Συμπληρωματικό περιεχόμενο.
• <footer> — Υποσέλιδο.

Οπτικό διάγραμμα Semantic HTML5

URL εικόνας: Ανέβασε το διάγραμμα στις εικόνες του Blogger, αντίγραψε τη διεύθυνσή του και αντικατάστησε την παρακάτω τιμή.

3. Γνωρίζουμε τα βασικά semantic elements

Το στοιχείο header

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

<header>
  <h1>Το προσωπικό μου site</h1>
  <p>Καλώς ήρθατε!</p>
</header>

Το στοιχείο nav

Περιλαμβάνει συνδέσμους πλοήγησης προς άλλες σελίδες ή ενότητες.

<nav>
  <a href="#home">Αρχική</a>
  <a href="#about">Σχετικά</a>
  <a href="#contact">Επικοινωνία</a>
</nav>

Το στοιχείο main

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

<main>
  <h2>Καλώς ήρθες στο site μου</h2>
  <p>Αυτό είναι το κύριο περιεχόμενο.</p>
</main>

Τα στοιχεία section και article

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

<section>
  <h2>Τα τελευταία άρθρα</h2>

  <article>
    <h3>Πρώτο άρθρο</h3>
    <p>Το περιεχόμενο του άρθρου.</p>
  </article>
</section>

Το στοιχείο aside

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

<aside>
  <h3>Χρήσιμη συμβουλή</h3>
  <p>Χρησιμοποίησε σωστά τα semantic elements.</p>
</aside>

Το στοιχείο footer

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

<footer>
  <p>© 2026 My Website</p>
</footer>

4. Ένα ολοκληρωμένο παράδειγμα

Ας συνδυάσουμε τα στοιχεία που μάθαμε σε μια απλή ιστοσελίδα.

<!DOCTYPE html>
<html lang="el">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic HTML5</title>
</head>
<body>

  <header>
    <h1>My Learning Hub</h1>
    <p>Μαθαίνω HTML5</p>
  </header>

  <nav>
    <a href="#home">Αρχική</a>
    <a href="#lessons">Μαθήματα</a>
    <a href="#contact">Επικοινωνία</a>
  </nav>

  <main id="home">
    <section id="lessons">
      <h2>Τα μαθήματά μου</h2>

      <article>
        <h3>Μάθημα HTML</h3>
        <p>Γνωρίζουμε τη δομή μιας ιστοσελίδας.</p>
      </article>

      <article>
        <h3>Μάθημα CSS</h3>
        <p>Μαθαίνουμε να μορφοποιούμε το περιεχόμενο.</p>
      </article>
    </section>

    <aside>
      <h3>Συμβουλή</h3>
      <p>Γράφε κώδικα με καθαρή και σωστή δομή.</p>
    </aside>
  </main>

  <footer id="contact">
    <p>© 2026 My Learning Hub</p>
  </footer>

</body>
</html>

5. Πρακτική άσκηση — My Learning Hub

Τώρα είναι η σειρά σου! Θα δημιουργήσεις μια μικρή εκπαιδευτική ιστοσελίδα χρησιμοποιώντας τα semantic elements.

Ζητούμενα:

1. Δημιούργησε ένα header με τίτλο και περιγραφή.
2. Πρόσθεσε ένα nav με τρεις συνδέσμους.
3. Χρησιμοποίησε ένα main για το κύριο περιεχόμενο.
4. Δημιούργησε ένα section με δύο στοιχεία article.
5. Πρόσθεσε ένα aside με μια χρήσιμη συμβουλή.
6. Ολοκλήρωσε τη σελίδα με ένα footer.

Άνοιξε το Playground, επίλεξε το μάθημα HTML-008 και πάτησε Run. Μπορείς να τροποποιήσεις τον αρχικό κώδικα και να πειραματιστείς.

RUN ON PLAYGROUND

6. Συχνά λάθη

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

7. Τι μάθαμε

• Τι σημαίνει Semantic HTML5.
• Πώς οργανώνουμε σωστά μια ιστοσελίδα.
• Ποιος είναι ο ρόλος των header, nav και main.
• Πότε χρησιμοποιούμε section, article και aside.
• Πώς δημιουργούμε μια ολοκληρωμένη semantic δομή.

8. Έλεγχος γνώσεων

1. Ποιο στοιχείο περιέχει το κύριο περιεχόμενο της σελίδας;

• α) header
• β) main
• γ) footer

2. Ποιο στοιχείο χρησιμοποιούμε για την περιοχή πλοήγησης;

• α) nav
• β) aside
• γ) article

3. Ποιο στοιχείο είναι κατάλληλο για ένα αυτοτελές άρθρο;

• α) article
• β) footer
• γ) nav

Απαντήσεις: 1-β, 2-α, 3-α.

Επόμενο μάθημα

Στο HTML-009 θα γνωρίσουμε τις HTML Forms: πώς δημιουργούμε φόρμες, πεδία εισαγωγής και σύγχρονα στοιχεία για τη συλλογή πληροφοριών από τους χρήστες.