5592 sujets

Sémantique web et HTML

[résolu] CV et structure sans trop de balises div

Bonjour,
voilà je suis en train de repasser mon CV au format "web" et j'ai peur d'être atteint de divite (en regardant mon départ je pense que oui Smiley confused )
Voilà mon CV est composé, comme beaucoup, de rubriques et de contenu pour chaque rubrique....
J'étais parti d'abord sur quelque chose genre :

<div id="objectif" class="rubrique">
     <h2>Objectif</h2>
     Ne plus être nul en CSS
</div>
<div id="formations" class="rubrique">
     <h2>Formations</h2>
     <ul>
          <li>2005 - Formation de lecture du forum alsacréations</li>
          <li>2003 - Diplome de questions embrouillées mention TB</li>
          <li>...</li>
     </ul>
</div>
<div id="competences" class="rubrique">
<h2>Compétences</h2>
</div>

Mais le taux de div augmente.... et sémantiquement je suis pas sur que ce soit approprié...

J'ai pensé alors que mes rubriques ne sont en fait qu'une suite de définitions : à chaque titre de rubrique j'associe un contenu correspondant qui décrit cette rubrique.. donc j'aurais quelque chose du genre :

<dl id="contenu_cv">
<dt>Objectif</dt>
<dd>Ne plus être nul en CSS</dd>
<dt>Formations</dt>
<dd>.....</dd>
...
</dl>

Mais l'inconvénient c'est que je voudrais avoir la possibilité d'appliquer éventuellement un style à mon couple titre_rubrique + contenu...
Peut-être que l'utilisation d'autres balises serait plus adaptée...

Merci d'avance Smiley biggrin
Modifié par nelero (18 Aug 2005 - 12:11)
Salut.

Personnellement je préfère la première solution :
<div id="objectif" class="rubrique">
<h2>Objectif</h2>
Ne plus être nul en CSS
</div>
<div id="formations" class="rubrique">
<h2>Formations</h2>
...
</div>
Il me semble que les <div> dans ce cas là ne sont pas du tout indispensables mais je trouve bien d'en mettre pour regrouper un titre et le contenu associé à ce titre.

Si ça te fait peur... enlève tes div tout simplement !

Exemple : 
<h1>CV...</h1>

TOTO
<address>
...
</address>
...

<h2>Formation</h2>
...
<h3>Informatique</h3>
...
<h3>Langues</h3>
...

<h2>Expérience</h2>
...


Sinon un petit conseil : Utilise la balise "code" pour poster ton code sur le forum. C'est plus agréable.
Modifié par 84mickael (16 Aug 2005 - 17:30)
Beaucoup plus simplement : as-tu besoin de regrouper tes informations par rubrique pour les styler ?

Manifestement oui, n'est-ce pas ?

C'est exactement le rôle de <div>.

Il faut distinguer trois choses :

1. l'utilisation normale de <div> pour opérer des regroupements nécessaires pour appliquer un style CSS, définir la langue du contenu, etc : aucune réserve à avoir.

Ici, <div> te permet d'utiliser de véritables titres, et non des pseudo-titres en liste de définition, dont l'abus a des conséquences bien concrètes.

2. l'utilisation maladroite de <div> parfois inutiles, quand la classe ou l'id pourrait être porté directement par l'élément HTML descendant. Par exemple, plutôt que:

<div class="foo">
   <ul>
   ...
   </ul>
</div>


... Il sera plus court et plus élégant d'écrire :

   <ul class="foo">
   ...
   </ul>


... Mais cela n'a rien de dramatique : il s'agit plus d'une question d'élégance du code qu'autre-chose, et les pages Web valides souffrent en général d'autres problèmes bien plus graves.

3. L'utilisation abusive de <div>, élément générique, pour remplacer un élément HTML plus spécifique. C'est en fait le seul problème grave. Exemple, on n'écrira pas :
<div class="titre_principal">...</div>


... puisqu'on peut écrire plutôt :
<h1>...</h1>

