Lab 5: HTML5 Semantic Elements

Στα προηγούμενα labs μάθαμε τα βασικά HTML tags (headings, paragraphs, lists, links, images) και πώς να οργανώνουμε δεδομένα με πίνακες και να προσθέτουμε multimedia. Σήμερα θα δούμε τα HTML5 semantic elements - tags που μας βοηθούν να δομήσουμε το περιεχόμενο των σελίδων μας με τρόπο που έχει νόημα.

Στόχοι του Εργαστηρίου

Μετά το πέρας αυτού του εργαστηρίου θα μπορείτε να:

• Κατανοείτε τη διαφορά μεταξύ semantic και non-semantic HTML
• Χρησιμοποιείτε τα βασικά HTML5 structural (δομικά) elements
• Δομείτε σελίδες με σωστή ιεραρχία και οργάνωση
• Εφαρμόζετε semantic HTML σε πραγματικά σενάρια (portfolio, product pages, articles)

1. Το <div> Tag και η Ανάγκη για Semantic HTML

1.1 Τι είναι το <div>

Το <div> (division) είναι ένα generic container element - ένα “γενικό δοχείο” χωρίς ειδικό νόημα. Απλά ομαδοποιεί άλλα στοιχεία μαζί, χωρίς να δηλώνει τι ακριβώς περιέχει.

Το <div> χρησιμοποιούνταν πάρα πολύ στο παρελθόν (και ακόμα χρησιμοποιείται σήμερα) για να ομαδοποιήσουμε περιεχόμενο. Το πρόβλημα; Δεν λέει τίποτα για το τι περιέχει - είναι σαν ένα άδειο κουτί χωρίς ετικέτα.

Γιατί είναι αυτό πρόβλημα;

Όταν εσείς ως προγραμματιστές (ή άλλοι developers) διαβάζετε τον κώδικα και βλέπετε <div>, δεν ξέρετε αν είναι:

• Header της σελίδας;
• Navigation menu;
• Κύριο περιεχόμενο;
• Sidebar;
• Footer;

“Μα ο χρήστης δεν βλέπει τα tags, γιατί μας ενδιαφέρει;”

Καλή ερώτηση! Ο χρήστης όντως δεν βλέπει τα tags, αλλά:

1. Screen readers

   (για άτομα με προβλήματα όρασης) “διαβάζουν” τα tags και χρησιμοποιούν τη σημασία τους για να πλοηγηθούν στη σελίδα

2. Search engines

   (Google, Bing, κλπ.) αναλύουν τα tags για να καταλάβουν ποιο περιεχόμενο είναι σημαντικό

3. Άλλοι developers

   (ή εσείς στο μέλλον!) χρειάζεται να διαβάσουν και να τροποποιήσουν τον κώδικα

4. Browsers

   μπορούν να προσφέρουν καλύτερες λειτουργίες όταν καταλαβαίνουν τη δομή (π.χ. reader mode)

Για αυτό η HTML5 εισήγαγε semantic elements - tags με συγκεκριμένο νόημα που περιγράφουν τι περιέχουν. Αυτά θα δούμε σήμερα!

1.2 Η Παλιά Προσέγγιση (Πριν το HTML5)

Πριν το HTML5, όλα γίνονταν με <div> και classes:

Το πρόβλημα:

• Δεν είναι ξεκάθαρο τι κάνει κάθε τμήμα (χρειάζεται να διαβάσεις τα ονόματα κλάσεων - θα δούμε τις κλάσεις πολύ αναλυτικά στα εργαστήρια CSS)
• Δύσκολο για screen readers (accessibility)
• Δύσκολο για search engines να καταλάβουν τη δομή

1.3 Η Λύση: HTML5 Semantic Elements

Το HTML5 μας έδωσε semantic tags - tags που περιγράφουν το περιεχόμενό τους:

Τα πλεονεκτήματα:

• Καθαρότερος κώδικας

  • βλέπεις αμέσως τι κάνει κάθε τμήμα

• Accessibility

  • screen readers καταλαβαίνουν τη δομή

• SEO

  • search engines ξέρουν ποιο περιεχόμενο είναι σημαντικό

• Maintainability

  • πιο εύκολο να δουλέψεις με τον κώδικα αργότερα

