HTML5 : Η ετικέτα header

12 Ιουν 2010 | HTML

1 σχόλιο


Web design blog » HTML » HTML5 : Η ετικέτα header
HTML5

Πρόσφατα είδαμε αυξημένο ενδιαφέρων για την HTML 5 και την χρήση της από επαγγελματίες του internet. Στην τεκμηρίωση της HTML 5 μπορούμε να δούμε ότι έχει προστεθεί ένας σημαντικός αριθμός από νέες ετικέτες, μια από αυτές, η ετικέτα <header> είναι που θα την συζητήσουμε σε αυτό το άρθρο. Θα μιλήσουμε για το πότε πρέπει και πότε δεν πρέπει να τη χρησιμοποιούμε, τι πρέπει και τι δεν πρέπει να έχει.

Μέχρι τώρα συηθήζαμε να βλέπουμε συχνά ετικέτες σαν αυτή που ακολουθεί για να ορίσουμε την περιοχή header της σελίδας μας :

<div id=”header”>

Τώρα με την HTML 5 αυτό δεν χρειάζεται να το κάνετε άλλο, αντίθετε μπορούμε να βάλουμε την ετικέτα <header> η οποία έχει μεγαλύτερη σημασιολογική αξία.

Τη αναπαριστά η ετικέτα <header>

Βάση της τεκμηρίωσης η ετικέτα <header> αναπαριστά τα ακόλουθα :

“Μια ομάδα από εισαγωγικά βοηθήματα ή βοηθήματα για την πλοήγηση. Ένα στοιχείο header τυπικά περιέχει τα τμήματα επικεφαλίδας (μια ετικέτα h1-h6 ή ένα hgroup), αλλά μπορεί επίσης να περιέχει και άλλο περιεχόμενο, όπως για παράδειγμα ένα πίνακα με τα περιεχόμενα, μια φόρμα αναζήτησης ή ένα σχετικό λογότυπο”

Είναι σημαντικό να σημειωθεί ότι το <header> δεν εισάγει ένα νέο τμήμα, αλλά είναι η κεφαλή ενός τμήματος.
Θα πρέπει επίσης να σημειωθεί ότι το <header> δεν έχει απολύτως καμία σχέση με την ετικέτα <head>.

Που μπορώ να χρησιμοποιήσω την ετικέτα <header>

Το προφανές σημείο για τη χρήση της ετικέτα <header> είναι στην αρχή της σελίδας σας. Μπορούμε να αρχίσουμε με κάτι σαν αυτό το οποίο περιέχει τον βασικό τίτλο της σελίδας σας.

<header>
<h1>Η ποιο σημαντική επικεφαλίδα στην σελίδα σας</h1>
</heeader>

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

<header>
<h1>Η ποιο σημαντική επικεφαλίδα στην σελίδα σας</h1>
</heeader>

<article>
<header>
<h1>Ο τίτλος του άρθρου σας</h1>
</header>
<p>
Εδώ μπορεί να εμφανίζετε το κείμενο του άρθρου σας
</p>
</article>

Παρατηρήστε ακόμα πως η χρήση δυο ετικετών h1 μέσα σε αυτό το σύντομο κομμάτι κώδικα είναι απολύτως έγκυρο στην HTML 5 (και στην HTML 4), αλλά μπορεί να δημιουργήσει πρόβλημα στην προσβασιμότητα της σελίδας, για αυτό θα πρέπει να προσέχετε, ειδικά αν έχετε πολλά άρθρα στη σελίδα σας.

Τι απαιτεί η ετικέτα <header>

Γνωρίζουμε ήδη ότι μπορούμε να έχουμε πολλαπλά στοιχεία <header> στη σελίδα μας, αλλά ποια είναι τα στοιχεία που πρέπει να περιέχει μέσα οπωσδήποτε για να είναι η σελίδα μας έγκυρη;

Στα γρήγορα, μια ετικέτα <header> θα πρέπει να περιέχει τουλάχιστον μια ετικέτα επικεφαλίδας (h1 – h6). Μπορείτε επίσης να χρησιμοποιήσετε την ετικέτα <hgroup>. Στην <header> μπορείτε επίσης να έχετε και άλλο περιεχόμενο όπως ένα πίνακα με τα περιεχόμενα, κάποιο λογότυπο, μια φόρμα αναζήτησης. Ακολουθώντας της πρόσφατες αλλαγές του ορισμού της HTML 5, μπορείτε να βάλετε και το στοιχείο <nav> μέσα στο <header>.

Μορφοποίηση του <header>

Υπό κανονικές συνθήκες το η ετικέτα <header> είναι ένα inline στοιχείο, για αυτό αν θέλετε οι περιηγητές να το προβάλουν ως πλαίσιο θα πρέπει να το δηλώσετε ρητά με την ακόλουθη έκφραση στο CSS :

header { display: block; }

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



Tweets that mention HTML5 : Η ετικέτα header « Web Resources -- Topsy.com

12 Ιουνίου 2010

[...] This post was mentioned on Twitter by Manolis Pappou, Web Resoures.eu. Web Resoures.eu said: HTML5 : Η ετικέτα header : http://j.mp/ann5Ss [...]


Αφήστε ένα σχόλιο

Υποβολή σχολίου

 

RSS για τα σχόλια σε αυτό το άρθρο. TrackBack URL

Αναζήτηση







 

Newsletters

Newsletters από το Web Resources


Μεταστοιχεία

Αρχείο


Powered by Xtnd.it group

^
Top
Stop ACTA