Λύσεις — Εφαρμογή 3 · Περιεχόμενο με σημασία (σελ. 23–25) – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Λύσεις — Εφαρμογή 3 · Περιεχόμενο με σημασία (σελ. 23–25)

Ο κώδικας-λύση (σημασιολογική δομή) και ασκήσεις (σημασιολογικά στοιχεία, lang, em vs i, abbr). Γλώσσα HTML5.

Ο κώδικας-λύση της Εφαρμογής 3

Ερώτηση: Φτιάξτε σελίδα με σημασιολογική δομή (header/article/footer), γλώσσα, μια συντομογραφία και επισήμανση.

Απάντηση:

<!DOCTYPE html>
<html lang="el-GR">
  <head><title>Σημασιολογικό έγγραφο</title><meta charset="UTF-8"></head>
  <body>
    <header><h1>Το ιστολόγιό μου</h1></header>
    <article>
      <p>Το <abbr title="Πανελλήνιο Σχολικό Δίκτυο">ΠΣΔ</abbr> είναι <mark>χρήσιμο</mark>.</p>
    </article>
    <footer><p>&copy; 2026</p></footer>
  </body>
</html>

• Η lang="el-GR" δηλώνει γλώσσα· τα header/article/footer δίνουν σημασία· το <abbr title> δίνει tooltip· το <mark> επισημαίνει.

Σύνοψη: (ενδεικτική) html lang="el-GR", δομή header/article/footer, <abbr title="..."> για tooltip, <mark> για επισήμανση.

Κριτήρια αξιολόγησης:

• Κριτήριο: σημασιολογικά header/article/footer + lang + abbr/title + mark.

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

Ερώτηση: Τι πετυχαίνουμε με τα σημασιολογικά στοιχεία <header>, <article>, <footer>;

Απάντηση:

• Δίνουν σημασία (τι είναι το κάθε τμήμα) χωρίς να αλλάζουν από μόνα τους τη μορφοποίηση.
• Ωφελούν τις μηχανές αναζήτησης, την ενσωμάτωση σε CMS και μας επιτρέπουν να στοχεύουμε τμήματα με CSS.

Σύνοψη: (ενδεικτική) Χαρακτηρίζουν τη σημασία τμημάτων (κεφαλίδα/άρθρο/υποσέλιδο) — καλύτερα για μηχανές αναζήτησης, CMS και CSS.

Κριτήρια αξιολόγησης:

• Κριτήριο: «σημασία, όχι μορφοποίηση» + όφελος (SEO/CMS/CSS).

Η παράμετρος lang

Ερώτηση: Τι δηλώνει η παράμετρος lang στην ετικέτα html (π.χ. lang="el-GR");

Απάντηση:

• Δηλώνει τη γλώσσα του περιεχομένου (el=ελληνικά) και τη χώρα (GR).
• Βοηθά τις μηχανές αναζήτησης να προτείνουν τη σελίδα σε χρήστες που ζητούν ελληνικό περιεχόμενο (και βοηθά την προσβασιμότητα).

Σύνοψη: (ενδεικτική) Τη γλώσσα (el) και χώρα (GR) του περιεχομένου· βοηθά μηχανές αναζήτησης & προσβασιμότητα.

Κριτήρια αξιολόγησης:

• Κριτήριο: γλώσσα-χώρα + όφελος αναζήτησης/προσβασιμότητας.

em vs i & abbr

Ερώτηση: Ποια η διαφορά <em> από <i>; Τι κάνει το <abbr title="...">;

Απάντηση:

• Και τα δύο εμφανίζουν πλάγια, αλλά το <em> προσδίδει σημασιολογική έμφαση (και επιτρέπει διαφοροποίηση με CSS)· το <i> είναι μόνο οπτικό.
• Το <abbr title="…"> ορίζει συντομογραφία με tooltip: όταν το ποντίκι σταθεί πάνω, εμφανίζεται η εξήγηση (μέσω της παραμέτρου title).

Σύνοψη: (ενδεικτική) <em>: πλάγια με σημασία έμφασης· <i>: πλάγια μόνο οπτικά. <abbr title="...">: συντομογραφία με tooltip.

Κριτήρια αξιολόγησης:

• Κριτήριο: σημασιολογία em vs οπτικό i + λειτουργία abbr/title (tooltip).