Σημαντικό: Το <div> δεν “χάθηκε” - το χρησιμοποιούμε ακόμα όταν χρειαζόμαστε ένα generic container (π.χ. για styling με CSS). Αλλά όταν υπάρχει κατάλληλο semantic tag, το προτιμάμε!

2. Βασικά Δομικά Elements

2.1 <header> - Επικεφαλίδα

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

• Logo ή όνομα site
• Navigation menu
• Εισαγωγικό περιεχόμενο

Πότε το χρησιμοποιούμε:

• Στην κορυφή της σελίδας (page header)

• Στην αρχή ενός

  <article>

  ή

  <section>

  (section header)

Σημείωση: Μπορούμε να έχουμε πολλά <header> elements σε μια σελίδα (ένα για τη σελίδα, ένα για κάθε article, κλπ.)

2.2 <nav> - Πλοήγηση

Το <nav> περιέχει navigation links - τα κύρια links (το βασικό μενού πλοήγησης) για να πλοηγηθείς στο site:

Πότε το χρησιμοποιούμε:

• Για το

  κύριο menu

  του site

• Για breadcrumbs (π.χ. Home > Portfolio > Project 1)

• Για table of contents σε μεγάλα άρθρα

Προσοχή: Δεν χρειάζεται <nav> για κάθε ομάδα links - μόνο για τα σημαντικά navigation sections.

2.3 <main> - Κύριο Περιεχόμενο

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

Σημαντικό:

• Μόνο

  ένα

  <main>

  ανά σελίδα

• Δεν μπαίνει μέσα σε

  <header>

  ,

  <footer>

  ,

  <nav>

  , ή

  <aside>

• Περιέχει το μοναδικό περιεχόμενο (όχι πράγματα που επαναλαμβάνονται σε κάθε σελίδα)

2.4 <footer> - Υποσέλιδο

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

• Copyright information
• Contact info
• Links σε social media
• Σύνδεσμοι σε σημαντικές σελίδες (privacy policy, terms of service, κλπ.)

Το <footer> μπαίνει στο κάτω μέρος της σελίδας (page footer).

2.5 <article> - Αυτόνομο Περιεχόμενο

Το <article> περιέχει self-contained content - περιεχόμενο που έχει νόημα μόνο του, ανεξάρτητα από τη σελίδα.

Πότε το χρησιμοποιούμε:

• Blog posts
• News articles
• Forum posts
• Portfolio pieces
• Product cards

Κριτήριο: Αν μπορείτε να το πάρετε και να το βάλετε αλλού (άλλη σελίδα) και να έχει ακόμα νόημα → είναι <article>

2.6 <section> - Θεματική Ενότητα

Το <section> ομαδοποιεί θεματικά σχετικό περιεχόμενο. Συνήθως έχει ένα heading (h2, h3, κλπ.).

Πότε το χρησιμοποιούμε:

• Για να χωρίσεις μια σελίδα σε θεματικές ενότητες

• Μέσα σε ένα

  <article>

  για να οργανώσεις το περιεχόμενο σε υπο-ενότητες

Διαφορά <article> vs <section>:

• <article>

  = αυτόνομο, μπορεί να σταθεί μόνο του

• <section>

  = θεματική ομάδα, μέρος κάτι μεγαλύτερου

2.7 <aside> - Παράπλευρο Περιεχόμενο

Το <aside> περιέχει περιεχόμενο που σχετίζεται αλλά είναι ξεχωριστό από το κύριο περιεχόμενο.

Πότε το χρησιμοποιούμε:

• Sidebar με σχετικό περιεχόμενο
• Callout boxes (π.χ. “Γνωρίζετε το…;”)
• Σχετικά links
• Λίγα λόγια για τον αρθρογράφο (author bio)
• …

Προσοχή: Το <aside> δεν σημαίνει αυτόματα “θα εμφανιστεί στο πλάι”. Η τοποθέτηση γίνεται με CSS (που θα δούμε στο επόμενο lab). Το <aside> δηλώνει τη σημασία του περιεχομένου, όχι την εμφάνισή του.

3. Άλλα χρήσιμα Content Tags

3.1 <mark> - Επισημασμένο Κείμενο

