Bene, ho un sito e nuovissimi tag HTML5 per creare pagine Web semantiche. Tuttavia, tutte le informazioni sono incasinate nella mia testa.
Il mio sito ha:
- un'intestazione con banner e navigazione;
- blocco dei contenuti (alcuni testi promozionali separati da piccole intestazioni) con schede e intestazioni di scheda (potrebbe essere più di un'intestazione di scheda in una singola scheda)
- footer
Bene, vedo, la navigazione principale dovrebbe essere nel <nav> blocco, intestazione - in <header>, piè di pagina: in <footer>.
Quale dovrebbe essere una scheda? E 'un <section>? O una scheda ha tanto <section>s come intestazioni di tabulazione? Quale tag dovrebbe essere usato per il pannello di selezione delle schede? È solo un <div> oppure un'altra <nav>?
Il prossimo mal di testa sono le intestazioni. Bene, suppongo che l'intestazione del sito (che si trova in <header> tag con banner) dovrebbe essere <h1>. Ma cosa fare con le sezioni? Se ho una sezione per scheda, ci saranno più intestazioni di uguale livello e non sarebbe corretto crearle <h1>s, così diventeranno <h2>S. Ma è corretto che la sezione non abbia un <h1> intestazione?
La prossima cosa: i ruoli di ARIA. Devo scrivere ruoli per intestazione di pagina, contenuto e piè di pagina (banner, contentinfo, main), la navigazione?
risposte:
1 per risposta № 1I tag semantici HTML5 non fanno nulla di diverso dai tag Div. Sembrano solo più semantici. Quindi possono contenere tutte le cose nella sezione header come dici come nav e logo.
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
Per quanto riguarda le sezioni a tua scelta, di solito uso una sezione per una sezione del mio sito e se la suddivido in sottosezioni utilizzerei i tag o per una barra laterale.
Devi ancora formattarli con CSS come faresti con un DIv ma è più facile da seguire.
Spero che questo abbia un senso
1 per risposta № 2
Quale dovrebbe essere una scheda? E 'un
<section>? O una scheda ha tanto<section>s come intestazioni di tabulazione?
Non importa Come visualizzi i tuoi contenuti (ad esempio a schede); dipende dal tuo contenuto reale.
Pensa di avere il contenuto della tua pagina in una parolafile del processore, senza alcun layout. Ora è necessario strutturarlo, in modo da ottenere un bel contorno o sommario all'inizio del documento. Questa struttura / struttura viene rappresentata con le intestazioni (h1-h6) e elementi di sezionamento (section, article, nav, aside) in HTML5 (e intestazioni solo in HTML 4.01).
Tutto ciò che ha un'intestazione (h1-h6) + contenuto corrispondente può essere racchiuso in a section (resp. in modo più specifico article/aside/nav, se corrisponde alla loro definizione). Vedere la mia risposta a una domanda correlata.
Quale tag dovrebbe essere usato per il pannello di selezione delle schede? È solo un
<div>oppure un'altra<nav>?
Puoi usare nav se rappresenta la navigazione per quella schedasezione e se è incluso in quella sezione. Un esempio intuitivo sarebbe un sommario in un articolo (ad esempio un articolo di Wikipedia). La navigazione in tutto il sito è a nav come un bambino di body. La navigazione a livello di articolo (= il sommario) è a nav come un bambino di article.
Se ho una sezione per scheda, ci saranno più intestazioni di uguale livello e non sarebbe corretto crearle
<h1>s, così diventeranno<h2>S. Ma è corretto che la sezione non abbia un<h1>intestazione?
Non sarebbe errato utilizzare h1.
Tutti gli elementi di sezionamento (section, article, nav, aside) nonché le radici di sezionamento (ad es. body) "hanno" un'intestazione (se non ne specifichi esplicitamente, sarà senza titolo). Viene utilizzata l'intestazione di rango più alto. Quindi puoi usare h1 in ogni sezione, oppure è possibile regolare il livello di prua in modo che corrisponda al contorno calcolato (a meno che non siano necessari più di 6 livelli).
Devo scrivere ruoli per intestazione di pagina, contenuto e piè di pagina (banner, contentinfo, principale), navigazione?
Alcuni elementi HTML5 vengono associati con ruoli predefiniti WAI-ARIA. Per gli user-agent che supportano WAI-ARIA ma non supportano HTML5, o per gli user-agent che non hanno ancora implementato le ultime mappature dei ruoli, potresti voler aggiungere esplicitamente questi ruoli già mappati.