Κορυφή και Κάτω μέρος
Με τα δύο στοιχεία header και footer μπορούμε να ορίσουμε την κορυφή και το κάτω μέρος. Για την ορισμό της κορυφής, χρησιμοποιείται το στοιχείο head. Αυτό δεν χρειάζεται να είναι απαραίτητα η κορυφή ολόκληρης της σελίδας. Με το head μπορούμε επίσης να χαρακτηρίσουμε την κορυφή άλλων στοιχείων, όπως ενότητες και άρθρα.
Προσοχή: Μην μπερδέψετε το header με το γνωστό head στοιχείο που ορίζει την κορυφή των εγγράφων HTML, στα οποία περιλαμβάνονται ο τίτλος, τα stylesheets και τα αιτήματα JavaScript.
Για ένα συνολικό έγγραφο, η χρήση του header θα ήταν ως εξής:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
Εφαρμόζοντας σε ένα στοιχείο section, θα είχαμε την ακόλουθη εικόνα:
<section>
<header>
<h1>Δημιουργία Ιστοσελίδων (Μέρος 09): jQuery mobile (1)</h1>
<p> Το jQuery είναι αναμφίβολα ένα από τα πιο γνωστά frameworks της JavaScript.</p>
</header>
<p>
Στις "κλασικές" ιστοσελίδες, το jQuery χρησιμοποιείται ήδη χιλιάδες φορές. Ειδικά σχεδιάστηκε για χρήση σε web-apps το αδελφικό framework jQuery mobile (jQM). Αυτό το framework σας βοηθάει να κάνετε τη web-app σας να μοιάζει με μια πραγματική εφαρμογή με μερικά κλικ. Αρκετά καλό για να ρίξετε μια λεπτομερή ματιά στο jQM.
</p>
<footer>
<p>Πνευματική Ιδιοκτησία από το PSD-Tutorials.de</p>
</footer>
</section>Βεβαιωθείτε πάντως ότι τα footer και header δεν πρέπει να περιέχουν επιπλέον στοιχεία header και footer.
Ομαδοποίηση Επικεφαλίδων
Σε σχέση με τα τμήματα, εμπλέκονται οι επικεφαλίδες. Αυτές οι επικεφαλίδες μπορεί να αφορούν αρχικά τα κλασικά στοιχεία h1 έως h6. Ωστόσο, στο HTML5 επιτρέπεται επίσης το στοιχείο hgroup. Μέσα σε αυτά τα στοιχεία hgroup μπορεί να υπάρχουν περισσότερες επικεφαλίδες.
Αρχικά, ρίξτε μια ματιά σε ένα κλασικό έγγραφο HTML, στο οποίο ορίζεται η "συνηθισμένη" δομή με τα στοιχεία hx.
<h1>
Βιβλίο
</h1>
<h2>
Κεφάλαιο 1
</h2>
<h2>
Κεφάλαιο 2
</h2>
<h3>
Υποκεφάλαιο 2.1
</h3>
<h3>
Υποκεφάλαιο 2.2
</h3>
<h2>
Κεφάλαιο 3
</h2>
Αυτός ο ορισμός σημαίνει την ακόλουθη δομή:
Βιβλίο
Κεφάλαιο 1
Κεφάλαιο 2
Υποκεφάλαιο 2.1
Υποκεφάλαιο 2.2
Κεφάλαιο 3
Στο πρόγραμμα περιήγησης, οι επικεφαλίδες δεν είναι ποτέ εσοχής.
Το hgroup είναι ενδιαφέρον ειδικά σε σχέση με δημοσιογραφικά κείμενα. Αυτά αποτελούνται συχνά από μια διθέσια επικεφαλίδα, η οποία αποτελείται από τον κύριο τίτλο και τον τίτλο σκέπασματος ή υπο-τίτλο. Ένα παράδειγμα θα δείξει αυτήν την πτυχή.
<hgroup> <h1>Cloud OS</h1> <h2>Το Web ως λειτουργικό σύστημα</h2> </hgroup> <p>Εδώ ξεκινά το περιεχόμενο του άρθρου …</p>
Από αυτό το παράδειγμα είναι εμφανές ότι ο υπο-τίτλος δεν εισάγει μια ξεχωριστή ενότητα μέσα στο άρθρο. Αντίθετα, αποτελεί μέρος της επικεφαλίδας του άρθρου. Κάτι τέτοιο μπορεί να συνοψιστεί χρησιμοποιώντας το στοιχείο hgroup.
Μέσα στο hgroup επιτρέπονται τα στοιχεία h1 έως h6.
Το Έννοιας του Σχεδίαγματος
Επιπλέον, στο σχήμα ενότητας-επικεφαλίδας (Outline) του HTML5, συμπεριλαμβάνονται τα section σε συνδυασμό με τα διάφορα στοιχεία hx. Με αυτή την έννοια, οι επικεφαλίδες, όπως συνηθιζόταν μέχρι τώρα, χωρίζονται σε διαφορετικά επίπεδα χρησιμοποιώντας τα στοιχεία h1 έως h6. Συγκεκριμένα, το h1 αντιστοιχεί στο υψηλότερο επίπεδο, ενώ το h6 αντιστοιχεί στο χαμηλότερο επίπεδο. Δεν υπάρχει αλλαγή σε σχέση με το παρελθόν. Τα στοιχεία hx μπορούν τώρα να οριστούν μέσα σε στοιχεία section, όπου η μέτρηση ξεκινάει πάντα από την αρχή, αλλά πάντα σε μια βαθμίδα χαμηλότερα.
Το έννοιας σχεδίασμα κατευθύνεται στην προδιαγραφή του HTML5, το οποίο κάνει τη δομή του εγγράφου διαβάσιμη από μηχανές.
<h1>
Κεφάλαιο 1
</h1>
<section>
<h1>
Κεφάλαιο 2
</h1>
<section>
<h1>
Κεφάλαιο 3
</h1>
</section>
</section>
Με την έννοια του περίγραμμα από το έγγραφο HTML5, προκύπτει η ακόλουθη δομή:
1. Κεφάλαιο 1
- Κεφάλαιο 2
- Κεφάλαιο 3
- Κεφάλαιο 3
Ένα άλλο παράδειγμα θα εξηγήσει αυτόν τον αποτέλεσμα. Και εδώ καταρχάς το αρχικό έγγραφο.
<section>
<h1>Εγκατάσταση και Ρύθμιση</h1>
<section>
<h2>Εγκατάσταση</h2>
<p>Όλα για το θέμα της εγκατάστασης
</section> <section>
<h2>Ρύθμιση</h2>
<p>Εδώ θα βρείτε όλα για το θέμα της ρύθμισης
</section>
<aside>
<p>Ενδιαφέροντα βιβλία για το θέμα...
</aside>
</section>
<footer>
<p>(c) από PSD-Tutorials.de
</footer>
</section>
Η προκύπτουσα δομή είναι η ακόλουθη:
1. Ενότητα (Εγκατάσταση και Ρύθμιση)
1.1 Ενότητα (Εγκατάσταση)
1.2 Ενότητα (Ρύθμιση)
1.3 Ενότητα (aside)
- Ενότητα (footer)
Και ένα ακόμα παράδειγμα:
<body>
<h1>Εγκατάσταση και Ρύθμιση</h1>
<h2>Εγκατάσταση</h2>
<p>Όλα για το θέμα της εγκατάστασης
...και περισσότερο περιεχόμενο...
<section>
<h3>Προϋποθέσεις</h3>
<p>Όλα για το θέμα των προϋποθέσεων εγκατάστασης
...και περισσότερο περιεχόμενο...
<h3>Προετοιμασίες</h3>
<p>Όλα για το θέμα των προετοιμασιών
...και περισσότερο περιεχόμενο...
<h2>Ρύθμιση</h2>
<p>Όλα για το θέμα της ρύθμισης
...και περισσότερο περιεχόμενο...
</section>
</body>
Η δομή των αποτελεσμάτων είναι ως εξής:
1. Εγκατάσταση και Ρύθμιση
1.1 Εγκατάσταση
1.1.1 Προϋποθέσεις
1.1.2 Προετοιμασίες
1.2 Ρύθμιση
Η εσωτερική μέτρηση ξεκινάει πάντα από το 1. Από το έγγραφο περιγράψεως επηρεάζονται μόνο αυτά τα στοιχεία:
• μέρος
• aside
• πλοήγηση
• ενότητα
Τα δύο στοιχεία επικεφαλίδα και υποσέλιδο αποκλείονται.
Παρακαλώ σημειώστε ότι το έννοια του περίγραμμα προς το παρόν δεν υποστηρίζεται ακόμη από τους περιηγητές.
Ωστόσο, είναι μόνο θέμα χρόνου μέχρι οι κατασκευαστές περιηγητών να ενεργήσουν εδώ. Τα πλεονεκτήματα του περιγράμματος είναι τεράστια. Σκεφτείτε, για παράδειγμα, αυτόματες γραμμές πλοήγησης. Αλλά ακόμη και έτσι ισχύει: Ακόμα κι αν η δομή στη μορφή που αναφέρθηκε αγνοείται από τους περιηγητές αυτή τη στιγμή, ήδη τώρα θα έπρεπε να προσπαθείτε να δομείτε τα έγγραφά σας λογικά. Έτσι, μπορείτε επίσης να έχετε μια κάποια ασφάλεια για το μέλλον των ιστοσελίδων σας.