Το <mark> χρησιμοποιείται για να επισημάνουμε κείμενο - σαν highlighter:

Πότε το χρησιμοποιούμε:

• Search results (επισημαίνουμε σχετικούς όρους)
• Σημαντικά κομμάτια κειμένου
• Αλλαγές σε αρχεία κειμένου

3.2 <pre> - Προμορφοποιημένο Κείμενο

Το <pre> διατηρεί spaces και line breaks ακριβώς όπως τα γράφετε:

Πότε το χρησιμοποιούμε:

• Κώδικα (code snippets)
• ASCII art
• Formatted data (όπως το παραπάνω)
• Ποίηση (όπου τα line breaks είναι σημαντικά)

3.3 <details> και <summary> - Collapsible Content

Το <details> δημιουργεί expandable/collapsible sections χωρίς JavaScript!

Πότε το χρησιμοποιούμε:

• FAQs (Frequently Asked Questions)
• Λεπτομέρειες προϊόντων
• “Show more” κομμάτια

Σημείωση: Το <summary> είναι το κείμενο που φαίνεται πάντα (το “clickable” κομμάτι). Το υπόλοιπο περιεχόμενο μέσα στο <details> εμφανίζεται όταν το ανοίξετε.

3.4 Quick Reminder: <figure> και <figcaption>

Θυμηθείτε από προηγούμενο lab:

Τα χρησιμοποιούμε για images, diagrams, code listings που χρειάζονται caption.

4. Ολοκληρωμένα Παραδείγματα

4.1 Παράδειγμα 1: Απλό άρθρο νέων

Ας δούμε μια απλή δομή για ένα απλό άρθρο νέων:

Δομή:

• <article>

  • το article είναι αυτόνομο (self-contained)

• <header>

  μέσα στο article - τίτλος και metadata

• <footer>

  μέσα στο article - tags/categories

4.2 Παράδειγμα 2: Product Detail Page

Ας δούμε μια πιο σύνθετη σελίδα για ένα προϊόν:

Δομή:

• Page

  <header>

  με

  <nav>

  • κοινό σε όλες τις σελίδες

• <main>

  • το κύριο περιεχόμενο

• <article>

  • το προϊόν (self-contained)

• Πολλαπλά

  <section>

  μέσα στο article - διαφορετικά aspects του προϊόντος

• <aside>

  • related content (reviews, related products)

• Page

  <footer>

  • κοινό σε όλες τις σελίδες

4.3 Παράδειγμα 3: Portfolio Showcase

Τώρα ας δούμε μια ολοκληρωμένη portfolio page - πιο κοντά στις ανάγκες σας ως σχεδιαστές:

Τι βλέπουμε εδώ:

• Ολοκληρωμένη δομή

  page header → main → aside → footer

