Travaillons la sémantique, la validité et l'accessibilité

[Plume]

Pelope !

Voilà, je travaille sur un document que j'ai intitulé modestement "Guide sur les règles et conventions (X)HTML/CSS".

Dans ce document, je présente les conventions et outils disponibles pour créer une interface graphique en (X)HTML/CSS. L'objectif est de réunir l'ensemble des règles qui régissent l'écriture de code (X)HTML et CSS pour la réalisation d'un site Web, et ce dans l'optique :

• d'assurer une certaine homogénéité du code source;
  
• de capitaliser le travail de création de styles CSS;
  
• d'améliorer l'accessibilité de chaque page en donnant une sémantique forte au contenu;
  
• de fournir un support homogène et sûr des différents navigateurs internet
  

Et donc j'aurai besoin d'avis pour le construire toujours au mieux.

Premier jet : http://plumeconception.olympe-network.co...Guide.html

P.

[Thedeejay]

tres bien, le seul bémol est la largeur de ta page... si tu pouvais la faire extensible car cela prend la moitié de mon ecran et les textes sont sur 15 lignes au lieu de 3...

[Plume]

Chacun ses préférences. C'est le problème. Beaucoup ne vont pas aimer de devoir traverser tout l'écran dans sa longueur avec les yeux. C'est plus fatiguant.

Mais je peux le faire.

P.

[edit] Fait.

[Melimelo]

maintenant c'est énorme pour moi je dois scroller :p et en plus plein de bug niveau affichage.

Sinon c'est bien fait ton truc

[Plume]

Ui, j'dois corriger certaines merde d'affichage.

Une question que je me pose par exemple : Comment coder un formulaire ? Faut il mettre chaque champ dans un <p></p> ou bien les laisser libres ?

Code :

<form action=""' method="" id="">
<!--
Avec le <p></p>
-->
<p>
  <label for=""></label><input type="text" name="" id="" value="" />
</p>
<!--
Libre
-->
<label for=""></label><input type="text" name="" id="" value="" />

Ou bien d'autres avis ?

P.

[Ruz]

Code PHP :

<?php 

<dl>

<dt><label></label></dt>

<dd><input ... /></dd>

...

</dl> 

[Sephi-Chan]

Une question que je me pose par exemple : Comment coder un formulaire ? Faut il mettre chaque champ dans un <p></p> ou bien les laisser libres ?

Code :

<form action="" method="" id="">
<!--
Avec le <p></p>
-->
<p>
  <label for=""></label><input type="text" name="" id="" value="" />
</p>
<!--
Libre
-->
<label for=""></label><input type="text" name="" id="" value="" />

Ou bien d'autres avis ?

Comme tu l'expliquais, les <label /> et <input /> doivent être inclus dans des blocs, donc effectivement dans un <p />, <div /> ou un couple <dt /> et <dd />.


Sephi-Chan

[Plume]

La question se pose pour la validité, l'accessibilité mais aussi la sémantique.
Est-ce que dans ce cadre, dt / dd sont adaptés ?

P.

[Sephi-Chan]

Pour ma part, la solution la plus sémantique semble être le <div />, puisqu'une ligne de formulaire n'est clairement pas un paragraphe ni une définition, d'autant que le <dt /> fait double emploi avec le <label />).

Organiser le formulaire en zone n'a donc pas de sens sémantique, c'est décoratif, et c'est pourquoi la balise <div /> me semble être adaptée, puisque justement elle n'influe pas sur le sémantique.


Sephi-Chan

[Plume]

Dans cette optique, pourquoi pas le span ?

P.

[edit]
Dans un <table>, il vaut mieux faire :

Code :

<table>
  <tr>
    <td>
      Du texte. En paragraphe. Ou pas.
    </td>
  </tr>
</table>

Code :

<table>
  <tr>
    <td>
      <p>
        Du texte. En paragraphe. Ou pas.
      </p>
    </td>
  </tr>
</table>

PS : Je pose des questions, certaines ont des réponses dans le document mais je me pose toujours des questions, donc je demande pour ensuite reporter des modifications. Personnellement, j'ai déjà généralement mes avis sur la question