5568 sujets

Sémantique web et HTML

Html5 <address> <aside> <balise attribut>

Bonjour,

Sur une page de biographie, je veux faire un bloc d'infos complémentaires en rapport avec le sujet du texte principal.

du coup, le code suivant vous semble t'il cohérent voir sémantique.

    
<aside>
        <section coordonnees>
            <address>
                <ul>
                    <li><span address>Nom:</span>Costes</li>
                    <li><span address>Prénom:</span>Yvan</li>
                    <li><span address>Adresse:</span>xxxxxxxx<br>xxxxxxxx</li>
                    <li><span address>Mail:</span>xxxx@xxxxxxx.net</li>
                    <li><span address>Permis:</span>x</li>
                    <li><span address>Marié:</span>xxx</li>
                    <li><span address>Enfants:</span>x</li>
                    <li><span address topmarge>Twitter:</span>@ycostes</li>
                    <li><span address topmarge>Mon Cv:</span><a href="">PDF</a> (0,23 Mo)</li>
                </ul>
            <address>
        </section>
    </aside>


ps : concernant la syntaxe 
<span toto>
et son css 
span(toto) {}
/* les parenthèses sont des crochets */

quand est-il de la rétro-compatibilité ?


Merci de m'avoir lu.
Modifié par fufu (13 May 2011 - 16:57)
Bonjour,

Sur la validité du code:
Les attributs "coordonnees", "address" (tiens, on passe du français à l'anglais dans ta convention de nommage?) et "topmarge" n'existent pas en HTML. Si tu souhaites utiliser des attributs custom, tu peux utiliser le préfixe data- qui te permet d'utiliser n'importe quel nom d'attribut de manière valide (et d'accéder aux données via element.dataset). Ceci dit, ces informations semblent être de bonnes candidates pour l'attribut... class.

Sur la sémantique:
- Quand tu rajoutes tes propres métadonnées selon ta propre convention de nommage, sans utiliser un standard existant (microformat, microdata, RDFa...), ce n'est pas de la sémantique web, c'est du code inutile. Smiley cligne
- Quand tu utilises un mécanisme standard, on se rapproche du Web sémantique; à voir si tu utilises un vocabulaire existant, ou si tu utilises ton vocabulaire à toi pour usage interne (dans une application web par exemple).
- Tu pourrais regarder du côté de hCard (microformat) si tu veux rendre tes infos exploitables. Autrement, si c'est juste pour pouvoir appliquer des styles CSS, utilise class avec les noms de classe que tu souhaites.
- Je ne suis pas sûr que cet usage de <address> soit correct. Il est au moins beaucoup trop large. Je l'enlèverais carrément.
- Un SECTION unique dans un ASIDE, c'est une erreur il me semble. Tu dois pouvoir enlever le SECTION (ou le ASIDE, ça dépend du contexte).
fvsch a écrit :
Bonjour,

Sur la validité du code:
Les attributs &quot;coordonnees&quot;, &quot;address&quot; (tiens, on passe du français à l'anglais dans ta convention de nommage?) et &quot;topmarge&quot; n'existent pas en HTML. Si tu souhaites utiliser des attributs custom, tu peux utiliser le préfixe data- qui te permet d'utiliser n'importe quel nom d'attribut de manière valide (et d'accéder aux données via element.dataset). Ceci dit, ces informations semblent être de bonnes candidates pour l'attribut... class.


En fait, j'ai du comprendre, à tord, qu'il était possible en html5 de spécifier des éléments custom de cette manière et simplement de les cibler en css via : element [ valeur ] {}.

fvsch a écrit :

- Tu pourrais regarder du côté de hCard (microformat) si tu veux rendre tes infos exploitables. Autrement, si c'est juste pour pouvoir appliquer des styles CSS, utilise class avec les noms de classe que tu souhaites.

Je vais regarder du coté de hCard.

fvsch a écrit :

- Je ne suis pas sûr que cet usage de &lt;address&gt; soit correct. Il est au moins beaucoup trop large. Je l'enlèverais carrément.
- Un SECTION unique dans un ASIDE, c'est une erreur il me semble. Tu dois pouvoir enlever le SECTION (ou le ASIDE, ça dépend du contexte).

Je vire le section car je pense être dans un cas typique d'utilisation d'un <aside>.
Concernant address, dans la spec, elle contient un ensemble de liens routant le visiteur vers des fiches de contact, sur html5doctor, elle ne contient qu'un lien redirigeant vers le même type de liens j'imagine.
Pas très explicite pour le coup.

Merci pour ce recadrage Smiley cligne
fufu a écrit :
En fait, j'ai du comprendre, à tord, qu'il était possible en html5 de spécifier des éléments custom de cette manière et simplement de les cibler en css via : element [ valeur ] {}.

Des éléments custom, jamais en HTML (éventuellement en vrai XHTML). Mais libre à toi de faire du XML 100% custom à la place si tu préfères. Smiley cligne
Des attributs custom, oui, mais écrits data-lenomdemonattribut, donc toujours avec le préfixe data-. Et, côté CSS, le sélecteur d'attribut continue de marcher normalement.
Modifié par fvsch (13 May 2011 - 20:06)
Disons, que je me suis basé sur l'exemple de Paul Irish dans son pack Boilerplate.
Son fichier 404.html contient ceci (il est en doctype html5) : 

<p><span frown> :[ </span></p>


Avec le style suivant.

span[ frown ] { transform: rotate(90deg); display:inline-block; color: #bbb; }
Ah, tiens j'aurais pas pensé que Paul Irish pouvait écrire du code foireux comme ça.

Mieux, je pense:
<p><abbr class="emoticon western" title="Frowning">:[</abbr></p>
<p><abbr class="smiley eastern" title="Sleepy…">(-.-)Zzz</abbr></p>

.emoticon {display:inline-block; color: #bbb;}
.emoticon.western {transform: rotate(90deg);}


Les sélecteurs d'attributs, utilisables pour certains à partir d'IE7, sont déjà utiles, que ce soit pour exploiter des attributs HTML existants (input[type=checkbox] {}, label[for=register-name]…) ou ponctuellement pour des data-attribute.
Nul besoin de:
- rajouter des data-attribute là où des attributs HTML existant font déjà le travail (class, ce n'est pas sale! Smiley cligne );
- inventer des attributs invalides.
Modifié par fvsch (14 May 2011 - 11:09)
Merci pour toutes ces réponses Florent.
Je vais tenter d'écrire un peu moins de la merde avec ces indications Smiley cligne
Sujet clos
Aller à