Modifié par Laurent Denis (16 Aug 2005 - 18:04)
merci pour ces réponses (et rapides en + c'est encore mieux Smiley cligne )
(ps : 84mickael> c'est vrai que c'est beaucoup mieux avec code, mais quand on a pas de tête.... Smiley confus )
Je pense donc que je vais rester avec ces div, au moins pour le découpage rubrique + contenu...

Pour ce qui est de ma partie plus haute ou il y a mon nom, mon adresse et tout et tout, là encore j'ai succombé à la divite... (docteur,je suis perdu?)

<div id="candidat">
            <div class="contact_postal">
                <div id="identite">Prénom Nom</div>
                <div id="adresse">
                    rue 1<br />
                    CP - Ville <br />
                </div>
            </div>
            <div id="etat_civil">
                22 ans (date_naissance)<br />
                situation familiale<br />
                Né à ville<br />
            </div>
            <div id="contact">
                tel_1<br />
                tel_2<br />
                mail<br />
            </div>
        </div>

Pour ma div id="contact" je pense la garder puisqu'il s'agit d'un regroupement logique d'informations...
Pour mon adresse la encore il y a des div... grrrr Smiley fache , j'ai pensé plutôt à address mais c'est contenu "en-ligne"...
et pour le reste je vois pas trop comment limiter les div car je pense pas qu'elles soient toutes "justifiées"... Smiley sweatdrop
Administrateur
Question bête : pour une liste d'élément informatifs... pourquoi ne pas utiliser les balises de liste ? Smiley smile (ça éviterait ces affreux <br> partout)
a écrit :
question bête
j'adore Smiley biggrin (j'aimerais poser des questions aussi bêtes)
c'est une excellente idée (apparemment c'était trop fort pour moi Smiley ohwell )

et pour address c'est une bonne idée?

PS : et je suis d'accord que c'était très laid...
Modifié par nelero (16 Aug 2005 - 21:45)
Administrateur
nelero a écrit :
et pour address c'est une bonne idée?

En fait <address> a une fonction très spécifique selon les specs :
http://www.la-grange.net/w3c/html4.01/struct/global.html#h-7.5.6

a écrit :
Les auteurs peuvent employer l'élément ADDRESS pour fournir les informations de contact du document ou d'une partie essentielle de celui-ci, comme un formulaire. Cet élément apparaît souvent au début ou à la fin du document.

Par exemple, une page du site Web du W3C relative à HTML pourrait contenir les informations de contact suivantes :

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
personnes à contacter pour l'<A href="activite">activité HTML du W3C</A><BR>
$Date : 1999/12/24 23:07:14 $
</ADDRESS>


Il s'agit vraiment de signifier comment contacter l'auteur du document.
A ne pas confondre avec l'adresse (postale par exemple).

Mais a priori je ne vois pas de contrindication à l'utiliser dans ton cas puisque le contact du CV est également le contact du site web.
oui c'est ce que j'avais lu...
c'est pour ça que si je devais l'utiliser elle viendrait en remplacement de toute la div id="contact_postal" qui comprend mon nom et mon adresse postale... mais logiquement, puisque address indique comment contacter l'auteur du document, mon adresse mail ainsi que mes numéros de téléphone devraient aussi apparaitre dans address... et là c'est moins bon puisque j'aurais moins de moyen pour "styliser" les deux parties différemment (en l'état actuel, mon nom et mon adresse se trouvent à gauche, ma situation familiale au centre et mon numéro de téléphone et mon adresse à droite... donc ça va coincer...

et pour les div rue et cp - ville ?

alors div ou pas div dans ce cas là mon problème est ici Smiley langue

PS : merci pour les réponses elles sont toujours bonnes et argumentées, j'aime ça
Modifié par nelero (16 Aug 2005 - 23:03)
Donc voilà suite à toutes les réponses, j'ai obtenu la structure suivante...
Il y a peut-être encore des abus ou une mauvaise utilisation des balises, mais en tout cas, je trouve que les div correspondent vraiment à un regroupement logique et les loisirs sont bien mieux en liste même si ils ne sont pas sur de rester comme ceci (au départ ils étaient sur une seule ligne, simplement séparés par une virgule)...

Voilà si vous avez des remarques elles sont bien évidemment bienvenues Smiley ravi 

    <div id="candidat">
        <address id="contact_postal">
            <div id="identite">Prénom nom</div>
            <div id="adresse">
                rue<br />
                CP - Ville<br />
            </div>
        </address>
        <ul id="etat_civil">
            <li id="date_naissance">22 ans (date de naissance)</li>
            <li id="situation_familiale">Célibataire</li>
            <li id="lieu_naissance">Né à ville</li>
        </ul>
        <address id="contact_autre">
            <ul id="contact_tel">
                <li id="portable">ou.ps.00.00.00</li>
                <li id="fixe">re.ou.ps.00.00</li>
            </ul>
            <a id="adresse_mail" href="mailto:monmail@site.com">monmail@site.com</a>
        </address>
    </div>
    <div id="contenu_cv">
        <h1 id="accroche">Mon accroche</h1>
        <div id="objectif" class="rubrique">
            <h2>Objectif</h2>
            Ne plus être nul en CSS
        </div>
        <div id="formations" class="rubrique">
            <h2>Formations</h2>
            <!-- ici tableau des formations (colonne année,diplome et ville)-->
        </div>
        <div id="competences" class="rubrique">
            <h2>Compétences</h2>
            <!-- la une suite de domaines et pour chaque domaine les languages d'où le rapprochement terme>explication donc liste de déf ? -->
            <dl class="contenu_rubrique">
                <dt>Programmation :</dt>
                <dd>
                    <ul>
                        <li>C++, C</li>
                        <li>C#</li>
                        <li>Python</li>
                        <li>...</li>
                    </ul>
                </dd>
                <dt>Web :</dt>
                <dd>
                    <ul>
                        <li>PHP, ASP</li>
                        <li>...</li>
                        <li>...</li>
                    </ul>
                </dd>
                <!-- et ainsi de suite... -->
            </dl>
        </div>
        <div id="langues" class="rubrique">
            <h2>Langues</h2>
            <!-- tableau du genre (langue, niveau, détail)  ou liste non ordonnée avec des span pour éventuellement apporter un style différent aux langues, ou niveaux ou détails... ?? -->
        </div>
        <div id="experiences" class="rubrique">
            <h2>Expérience professionnelle</h2>
            <div class="contenu_rubrique">
                <div class="experience">
                    <h3>Période et lieu d'expérience</h3>
                    <div class="detail_experience">
                        <ul class="realisations">
                            <li class="realisation">J'ai fait le café... (normal pour un stagiaire [cligne])</li>
                            <li class="realisation">Je me suis aussi tourné les pouces</li>
                            <li class="realisation">J'ai rédigé des mails</li>
                        </ul>
                        <ul class="apports">
                            <li class="apport_personnel">je sais doser le café pour 8 personnes</li>
                            <li class="apport_personnel">Mes pouces ne s'emmêlent plus quand je les tourne</li>
                            <li class="apport_personnel">Je sais appuyer sur le bouton envoyer de mon logiciel de messagerie</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="loisirs" class="rubrique">
            <h2>Loisirs et intérêts personnels</h2>
            <ul class="contenu_rubrique">
                <li>...</li>
                <li>...</li>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </div>

Modifié par nelero (18 Aug 2005 - 12:13)
Smiley confused bien entendu et si je pouvais en mettre encore + je suis sur que je le ferais Smiley ohwell
non plus sérieusement j'ai pas fait gaffe, j'ai regardé le sens en laissant le type de contenu (le vilain) Smiley hippy ...
je reviens donc à la div de départ pour l'adresse et le prénom+nom

<div id="candidat">
<div id="contact_postal">
<div id="identite">Prénom nom</div>
<div id="adresse">
rue<br />
CP - Ville<br />
</div>
</div>

idem pour tel + mail...

merci pour la remarque Smiley cligne

Par la même occasion je viens de me rendre compte que l'extension firefox qui me validait ma page (basée sur tidy) ne m'indique pas l'erreur (je lui ferai plus confiance tiens Smiley cligne ) il s'agissait bien d'un bug de l'extension de validation
Modifié par nelero (18 Aug 2005 - 22:23)
Sujet clos
Aller à