HTML 5 Εισαγωγή - Δομή Εγγράφου PDF

HTML 5 Τεχνολογίες και Προγραμματισμός Εφαρμογών στον Ιστό Διδάσκων: Β. Ζαφείρης HTML – Hypertext Markup Language H HTML είναι η κύρια γλώσσα για τη σήμανση εγγράφων στον Παγκόσμιο Ιστό, αρχικά σχεδιάστηκε ως γλώσσα για τη σύνταξη και περιγραφή της δομής...

HTML 5 Τεχνολογίες και Προγραμματισμός Εφαρμογών στον Ιστό Διδάσκων: Β. Ζαφείρης HTML – Hypertext Markup Language H HTML είναι η κύρια γλώσσα για τη σήμανση εγγράφων στον Παγκόσμιο Ιστό, αρχικά σχεδιάστηκε ως γλώσσα για τη σύνταξη και περιγραφή της δομής επιστημονικών εγγράφων, προσαρμόστηκε και αξιοποιήθηκε για την περιγραφή πολλών τύπων εγγράφων, ακόμη και εφαρμογών, H πρώτη έκδοση της HTML προτάθηκε για προτυποποίηση στο IETF από τον Tim Berners Lee και τον Dan Connolly το 1993, Η έκδοση HTML 2.0 δημοσιεύθηκε τελικά ως IETF πρότυπο το 1995, Οι επόμενες εκδόσεις δημοσιεύθηκαν ως πρότυπα του W3C μεταξύ 1997-1999 HTML 3.2 (Ιανουάριος 1997), HTML 4.0 (Δεκέμβριος 1997), HTML 4.01 (Δεκέμβριος 1999) To W3C συνέχισε τις εργασίες του προς την κατεύθυνση επαναορισμού της HTML ως γλώσσας βασισμένης στην XML σύνταξη και δημοσίευσε το πρότυπο XHTML 1.0 (2000), συνέχισε τις εργασίες του στη γλώσσα XHTML2 (μη συμβατή με HTML, XHTML 1.0) Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 2 HTML 5 Η ιδέα της περαιτέρω εξέλιξης της HTML προτάθηκε στο W3C το 2004 από τις εταιρείες Mozilla και Opera και δεν έγινε δεκτή ενσωμάτωση νέων δυνατοτήτων που αφορούν τις HTML Forms και συνένωση των προτύπων HTML4, XHTML 1 και DOM2 HTML Οι Apple, Mozilla και Opera δημιούργησαν το WHATWG – Web Hypertext Application Technology Working Group και συνέχισαν την προδιαγραφή της HTML 5 το 2006 το W3C εκδήλωσε ενδιαφέρον για συμμετοχή στις εργασίες του WHATWG, δόθηκε δυνατότητα στο W3C να δημοσιεύσει τα πρότυπα που θα προκύπτουν ενώ το WHATWG θα συνεχίζει την εξέλιξη της γλώσσας, Η έκδοση HTML 5 δημοσιεύθηκε τελικά ως W3C πρότυπο το 2014, ακολούθησαν οι εκδόσεις HTML 5.1 (2016), HTML 5.2 (2017) Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 3 HTML living standard Το 2019, W3C και WHATWG συμφώνησαν σε ένα κοινό πρότυπο που θα εξελίσσεται συνεχώς από το WHATWG, HTML Living Standard (τελευταία ενημέρωση 15/10/24) - https://html.spec.whatwg.org Τον Ιανουάριο 2021 το W3C απέσυρε όλα τα HTML πρότυπα προς όφελος του HMTL Living Standard απεσύρθησαν τα πρότυπα HTML 4.0, HTML 4.01, XHTML 1.0, XHTML 1.1, HTML 5.1, HTML 5.2 και HTML 5.3 Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 4 HTML 5 Το συντακτικό της HTML 5 εμπλουτίζεται με νέες δυνατότητες σημασιολογική περιγραφή του περιεχομένου μιας ιστοσελίδας, εμπλουτισμός των HTML φορμών με νέα στοιχεία και δυνατότητες επικύρωσης δεδομένων, βελτίωση της ασφάλειας και του τρόπου παρουσίασης ενσωματωμένων σελίδων (iframes), ενσωμάτωση πολυμεσικού περιεχομένου (audio, video) χωρίς τη χρήση εξωτερικών προγραμμάτων (πχ. Adobe Flash ή άλλα plugins) H HTML 5 δεν αποτελεί απλά εξέλιξη του συντακτικού της HTML 4.01 Το πρότυπο HTML 5 προδιαγράφει βασικά APIs (Application Programming Interfaces) που θα πρέπει να υποστηρίζονται από σύγχρονους Web Browsers APIs για την ανάπτυξη προχωρημένων JavaScript εφαρμογών Πελάτη στον WWW, o Web Browser εξελίσσεται από εφαρμογή παρουσίασης WWW περιεχομένου σε ανοικτή πλατφόρμα φιλοξενίας και εκτέλεσης εφαρμογών, Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 5 HTML 5 και πρότυπα του WWW Η HTML 5 προδιαγράφει μεγάλο μέρος της web πλατφόρμας Η θέση της σε σχέση με άλλα πρότυπα του WWW συνοψίζεται στο διπλανό σχήμα Πηγή: https://html.spec.whatwg.org/ Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 6 HTML 5 Web APIs (1/2) H HTML 5 προδιαγράφει μια σειρά από Web Browser APIs μπορούν να αξιοποιηθούν από JavaScript κώδικα που φορτώνεται από ένα HTML έγγραφο, 2D Canvas: δημιουργία 2D γραφικών με χρήση JavaScript δίνει δυνατότητα για υλοποίηση παιχνιδιών, απεικόνιση δεδομένων, επεξεργασία εικόνας και βίντεο, το στοιχείο υποστηρίζει επίσης το WebGL API για δημιουργία 2D και 3D γραφικών με υποστήριξη από το hardware της συσκευής Audio & Video: αναπαραγωγή ήχου, βίντεο και χειρισμός γεγονότων που σχετίζονται με την κατάστασή της, Web Sockets: μόνιμες συνδέσεις για ανταλλαγή δεδομένων με τον Web Server, Server-sent events: αποστολή δεδομένων από τον Web Server χωρίς να έχει προηγηθεί αίτημα από τον Πελάτη, Cross-document messaging: ασφαλής ανταλλαγή δεδομένων μεταξύ διαφορετικών εγγράφων (παραθύρων, tabs), Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 7 HTML 5 Web APIs (2/2) APIs για βελτίωση της αλληλεπίδρασης με τον χρήστη Drag ‘n Drop, πλοήγηση σε στοιχεία φόρμας με χρήση του πληκτρολογίου, απευθείας επεξεργασία HTML περιεχομένου, Web storage: δυνατότητα αποθήκευσης δεδομένων της μορφής name-value στον Web Browser παρέχεται ξεχωριστός χώρος αποθήκευσης για κάθε ιστότοπο, δεδομένα στα οποία έχει πρόσβαση ένα παράθυρο και διατηρούνται μέχρι το κλείσιμό του, δεδομένα στα οποία έχουν πρόσβαση πολλά παράθυρα και διατηρούνται μόνιμα, διαφέρει από τα HTTP Cookies καθώς δεν στέλνονται με κάθε αίτημα στον Διακομιστή, Web workers: εκτέλεση χρονοβόρων διαδικασιών σε ξεχωριστά νήματα εκτέλεσης, χωρίς καθυστέρηση του νήματος της διεπαφής χρήστη ο κώδικας ενός Web Worker δεν έχει δυνατότητα τροποποίησης του HTML έγγραφου (DOM), η επικοινωνία μεταξύ κυρίου νήματος και web worker γίνεται με ανταλλαγή μηνυμάτων Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 8 Δομή ενός HTML εγγράφου To στοιχείο DOCTYPE δηλώνει τον τύπο του εγγράφου (Γραμμή 1) η τιμή html αντιστοιχεί σε σύνταξη HTML 5, υποχρεωτικό για σωστή προβολή από τον Web Browser Το έγγραφο περικλείεται στο εσωτερικό ενός στοιχείου html (Γραμμές 3-19) το γνώρισμα lang δίνει πληροφορίες στον Web Browser σχετικά με την γλώσσα του εγγράφου, το γνώρισμα lang μπορεί να εφαρμοστεί και σε άλλα HTML στοιχεία που έχουν περιεχόμενο Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 10 Δομή ενός HTML εγγράφου (2) Κεφαλίδα του HTML εγγράφου (4-10) περιλαμβάνει πληροφορίες που αφορούν το έγγραφο (στοιχεία title, meta) ενσωματώνει κώδικα (CSS, JS) και οδηγίες για φόρτωση εξωτερικών αρχείων (στοιχεία link, source, script) Σώμα του HTML εγγράφου (13-18) περιλαμβάνει το περιεχόμενο που εμφανίζεται στον Web Browser Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 11 Δομή της ενότητας (1) To στοιχείο ενσωματώνει κατάλληλα HTML tags για καταγραφή μεταδεδομένων που αφορούν το HTML έγγραφο, ενσωμάτωση κώδικα γραμμένο σε άλλες γλώσσες (κυρίως CSS, JavaScript) Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 12 Δομή της ενότητας (2) Τυπικό περιεχόμενο της ενότητας : τίτλος του εγγράφου, εμφανίζεται στο παράθυρο του Web Browser, : μεταδεδομένα που αφορούν την προβολή στον Browser ή την επεξεργασία της σελίδας από άλλα συστήματα (πχ. μηχανές αναζήτησης) : inline CSS κώδικας μορφοποίησης του εγγράφου, : σύνδεση του εγγράφου με εξωτερικούς πόρους, πχ. αρχεία CSS ή εικονίδια σελίδας/εφαρμογής, : πρόθεμα για όλα τα σχετικά URL που εμφανίζονται στο έγγραφο, : ενσωμάτωση κώδικα ή δεδομένων στη σελίδα, μπορεί να χρησιμοποιηθεί και στο σώμα του εγγράφου, Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 13 Δομή της ενότητας (3) Τα στοιχεία περιγράφουν συνήθως την κωδικοποίηση χαρακτήρων του εγγράφου, πχ. UTF-8 (Γραμμή 7) απαραίτητο για τη σωστή προβολή της σελίδας, τον συγγραφέα, σύντομη περιγραφή και λέξεις κλειδιά που αφορούν το έγγραφο με χρήση των γνωρισμάτων name και content (Γραμμές 8-10), το name λαμβάνει τιμές author, description, keywords, το content λαμβάνει τιμές ανάλογα με το έγγραφο, το τμήμα της σελίδας που είναι ορατό στο χρήστη με χρήση του γνωρίσματος viewport (Γραμμή 11) απαραίτητο για τη σωστή προβολή της σελίδας σε κινητές συσκευές, η τιμή width=device-width προσαρμόζει τη σελίδα στο πλάτος της οθόνης της συσκευής, η τιμή initial-scale=1 θέτει το επίπεδο μεγέθυνσης (zoom) της σελίδας μόλις φορτωθεί από τον Web Browser Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 14 Δομή της ενότητας (4) Το στοιχείο φορτώνει ένα εξωτερικό αρχείο (πχ. css αρχείο, εικονίδια κτλ) (Γραμμές 20-21), το γνώρισμα rel περιγράφει τη σχέση του εξωτερικού αρχείου με το παρόν έγγραφο (πχ. stylesheet), το γνώρισμα type περιγράφει τον MIME τύπο του εξωτερικού αρχείου, το γνώρισμα href περιγράφει το URL του εξωτερικού αρχείου (απόλυτο ή σχετικό) Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 15 Περιεχόμενο ενός εγγράφου Το περιεχόμενο ενός HTML εγγράφου περικλείεται στο εσωτερικό ενός στοιχείου επιτρέπεται ένα στοιχείο ανά έγγραφο HTML Το περιεχόμενο του εγγράφου επισημειώνεται με κατάλληλα στοιχεία HTML τα οποία αποτυπώνουν τη γενική δομή του εγγράφου και τη δομή των επιμέρους στοιχείων περιεχομένου που περιλαμβάνει το έγγραφο, δίνουν ειδική σημασία σε συγκεκριμένα τμήματα κειμένου πχ. κώδικας, παραπομπές, δεδομένα, συντομογραφίες, ορισμοί ενσωματώνουν στοιχεία πολυμεσικού περιεχομένου (ήχος, βίντεο, εικόνες), επιτρέπουν αλληλεπίδραση με το χρήστη (πχ. στοιχεία φόρμας και σύνδεσμοι), εισάγουν κώδικα για δυναμική προσαρμογή του περιεχομένου βάσει των ενεργειών του χρήστη Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 16 Σημασιολογική περιγραφή περιεχομένου Η HTML 5 στοχεύει στην αποτύπωση της δομής του εγγράφου και της σημασίας των επιμέρους στοιχείων του περιεχομένου του οριστική αφαίρεση HTML στοιχείων που αφορούν την παρουσίαση/μορφοποίηση, η διαδικασία μετάβασης είχε ήδη ξεκινήσει από την HTML 4, Η HTML 5 προτείνει τον διαχωρισμό του περιεχομένου ενός εγγράφου από την περιγραφή της παρουσίασής του η περιγραφή της παρουσίασης γίνεται σε εξωτερικά αρχεία CSS, Η περιγραφή της εμφάνισης ενός εγγράφου με χρήση HTML αποδείχθηκε προβληματική μειώνει την προσβασιμότητα του εγγράφου σε ειδικές κατηγορίες χρηστών, πχ. χρήστες με προβλήματα όρασης, αυξάνει το κόστος συντήρησης του περιεχομένου, οδηγεί σε μεγάλο μέγεθος αρχείων HTML Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 17 HTML στοιχεία προς αποφυγή Η HTML 5 έχει καταργήσει αρκετά στοιχεία που σχετίζονται με τη μορφοποίηση εγγράφων υποστηρίζονται ακόμη από τους Web Browsers για λόγους συμβατότητας, Ενδεικτικά στοιχεία που πρέπει να αποφεύγονται λόγω κατάργησης applet, font, basefont, big, blink, center, dir, frame, frameset, listing, marquee, plaintext, spacer, strike, tt Τα μοναδικά στοιχεία μορφοποίησης που έχουν απομείνει είναι : μόνο για ειδικές περιπτώσεις όπου το στυλ αφορά μόνο μια μεμονωμένη σελίδα, το γνώρισμα style: αφορά τα περισσότερα HTML στοιχεία, όχι για παραγωγική χρήση, Η σημασία των στοιχείων b, i, hr, s, small, u έχει επαναοριστεί δεν αφορούν πλέον τη μορφοποίηση κειμένου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 18 Στυλ συγγραφής HTML κώδικα Η υϊοθέτηση κοινά αποδεκτών συμβάσεων για τη συγγραφή κώδικα βοηθά στην αναγνωσιμότητα και συντηρησιμότητα του κώδικα διευκολύνει τους προγραμματιστές/σχεδιαστές ιστοσελίδων, δεν αφορά τον συντακτικό αναλυτή της HTML, o οποίος είναι πολύ ανεκτικός ακόμη και σε συντακτικά λάθη Βασικές συμβάσεις που ακολουθούνται είναι: χρήση πεζών γραμμάτων για ονόματα των tags και των γνωρισμάτων τους, η HTML είναι δεν κάνει διάκριση πεζών/κεφαλαίων σε ονόματα στοιχείων και γνωρισμάτων, κάθε στοιχείο που έχει περιεχόμενο θα πρέπει να συνοδεύεται από tag ανοίγματος και κλεισίματος, ακόμη και αν η παράλλειψή του δεν προκαλεί πρόβλημα, πχ. παράλλειψη κενών πριν και μετά το ‘=‘ στα γνωρίσματα, χρήση απλών ή διπλών quotes για τις τιμές γνωρισμάτων content Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 19 Οργάνωση περιεχομένου Βασικά HTML στοιχεία για περιγραφή της δομής του περιεχομένου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 20 Βασική δομή μιας ιστοσελίδας (1) Οι περισσότερες ιστοσελίδες εμφανίζουν ομοιότητες ως προς τη δομή τους τυπικές εξαιρέσεις αποτελούν σελίδες που εμφανίζουν σε πλήρη οθόνη βίντεο ή παιχνίδια, καθώς και σελίδες με κακή σχεδίαση Η τυπική δομή μιας ιστοσελίδας περιλαμβάνει τα στοιχεία header – επικεφαλίδα, navigation bar – μπάρα πλοήγησης, main content – κυρίως περιεχόμενο, sidebar – πλευρική μπάρα, footer – υποσέλιδο Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 21 Βασική δομή μιας ιστοσελίδας (2) header οριζόντια λωρίδα με γραφικά στοιχεία και λογότυπο του ιστότοπου, συνήθως κοινό για όλες τις σελίδες ενός ιστότοπου, Πηγή: MDN, https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 22 Βασική δομή μιας ιστοσελίδας (3) navigation bar περιλαμβάνει συνδέσμους προς τις κυριότερες ενότητες ενός ιστότοπου, οι σύνδεσμοι εμφανίζονται ως μενού, κουμπιά ή tabs, δεν διαφοροποιείται σημαντικά μεταξύ των σελίδων ενός ιστότοπου, Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 23 Βασική δομή μιας ιστοσελίδας (4) main content μεγάλη ενιαία περιοχή στο κέντρο της σελίδας, περιλαμβάνει το κύριο περιεχόμενο της σελίδας, Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 24 Βασική δομή μιας ιστοσελίδας (5) sidebar συνοδευτικό περιεχόμενο που αφορά το κύριο περιεχόμενο της σελίδας, πχ. σύνδεσμοι προς σχετικές σελίδες, βοηθητικές πληροφορίες, συχνά περιλαμβάνει δευτερεύον μενού πλοήγησης, Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 25 Βασική δομή μιας ιστοσελίδας (6) footer οριζόντια λωρίδα στο κάτω μέρος της σελίδας, περιλαμβάνει στοιχεία επικοινωνίας, copyright, συνδέσμους προς δημοφιλές περιεχόμενο, κοινό για όλες τις σελίδες ενός ιστότοπου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 26 Περιγραφή της δομής εγγράφου (1) Η οργάνωση του περιεχομένου μιας ιστοσελίδας και η διάταξή του στην οθόνη μπορεί να γίνει με στοιχεία και κανόνες CSS η HTML 5 αποθαρρύνει την περιγραφή της δομής ενός εγγράφου με αποκλειστικό στόχο την παρουσίασή του, Η HTML 5 εισάγει κατάλληλα στοιχεία για την περιγραφή των ενοτήτων ενός εγγράφου, σημασιολογική περιγραφή της δομής, κατάλληλη για επεξεργασία από μηχανές, πχ. μηχανές αναζήτησης, τεχνολογίες διευκόλυνση προσβασιμότητας, εξ’ ορισμού τοποθετούνται στην οθόνη ως blocks στον κατακόρυφο άξονα (παρόλο που η HTML5 δεν ορίζει λεπτομέρειες εμφάνισης) HTML στοιχεία για περιγραφή της δομής εγγράφου body, article, section, h1-h6, hgroup nav, aside, header, footer, address main Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 27 Περιγραφή της δομής εγγράφου (2) H HTML5 υποστηρίζει κατάλληλα στοιχεία για την οριοθέτηση των περιοχών της δομής ενός τυπικού ιστότοπου : δηλώνει την κεφαλίδα (header) ενός ιστότοπου μπορεί να περιλαμβάνει λογότυπο, φόρμα αναζήτησης κτλ μπορεί να χρησιμοποιηθεί και σε επιμέρους ενότητες ενός μεγάλου εγγράφου περικλείοντας επικεφαλίδες, πίνακα περιεχομένων κτλ. : υλοποιεί την κεντρική μπάρα πλοήγησης (navigation bar) περιγράφει μια ενότητα του εγγράφου με συνδέσμους πλοήγησης στον ιστότοπο ή άλλους ιστότοπους, μπορεί να χρησιμοποιηθεί σε διάφορα σημεία του εγγράφου, : περικλείει το κυρίως περιεχόμενο του ιστοτόπου ένα έγγραφο δεν πρέπει να περιλαμβάνει περισσότερα από ένα στοιχεία εκτός και τα υπόλοιπα χαρακτηρίζονται από το γνώρισμα hidden (μη ορατά) το κυρίως περιεχόμενο δομείται περαιτέρω με χρήση στοιχείων header, nav, footer, article, section, aside κτλ Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 28 Περιγραφή της δομής εγγράφου (3) H HTML5 υποστηρίζει κατάλληλα στοιχεία για την οριοθέτηση των περιοχών της δομής ενός τυπικού ιστότοπου : περιλαμβάνει περιεχόμενο το οποίο σχετίζεται με το κυρίως περιεχόμενο του εγγράφου ή μιας ενότητας, ανεξάρτητο από το κυρίως περιεχόμενο, έμμεσα σχετιζόμενο, εμφανίζεται συνήθως στις πλευρές μιας ιστοσελίδας (sidebar), περιλαμβάνεται συνήθως στο εσωτερικό του στοιχείου : περιλαμβάνει περιεχόμενο που εμφανίζεται στο υποσέλιδο ενός εγγράφου, περιλαμβάνει στοιχεία επικοινωνίας, copyright και συνδέσμους (χωρίς ), τα στοιχεία επικοινωνίας θα πρέπει να περιλαμβάνονται στο εσωτερικό ενός στοιχείου, μπορεί να αφορά μεμονωμένες ενότητες μιας ιστοσελίδας, πχ. να δηλώνεται στο εσωτερικό στοιχείων , , , κτλ. Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 29 Παραδείγματα δομής ιστοσελίδας Ενδεικτικοί τρόποι χρήσης των στοιχείων περιγραφής της δομής ενός εγγράφου Δεν είναι υποχρεωτική η παρουσία όλων των στοιχείων δόμησης ενός εγγράφου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 30 Δόμηση του περιεχομένου ενός εγγράφου (1) Το κυρίως περιεχόμενο μιας ιστοσελίδας () καθώς και το σχετιζόμενο με αυτό () μπορεί να οργανωθεί περαιτέρω ανάδειξη της σημασίας των διαφόρων τμημάτων του, χρήση στοιχείων και Το στοιχείο ορίζει ένα ολοκληρωμένο και αυτοτελές τμήμα περιεχομένου σε μια ιστοσελίδα ή εφαρμογή μπορεί να επαναχρησιμοποιηθεί και να διανεμηθεί ανεξάρτητα από την ιστοσελίδα/έγγραφο στο οποίο εμφανίζεται, πχ. ανάρτηση σε φόρουμ, άρθρο εφημερίδας/περιοδικού, σχόλιο ενός χρήστη, ένα widget/gadget για αλληλεπίδραση με τον χρήστη, μπορεί να παραλειφθεί στην περίπτωση που το κυρίως περιεχόμενο μιας ιστοσελίδας αποτελεί μια ενιαία ανεξάρτητη ενότητα περιεχομένου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 31 Δόμηση του περιεχομένου ενός εγγράφου (2) Το στοιχείο ορίζει μια υποενότητα σε ένα έγγραφο ή εφαρμογή χρησιμοποιείται για την θεματική οργάνωση περιεχομένου και περιλαμβάνει συνήθως επικεφαλίδα(ες) συνίσταται η χρήση του σε περιπτώσεις που το περιεχόμενο μπορεί να αναρτηθεί μέσω συνδέσμου σε υπηρεσίες συγκέντρωσης περιεχομένου, Ένας γενικός κανόνας για τη χρήση του αν το περιεχόμενο μπορεί να συμπεριληφθεί στον πίνακα περιεχομένων ή στη σύνοψη μιας σελίδας τότε μπορεί να χρησιμοποιηθεί το Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 32 Παραδείγματα χρήσης (1) Ενδεικτική χρήση των στοιχείων για την οργάνωση του περιεχομένου μιας σελίδας Θα μπορούσαν να περιλαμβάνονται στο εσωτερικό στοιχείων , ή άλλων στοιχείων οργάνωσης περιεχομένου Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 33 Παραδείγματα χρήσης (2) Έγγραφο με περιεχόμενο και ενότητα () με σχόλια χρηστών κάθε σχόλιο μπορεί να αναπαρασταθεί ως ξεχωριστό Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 34 Παραδείγματα χρήσης (1) Παράδειγμα 1 οργανωμένο σε ενότητες () Παράδειγμα 2 έγγραφο οργανωμένο σε ενότητες Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 35 Παραδείγματα χρήσης (2) Παράδειγμα 3 online βιβλίο με ένα ανά κεφάλαιο Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 36 Τίτλοι ενοτήτων Οι τίτλοι των διαφόρων ενοτήτων ενός εγγράφου επισημαίνονται με στοιχεία - και To στοιχείο ομαδοποιεί ένα στοιχείο - και συναφές περιεχόμενο πχ. επικεφαλίδα εγγράφου/ενότητας και συνοδευτική παράγραφος (υπότιτλος, ημερομηνία κτλ) H ομαδοποίηση στοιχείων τίτλου μπορεί να γίνει με στοιχεία Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 37 Παραπομπές HTML Living Standard, WHATWG, 2021 https://html.spec.whatwg.org/ HTML 5 Developer Guide, MDN, 2021 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 HTML Elements reference, MDN 2021 https://developer.mozilla.org/en-US/docs/Web/HTML/Element Use HTML to solve common problems, MDN 2021 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto Β. Ζαφείρης, Τμήμα Πληροφορικής ΟΠΑ 38