PDA

Visualizza la versione completa : semantica html5


max103
31-05-2011, 18:49
vorrei un consiglio sul tag html5 da utilizzare

ho una pagina cosý composta:



<header><nav></nav></header>

<section>
qui ho una serie di link organizzati in sezioni, che tag utilizzo? <nav> o <article>?
</section>

<footer></footer>

rickynewtek
31-05-2011, 19:49
Hai le idee un p˛ confuse, sopratutto sui tag article e section... prova a schiarirti le idee QUI (http://www.targetweb.it/guide/guida-html5-di-base-i-tag-section-e-article/) mentre QUI (http://www.targetweb.it/html5/guida-uso-e-novita-su-html5/) se vuoi appronfondire l'uso dei nuovi tag.

Allora venendo al tuo problema:

<section> indica porzioni di codice o testo non distribuibili e comunque a diversa tematica. Es. section "news" section " contatti" etc.

<article> invece viene usato per contenere il testo o codice che concerne un specifico argomento. article "ricetta1" article "ricetta 2"

Dentro article puoi mettere un <header> con relativi dag di heading <hgroup>

<nav> viene di solito usato per la navigazione sul sito e non per normali elenchi (per quello usa come hai sempre mfatto <ul>

E' consigliabile posizionare il nav dentro il tag aside.

Venendo alla tua domanda:
qui ho una serie di link organizzati in sezioni, che tag utilizzo?
la risposta e' dipende. Queste sezioni fanno parte del sito? rendono la navigazioni efficente o sono una "lista" di link esterni o della stessa tipologia/tematica?

Se fanno parte della navigazione puoi usare nav (occhio ad abusarne).

Non abusare anche del tag section e article, se hai un box "generico" di testo o codice DEVI secondo le specifiche usare il tag DIV come hai sempre fatto.

max103
01-06-2011, 12:36
sono una serie di link che rappresentano le sezioni del sito

potrebbe essere la pagina mappasito.htm ad esempio

quindi mi stai dicendo:



<header><nav></nav></header>

<aside><nav>
<ul>
sezione 1
sezione 2
sezione 3
[/list]
</nav></aside>

<footer></footer>

rickynewtek
01-06-2011, 13:20
Tutto giusto ma il <nav> dentro il tag <header> e' inutile, fai cosi piuttosto:

<header>
<hgroup> //facoltativo
<h1>Titolo principale</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

<nav>
<ul id="menu">

[/list]
<nav>

Mentre invece il secondo spezzone di codice va bene

<aside>
<nav>
<ul>
sezione 1
sezione 2
sezione 3
[/list]
</nav>
</aside>

<footer></footer>

Ciao!

max103
01-06-2011, 14:09
ok ma l'header, contiene strutturalmente il men¨,
in realtÓ contiene anche una serie di elementi (scelta della lingua, search ecc)

qualcosa tipo






<div id="header">
search
cambio lingua
<nav>finalmente men¨ di navigazione </nav>
logo con h1
</div>


resto della pagina

rickynewtek
01-06-2011, 16:06
Ok ma <header> non e' div="header" Usa div header per il contenitore di lingua search etc, e usa <header> per inglobare il tutto, qualcosa del tipo:



<header>

<div id="head">

<div id="lingua"></div>
<nav></nav>

</div>
</header>

max103
02-06-2011, 14:19
leggendo la descrizione dei nuovi tag html5 offerta da w3schools

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

trovo:

<article> For external content, like text from a news-article, blog, forum, or any other content from an external source

come se <article> sia deputato a contenuti esterni al sito..?

rickynewtek
03-06-2011, 10:14
No per html5 non ti consiglio w3c schools, in ogni caso si intende contenuto esterno inteso come "re-distribuibile all'esterno" pensa ai vari social network.

max103
03-06-2011, 11:59
capito,

sono andato a cercare alla fonte e infatti la musica cambia
ecco il link al tag <article> sul sito w3.org

http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element

rickynewtek
06-06-2011, 18:34
Si w3c school usalo solo per Php o se vuoi fare qualche prova "in tempo reale" (negli altri linguaggi e' parecchio scadente).

Loading