È <header> un tag semantico o strutturale

Question

Prendete questi due pezzi di markup:

<div id="header"> 
    <img src="/img/logo.png" alt="MyLogo" /> 

    <ul id="misc-nav"> 
    <li>..</li> 
    </ul> 

    <header> 
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> 
    <p>The smell of invention awaits you...</p> 
    </header> 
</div> 

e

<header> 
    <img src="/img/logo.png" alt="MyLogo" /> 

    <ul id="misc-nav"> 
    <li>..</li> 
    </ul> 

    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> 
    <p>The smell of invention awaits you...</p> 
</header> 

Il mio esempio non può essere perfetto, ma mi piacerebbe sapere se lo scopo di il tag è per la definizione semantica del contenuto, o è una definizione strutturale a livello di blocco con CSS?

È a mia conoscenza from the spec itself, che il primo esempio è l'interpretazione corretta, tuttavia vedo il secondo essere propagandato nel modo giusto.

Potete offrire qualche chiarimento su di esso?

Answer 1

Entrambi sono bene. Ma cosa intendi per "strutturale" o "semantico"?

Answer 2

Il tag di intestazione puramente semantico. Tuttavia, in realtà tutti i tag HTML devono fornire un contesto al contenuto (= semantica).

Utilizzare i fogli di stile CSS per personalizzare i contenuti in modo appropriato.

Answer 3

È il tuo primo metodo (semanticamente).

Il < intestazione tag> definisce una introduzione al documento.

<header> 
<h1>Welcome to my homepage</h1> 
<p>My name is Donald Duck</p> 
</header> 

<p>The rest of my home page...</p> 

http://www.w3schools.com/html5/tag_header.asp

Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element

Answer 4

Auspico, pertanto, la seguente combinazione di markup e CSS:

nel CSS:

header { 
    background: #fff url(/img/logo.png) top left no-repeat; 
    padding-left: 64px; /* or whatever required to display margin correctly */ 
} 
/* if you REALLY want your navigation to appear as a bulleted list */ 
nav a { 
    display: list-item; 
} 

I n tua pagina markup:

<nav> 
    <a>...</a> 
    <a>...</a> 
</nav> 
<header> 
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> 
    <p>The smell of invention awaits you...</p> 
</header> 

In questo modo si sta utilizzando le semantiche <header /> e <nav /> tag per contrassegnare il contenuto del testo, e quindi utilizzando i CSS per migliorare la presentazione con la formattazione di visualizzazione, le immagini del logo, ecc

Ricordo - anche se purtroppo non riesco a trovare le fonti ora - che i nuovi elementi proposti in HTML5 (intestazione, nav, footer, a parte, articolo, ecc.) Sono stati scelti in base all'analisi del database di Google di siti Web per identificare il più attributi ID comunemente utilizzati assegnati agli elementi DIV, ritenendo che quelli rappresentassero gli scenari più comuni in cui gli sviluppatori utilizzavano i DIV per avvolgere elementi significativi della loro struttura di pagina.

Answer 5

Ero solito pensare che il primo metodo fosse il modo corretto di utilizzare l'elemento, poiché è inteso a fornire informazioni rilevanti per una determinata sezione in cui è incluso, non essendo una sezione stessa, inoltre abbiamo già elementi per strutturando il contenuto, ma per quello che ho visto in alcune pagine, il motivo per cui molte persone includono anche un elemento di intestazione a livello di root è quello di fornire le stesse informazioni considerando l'intera pagina come una grande sezione, quindi ho cambiato idea pensare che entrambi gli esempi possano essere considerati corretti.

Answer 6

HTML5 elimina effettivamente il blocco/la distinzione in linea in favore di a more nuanced content model.L'elemento dell'intestazione è flow content, che è come lo stato predefinito per gli elementi HTML5. Semanticamente dovrebbe essere considerato come informazione introduttiva per il suo antenato più vicino section content o sectioning root.

Penso che entrambe le vostre esempi sono validi usi dell'elemento, anche se personalmente avrei probabilmente markup tuo primo in questo modo:

<header> 
    <img src="/img/logo.png" alt="MyLogo" /> 
    <nav> 
    <ul> 
     <li>..</li> 
    </ul> 
    </nav> 
    <hgroup> 
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1> 
    <h2>The smell of invention awaits you...</h2> 
    </hgroup> 
</header> 

Answer 7

Se si legge la specifica HTML5 del W3C, si scoprirà che ogni pagina HTML dovrebbe avere solo un tag H1, quindi se si utilizza h1 allora h2 allora h3 si potrebbe notare uno stile strano. Questo perché il browser si aspetta un h1 su ogni pagina html quando lo analizza.

Quindi è possibile utilizzare i tag h1 h2 h3 e modificarli come desiderato.

Il punto di utilizzo di elementi semantici html è perché il tuo sito web sarà "letto" non solo dai browser Web ma anche dai web crawler, strumenti che leggono la pagina con strumenti vocali, braili e molte altre applicazioni e strumenti fisici.

Così quando quelle applicazioni leggono il tuo sito web non leggono css, solo html e potrebbero leggere alcuni javascript. Quindi quando vedono lang = "en" sanno leggere il contenuto dell'elemento in inglese, ecc. Quando vedono "sezione" sanno che è elemento di sezione e quando vedono "a parte" sanno che è un elemento a parte ecc.

Possiamo vedere facilmente la pagina e sapere cosa è cosa, ma i non vedenti e le altre persone non possono farlo, quindi per loro questo sarà di grande aiuto. Pensaci quando crei i tuoi siti web, pensa a tutte le persone che accederanno a loro e quanto sarà facile per loro farlo.

Questo è l'intero punto dei nuovi elementi html5. Puoi creare la stessa pagina web solo con un elemento - "div" per esempio, e con tutta una serie di nuovi elementi semantici html5 - articolo, sezione, intestazione, piè di pagina, ecc. La pagina web avrà lo stesso aspetto nei browser web, ma applicazioni intelligenti come i robot dei motori di ricerca analizzeranno meglio la pagina e alcune applicazioni che leggono pagine Web analizzeranno la pagina più facilmente.

Il punto del web deve essere aperto a tutte le persone e gratuito, e sono d'accordo.

In futuro, il web si evolverà senza dubbio, verranno creati nuovi strumenti che analizzeranno le pagine Web e l'utilizzo di nuovi elementi semantici html5 renderà le tue pagine web a prova di futuro, quindi questi nuovi strumenti leggeranno le nostre pagine in modo intelligente .

Spero che questo abbia aiutato qualcuno :)