Η HTML 5 είναι το επόμενο σημαντικό βήμα προς τη δημιουργία ενός περισσότερο σημασιολογικού ιστού.
Πολύ λίγα site χρησιμοποιούν HTML 5 μέχρι τώρα, έτσι μπορούμε να πούμε ότι βρίσκετε σε πειραματικό στάδιο ακόμα.
Τι διαφορετικό υπάρχει στην HTML 5;
Για να καταλάβουμε τι νέο υπάρχει στην HTML 5, θα αρχίσουμε να χρησιμοποιούμε μερικά από τα νέα δομικά στοιχεία.
Επιτέλους, ένα doctype που ο καθένας μπορεί να θυμάται.
Το πρώτο πράγμα που πρέπει να κάνουμε για να δημιουργήσετε ένα έγγραφο HTML 5 είναι η χρήση του νέου doctype. Τώρα, αν έχετε απομνημονεύσει τα doctypes της HTML 4 ή της XHTML 1.x , είστε αστέρια. Εγώ κάθε φορά που ξεκινούσα ένα νέο έγγραφο έκανα αποκοπή και επικόλληση του doctype.
Αυτός είναι ο λόγος που αγαπάμε τη νέα HTML 5 doctype. Το νέο doctype είναι τόσο απλό:
<!DOCTYPE html>
Απλό, προφανή αλλά και case insensitive.
Εντάξει, έχουμε ορίσει τη σελίδα μας ως έγγραφο HTML 5. Μέχρι εδώ καλά. Τώρα ποιες είναι αυτές οι νέες ετικέτες;
Πριν βουτήξουμε στις νέες ετικέτες, θα επανεξετάσουμε τη δομή μιας συνηθισμένης ιστοσελίδας, η οποία (συνήθως) μοιάζει κάπως έτσι:
<html>
<head>
...
</head>
<body>
<div id="header">
<h1>Wikipediots</h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id=content>
<h1>My Article</h1>
<p>...</p>
</div>
<div id="footer">
<p>...</p>
</div>
</body>
</html>
Στο παραπάνω παράδειγμα, έχουμε προσθέσει αναγνωριστικά (id) σε όλες τις ετικέτες div. Αυτό είναι μια αρκετά κοινή πρακτική μεταξύ των σχεδιαστών. Οι λόγοι είναι δύο - πρώτον, τα αναγνωριστικά παρέχουν άγκιστρα που μπορούν να χρησιμοποιηθούν για την εφαρμογή στυλ σε συγκεκριμένα τμήματα της σελίδας και, αφετέρου, τα αναγνωριστικά χρησιμεύουν ψευδο-σημασιολογική δομή. Ένας smart parser θα εξετάσει το χαρακτηριστικό του αναγνωριστικού σε μια ετικέτα και θα μαντέψει τι σημαίνει, αλλά είναι δύσκολο όταν τα ονόματα των ID είναι διαφορετικά σε κάθε site.
Αναγνωρίζοντας ότι αυτά τα αναγνωριστικά ήταν κοινή πρακτική, οι συντάκτες της HTML 5, έχουν προχωρήσει ένα βήμα περαιτέρω και έκαναν κάποια από τα στοιχεία ετικέτες της HTML5. Εδώ είναι μια γρήγορη επισκόπηση των νέων ετικετών δομής που είναι διαθέσιμες στην HTML 5:
<header>
Το στοιχείο nav είναι αρκετά αυτονόητο - όλα τα στοιχεία πλοήγησης σας μπορούν να μπουν εδώ.
Αν έχετε χρησιμοποιήσει μια ετικέτα div με id="nav" για τη πλοήγηση στη σελίδα σας, μπορείτε να την αντικαταστήσετε με μία απλή ετικέτα nav.
<section>
Σύμφωνα με τo HTML 5 spec, μια ενότητα είναι μια θεματική ομαδοποίηση του περιεχομένου, συνήθως πριν από μια ετικέτα κεφαλίδας (header), και ακολουθείται από μια ετικέτα υποσέλιδου (footer). Αλλά, ένα τμήμα μπορεί επίσης να είναι ένθετο μέσα σε κάποιο άλλο, αν χρειαστεί.
<article>
Tο στοιχείο article είναι ένα τμήμα του περιεχομένου που αποτελεί ανεξάρτητο τμήμα ενός εγγράφου ή site. Για παράδειγμα, ένα άρθρο από περιοδικό, εφημερίδα ή blog."
Να θυμάστε ότι μπορείτε να έχετε περισσότερες από μία ετικέτες article σε μια σελίδα. Για παράδειγμα μια αρχική σελίδα ενός blog μπορεί να έχει τα τελευταία δέκα άρθρα, το καθένα μέσα σε μια ετικέτα article. Τα άρθρα μπορούν επίσης να σπάνε σε τμήματα που χρησιμοποιούν την ετικέτα section, αν και πρέπει να είστε κάπως προσεκτικοί κατά το σχεδιασμό δομής σας αλλιώς μπορεί να καταλήξετε σε κάποια σούπα απο ετικέτες.
<footer>
Η ετικέτα footer πρέπει επίσης να είναι αυτονόητη. Τώρα, όμως, μπορείτε να έχετε περισσότερα υποσέλιδα από ένα. Με άλλα λόγια, εκτός από το κύριο υποσέλιδο που συνήθως βρίσκεται στο κάτω μέρος των περισσότερων σελίδων μπορούν να έχουν υποσέλιδα και τα τμήματα.
Ας τα δούμε όλα μαζί.
Εντάξει, ας ξαναγράψουμε το παράδειγμά μας χρησιμοποιώντας τις νέες ετικέτες:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<header>
<h1>Wikipediots</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<section>
<h1>My Article</h1>
<article>
<p>...</p>
</article>
</section>
<footer>
<p>...</p>
</footer>
</body>
</html>
Styling στις νέες ετικέτες.
Στα περισσότερα προγράμματα περιήγησης, το μόνο που χρειάζεται να κάνετε είναι να καθορίσετε απλά το στυλ σας όπως θα κάνατε κανονικά, προκειμένου να εφαρμόσει στυλ σε αυτά τα νέα στοιχεία. Αλλά να είστε βέβαιοι ότι προσθέσατε το display:block; Με τον καιρό, καθώς όλοι οι browsers θα υποστηρίζουν τα νέα στοιχεία αυτό δεν θα είναι απαραίτητο.
Για παράδειγμα, ας εφαρμόσουμε ορισμένα στυλ για τη κεφαλίδα μας:
header {
display: block;
font-size: 36px;
font-weight: bold;
}
Να θυμάστε ότι ακόμα μπορείτε να προσθέσετε τις ιδιότητες (attributes) class και id. Έτσι, αν θέλετε στυλ σε ένα ξεχωριστή τμήμα πλοήγησης, απλά προσθέστε ένα class ή ένα id στην ετικέτα όπως εδώ:
<nav class="main-menu">
Στη συνέχεια, μπορείτε να εφαρμόσετε ένα στυλ:
nav.main-menu {
font-size: 18px;
}
Αυτά προς το παρών. Σύντομα θα γράψω άλλο ένα μικρό tutorial με περισσότερα tags της HTML 5.
0 σχόλια
Δημοσίευση σχολίου