• Navigation

  με internal links (#about, #projects, κλπ.)

• Πολλαπλά <article>

  για κάθε project - κάθε ένα είναι self-contained

• Nested <section>

  μέσα σε articles (για project details)

• <details> και <summary>

  για expandable content - keeps page clean

• <aside>

  με skills/education - σχετικό αλλά ξεχωριστό περιεχόμενο

• Χρήση <figure> και <figcaption>

  για project images

• <mark>

  για highlighting (βραβείο)

• Mix of image services

  (placehold για profile, picsum για projects)

Σημείωση: Στο επόμενο lab θα μάθουμε CSS για να στυλάρουμε αυτή τη σελίδα - προς το παρόν επικεντρωνόμαστε στη σωστή δομή!

Θέλετε να δείτε πώς φαίνεται με CSS styling;

Δείτε το ίδιο portfolio με styling: Ανοίξτε το Styled Preview εδώ →

ΣΗΜΑΝΤΙΚΟ: Το HTML είναι ΑΚΡΙΒΩΣ το ίδιο με το παραπάνω παράδειγμα - δεν άλλαξε ούτε ένα tag! Η μόνη διαφορά είναι η προσθήκη CSS styling. Αυτό δείχνει τη δύναμη του CSS - το ίδιο περιεχόμενο και δομή, εντελώς διαφορετική εμφάνιση!

(Θα ασχοληθούμε και θα εμβαθύνουμε στον κώδικα CSS από το επόμενο εργαστήριο - προς το παρόν απλά δείτε τι μπορείτε να πετύχετε!)

Στο styled preview θα παρατηρήσετε:

• Gradient header με χρώματα
• Centered layout με grid
• Rounded corners και shadows στα articles
• Sticky sidebar που μένει στη θέση του
• Hover effects στα navigation links
• Responsive design (προσαρμόζεται σε μικρές οθόνες)
• Typography styling (fonts, sizes, spacing)

Αυτά και πολλά άλλα θα μάθουμε στα επόμενα εργαστήρια CSS!

5. Καλές και Συνήθεις Πρακτικές

5.1 <article> vs <section> - Πότε τι;

Χρησιμοποιούμε <article> όταν:

• Το περιεχόμενο μπορεί να σταθεί μόνο του
• Μπορεί να αναδημοσιευτεί αλλού
• Παραδείγματα: blog post, portfolio piece, product card, news article

Χρησιμοποιούμε <section> όταν:

• Ομαδοποιούμε θεματικά σχετικό περιεχόμενο
• Είναι μέρος κάτι μεγαλύτερου
• Παραδείγματα: chapters σε article, tabs, θεματικά τμήματα σελίδας

Μπορούμε να τα συνδυάσουμε:

5.2 Nesting Rules

Επιτρέπεται:

• <article>

  μέσα σε

  <section>

  [✓]

• <section>

  μέσα σε

  <article>

  [✓]

• <article>

  μέσα σε

  <article>

  [✓] (π.χ. comments σε blog post)

• <header>

  και

  <footer>

  μέσα σε

  <article>

  ή

  <section>

  [✓]

Δεν επιτρέπεται:

• <main>

  μέσα σε

  <header>

  ,

  <footer>

  ,

  <aside>

  , ή

  <nav>

  [X]

• <header>

  μέσα σε

  <header>

  ή

  <footer>

  [X]

• <footer>

  μέσα σε

  <header>

  ή

  <footer>

  [X]

5.3 Πότε Χρησιμοποιούμε <div>

Το <div> χρησιμοποιείται όταν:

• Χρειάζεσαι container για

  styling purposes

  (CSS)

• Δεν υπάρχει κατάλληλο semantic tag

• Θέλεις να ομαδοποιήσεις elements χωρίς semantic meaning

Το εξωτερικό <div> είναι OK - χρησιμοποιείται για layout/styling. Το εσωτερικό <article> δίνει semantic meaning.

5.4 Typical Page Patterns

Pattern 1: Blog/Portfolio Structure

Pattern 2: Product/Landing Page

Pattern 3: Article/Documentation

5.5 Συχνά λάθη

[X] Λάθος: Χρήση <article> για οτιδήποτε

[✓] Σωστό:

[X] Λάθος: Πολλαπλά <main> elements

[✓] Σωστό:

[X] Λάθος: <nav> για κάθε ομάδα links

[✓] Σωστό:

Συνοπτικά

Αυτά που είδαμε σήμερα:

1. Το <div> tag:

• Generic container χωρίς semantic meaning
• Χρήσιμο για styling, αλλά όχι για structure

2. Essential Structural Elements:

• <header>

  • Επικεφαλίδα (page ή section)

• <nav>

  • Navigation links

• <main>

  • Κύριο περιεχόμενο (ένα ανά σελίδα)

• <footer>

  • Υποσέλιδο (page ή section)

• <article>

  • Self-contained content

• <section>

  • Θεματική ενότητα

• <aside>

  • Παράπλευρο περιεχόμενο

3. Useful Content Tags:

• <mark>

  • Highlighted text

• <pre>

  • Preformatted text

• <details>

  &

  <summary>

  • Collapsible content

4. Γιατί Semantic HTML:

• Καθαρότερος κώδικας
• Better accessibility
• Better SEO
• Easier maintenance

5. Επόμενα Βήματα: Στο επόμενο lab θα αρχίσουμε CSS - θα μάθουμε πώς να στυλάρουμε όλο αυτό το σωστά δομημένο HTML που δημιουργήσαμε!

Χρήσιμοι Πόροι για Projects:

• Placeholder images:

  https://placehold.co

• Random images:

  https://picsum.photos

• Free stock photos:

  Pexels, Unsplash

Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα: