5372 sujets

Sémantique web et HTML

Pages :
Bonjour,

En ce moment même je fais mon site web et j'ai une question, j'ai plusieurs sections générales dans mon site et plusieurs sous-sections.

J'explique :

Accueil
- Présentation
- Localisation
etc
Curriculum vitae
- Formations
- Experiences
etc.

est il donc logique sémantiquement de faire ceci :


<section id="Curriculum_vitae">
    <section id="formation">
       <h2>Formations</h2>
       <article>Texte parlant du Bac</article>
       <article>Texte parlant du BTS</article>
       ...
    </section>
    <section id="competence">
       <h2>Compétences</h2>
       <article>Langages informatique</article>
       <article>Théorique</article>
       ...
    </section>
</section>


Je vous remercie pour votre réponse Smiley smile car j'hésite avec la balise div (normal quoi) Smiley ravi
Modifié par Vipear (05 Nov 2013 - 11:55)
Hello!
Difficile de donner un avis sans plus de détails concernant le code et la structure du site. S'agit-il d'un site type "one-page" ou d'un site plutôt "traditionnel".

Vipear a écrit :

Accueil
- Présentation
- Localisation
etc
Curriculum vitae
- Formations
- Experiences
etc.

Ça représente quoi? un menu? où dans le cas d'un "one-page" les différentes sections? Par ce selon le cas, la structure ne sera pas la même...

Si c'est un type one-page, ça pourrait être plutôt:

<section id="cv">
  <article id="formation"></article>
  <article id="experience"></article>
</section>

Dans le cas d'un menu:

<nav id="navigation">
  <ul>
    <li>CV
      <ul id="cv">
        <li id="formation">Formation</li>
        <li id="experience">Expérience</li>
      </ul>
    </li>
    <li>...</li>
  </ul>
</nav>

Modifié par juliesunset (23 Sep 2013 - 19:41)
P.S. Ton code pourrais aussi être correct. Tout dépend de ce que contient les sous-sections, mais à première vue j'utiliserais "article" pour les sous-sections
Je reviens un peu sur le sujet car j'avais la solution mais j'ai du revoir ma semantique et le problème revient

Voici un cas plus concret


<section id="Curriculum_vitae">
    <section id="formation">
       <h2>Formations</h2>
       <article>Texte parlant du Bac</article>
       <article>Texte parlant du BTS</article>
       ...
    </section>
    <section id="competence">
       <h2>Compétences</h2>
       <article>Langages informatique</article>
       <article>Théorique</article>
       ...
    </section>
</section>


Est ce correct ? Car je ne vois nul part du cas "section dans section", a part que les sections doivent être un groupe, une thématique, qu'elle ne doit pas remplaçante du DIV, donc j'ai un doute sur "<section id="Curriculum_vitae">", est ce bon ou doit elle être une DIV ?
Modifié par Vipear (05 Nov 2013 - 02:33)
Hello Vipear,
(j'espère que tu portes mal ton pseudo Smiley smile )

Tu ne dois pas utiliser section lorsqu'article (ou aside ou nav) est plus approprié. CV est bien une section a part entière mais Formation ou Experience ont peu de sens hors du contexte du curriculum vitae, l'utilisation de la balise article est donc plus pertinente


<section id="cv">
<article id="formation"></section>
<article id="experience"></section>
</section>


Une section peut être parent d'une autre section, mais on le voit rarement car c'est rarement le cas, en général on trouve d'autres balises plus appropriées.
D'autant plus une section ne peut se satisfaire de n'être qu'un container ou wrapper pour un effet de mise en page, la balise div dans être utilisée dans ce cas.
Un élément qui peut peut-être t'aider à décider un peu mieux: <section> ajoute implicitement un repère de navigation pour les lecteurs d'écran (landmark), tout comme <article> et <aside> d'ailleurs.

Si avoir des repères de navigation pour la section principale et les sous-sections te paraît justifié, et si, comme déjà dit, il n'y a aucune autre balise plus appropriée que <section>, alors tu peux y aller. Du côté du W3C, c'est autorisé d'avoir des <section> imbriqués. Mais effectivement, des sections imbriqués, ça devrait être plutôt rare car en général, il y a plus approprié.

Par contre, j'aurais plutôt fait l'inverse des avis précédents: <article> pour englober tout le CV, et éventuellement <section> pour chacune des parties. Pourquoi ? parce que <article> est censé être une zone de contenu qui se suffit à elle-même. Pour moi, le CV en entier se suffit à lui-même tandis qu'une des parties comme formation et compétances prises seules, à mon avis non, c'est plutôt des parties rattachées au tenant principal qui est le CV entier.
Sugarskill a écrit :
D'autant plus une section ne peut se satisfaire de n'être qu'un container ou wrapper pour un effet de mise en page, la balise div dans être utilisée dans ce cas.

Et justement ! C'est bien ça qui me pose problème car je ne suis pas d'accord avec vous, le <section id="cv"> n'est qu'un conteneur de sous-section, par conséquent la W3C indique bien que ça devrait être une DIV (Sauf que j'ai aussi entendu qu'une section pouvait contenir un ensemble de section ...)

De plus si je fais cela :

<section id="cv">
    <article id="formation"></article>
    <article id="experience"></article>
</section>

Que deviennent mes textes contenu dans formation et experience ? Alors qu'ils représentent véritablement des articles Smiley biggol car il semble que tu ai repris le premier exemple alors que second est plus parlant.
<article>Texte parlant du Bac</article>
<article>Texte parlant du BTS</article>

Par contre mettre du section dans article, je suis peu fan, j'ai même lu un article qui le déconseille

(Après peut être qu'il a totalement faux, mais j'étais plutôt d'accord avec)

Et puis ... Il a quoi mon pseudo ? Smiley biggrin
Modifié par Vipear (05 Nov 2013 - 11:54)
salut

Vipear a écrit :

Que deviennent mes textes contenu dans formation et experience ? Alors qu'ils représentent véritablement des articles Smiley biggol car il semble que tu ai repris le premier exemple alors que second est plus parlant.


Je suppose que le code avec section>article est le plus approprié. Dans ton cas, le texte que tu balises avec <article> peut n'être qu'un "simple" <p> (vu que c'est le cas) et que tes compétences s'apparentent à une liste donc ul>li>(tes compétences) mais c'est très difficile de dire si c'est juste ou pas vu que c'est toi qui sait exactement comment sont structurées toutes tes données.
Et justement Zelalsan ! Le soucis c'est que dans formation ce n'est pas qu'un texte, il y a un titre, deux listes plus une description, cela aurait été qu'un texte, la solution aurait été plus simple.

Mais même pour les compétences, elles sont regroupés sur un thème avec un titre, donc chaque <ul> et <h2> logiquement doit être dans un <article>. Du moins je le vois ainsi d'après la sémantique.
Ça reste quand même difficile de dire si telle chose est bien ou pas ou que telle autre est meilleure. Une liste a une sémantique bien établie et tu peux construire ton document de tellement de manières. Rien que tes articles peuvent s'apparenter à une liste de compétences après il faut voir aussi ce que contiendra d'autre le document portant ton CV. Cela dit, rient ne t'empêche de passer par des listes imbriquées pour ta partie compétences et un <article> peut très bien regrouper un h2+ul(*2)+p.
Par contre à mon sens, si tu utilises des <h2> dans tes <article> tu devrais peut être spécifier un <h1> dans ta section.
Je vois peut être la chose comme suit (encore une fois c'est difficile de concevoir la chose à ta place)

<section id="Curriculum_vitae">
	<h1>Curriculum vitae</h1>
	<article id="formation">
		<h2>Formations</h2>
		<ul>
			<li>...</li>
			<li>...</li>
		</ul>
		<ul>
			<li>...</li>
			<li>...</li>
		</ul>
		<p>...</p>
	</article>
	<article id="competence">
		<h2>Compétences</h2>
		<ul>
			<li>
				<h3>Langages informatique</h3>
				<ul>
					<li>...</li>
					<li>...</li>
				</ul>
			</li>
			<li>
				<h3>Théorique</h3>
				<ul>
					<li>...</li>
					<li>...</li>
				</ul>
			</li>
		</ul>
	</article>
</section>
J'apporte un cas concret avec Formation car je pense qu'avec vous allez tous revoir votre copie ^^

<section id="formation">
    <h2>Formations</h2><a href="#">Haut de page</a>
    <div class="tabs back back-white">
        <nav>
            <ul>
                <li class="actif">Master MIAGE</li>
                <li>Licence STIC</li>
            </ul>
        </nav>
    
        <article>
            <h3>Master Méthodes informatiques appliquées à la gestion des entreprises (MIAGE)</h3>
            <ul>
                <li><b>Parcours :</b> Communication et conduite de projet multimédia</li>
                <li><b>Etablissement :</b> UPJV - Université de Picardie Jules Verne | <b>Lieu :</b> Amiens</li>
                <li><b>Période :</b> 2012 - Aujourd'hui | <b>Type de formation :</b>  Alternance | <b>Niveau d'études :</b> I (Bac+5)</li>
            </ul>
            <div class="details">
                <p>
                    Le Master de méthodes informatiques appliquées à la gestion des entreprises (MIAGE) est un diplôme universitaire 
                    français de niveau Bac+5, alliant une double compétence en informatique et en gestion, destiné à former des cadres 
                    d'entreprise experts en ingénierie et management des systèmes d'information. Cette formation dirige rapidement vers 
                    des métiers liés à la prise de décision et à l'encadrement.
                </p>
                <h4>Les axes majeurs qui sont enseignées sont les suivants :</h4>
                <ul>
                    <li>Management et ingénierie des systèmes d'information</li>
                    <li>Sciences et technologies informatiques</li>
                    <li>Sciences de l'entreprise et gestion</li>
                    <li>Communication</li>
                </ul>
            </div>
        </article>
    
        <article>
            <h3>Licence Sciences et technologies de l'information et des communications (STIC)</h3>
            <ul>
                <li><b>Parcours :</b> Informatique générale</li>
                <li><b>Etablissement :</b> CNAM de Haute-Normandie | <b>Lieu :</b> Rouen</li>
                <li><b>Période :</b> 2011 - 2012 | <b>Type de formation :</b>  Alternance | <b>Niveau d'études :</b> II (Bac+3)</li>
            </ul>
            <div class="details">
                <p>
                    Le diplôme offre une formation générale couvrant les principaux domaines de l'informatique : développement, programmation, réseaux,
                    multimédia, systèmes, architecture des machines, génie logiciel, recherche opérationnelle, systèmes d'informations, systèmes                        industriels.
                </p>
                <h4>Le cursus enseigne les savoir-faire ci-dessous :</h4>
                <ul>
                    <li>Participation à la rédaction du cahier des charges</li>
                    <li>Analyse spécifique à l'application</li>
                    <li>Développement d'applications</li>
                    <li>Elaboration des protocoles de tests</li>
                    <li>Formation des utilisateurs</li>
                    <li>Rédaction d'une documentation technique</li>
                    <li>Suivi de maintenance évolutive et corrective</li>
                    <li>Savoir communiquer, faire une présentation</li>
                </ul>
            </div>
        </article>
        [b]Etc.[/b]
</section>


La balise NAV est un menu jQuery qui affiche le contenu suivant le choix du visiteur et de l'événement onclick, donc no stresse, c'est pas le sujet les enfants Smiley biggrin

Je rappel pour ceux qui passent, que le sujet est de savoir si il possible de faire ceci :


<section id="Curriculum_vitae">
    <section id="formation">
       <h2>Formations</h2>
       <article>Texte parlant du Bac</article>
       <article>Texte parlant du BTS</article>
       ...
    </section>
    <section id="competence">
       <h2>Compétences</h2>
       <article>Langages informatique</article>
       <article>Théorique</article>
       ...
    </section>
</section>


D'ailleurs quand j'y pense, ne serait il pas judicieux de mettre les <h2> des <section> dans des <header> ? car c'est l'entête de la section, pareil pour les <article> ?
Modifié par Vipear (05 Nov 2013 - 21:00)
Un <header> juste pour un <h2>, c'est plutôt inutile. Ca peut être utile pour ajouter de la méta-information en plus du <h2>.

Sinon en règle générale rien de particulier ne me choque, sauf ton <nav>. A mon sens ce n'est pas de la navigation, donc je ne l'utiliserais pas.
La nav est celui qui fait la navigation entres les articles. C'est lui qui permet l'affichage de l'article choisi, toujours étrange ?
Bonjour à toutes et à tous.

J'ai survolé le sujet et je pense avant de prendre la décision de choisir telle ou telle balise, de parler de la présentation du CV que tu désires adopter. Voici un lien concernant des modèles de présentations de CV.

Pour les balises section et article, en général, je les alterne.
Je ne mets jamais dans une section, une autre section fils.
Et de même, je ne mets jamais dans un article un autre article fils.

Ensuite je crée une structure répétitive. Par exemple, je vois que tu as un titre, des subdivisions, et un paragraphes. Je traduis cela par :
<section>
	<article>
		<h1>titre</h1>
		<ul>
			<li>détail 1</li>
			<li>détail 2</li>
			<li>détail 3</li>
		</ul>
		<p>paragraphe</p>
	</article>
</section>

Maintenant, dans cette structure de base, rien ne t'empêche de mettre plusieurs article dans ta section, c'est tout à fait autorisé !
Si tu as un simple titre, tu peux laisser une simple balise h1.
Mais si ton titre est un peu plus complexe, rien ne t'empêche de l'enrichir, comme ci-après :
<header>
	<h1>titre</h1>
	<nav>
		<ul>
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
		</ul>
	</nav>
</header>

Mais en toute logique, dans un bloc (section ou article), tu as une seule en-tête, une subdivision (article ou section en alternance du bloc parent) qui peut se répéter indéfiniment et pour terminer un seul pied de page.

En gardant cette logique de découpage, tu simplifies grandement ton CSS.

Ps : nul besoin de détailler ce que représente un MIAGE. Tout le monde sait que c'est une "méthode informatique appliquée à la gestion d'entreprise" et c'est un master (en trois ans)!
De mon temps, on parlait de maitrise et cela se faisait en deux ans après un deug.

@+
a écrit :
La nav est celui qui fait la navigation entres les articles. C'est lui qui permet l'affichage de l'article choisi, toujours étrange ?

Ah, non; j'avais pas pigé que les différentes parties du CV étaient masquées par défaut.
tournikoti a écrit :
Bonjour à toutes et à tous.

J'ai survolé le sujet et je pense avant de prendre la décision de choisir telle ou telle balise, de parler de la présentation du CV que tu désires adopter. Voici un lien concernant des modèles de présentations de CV.

Pour les balises section et article, en général, je les alterne.
Je ne mets jamais dans une section, une autre section fils.
Et de même, je ne mets jamais dans un article un autre article fils.

Ensuite je crée une structure répétitive. Par exemple, je vois que tu as un titre, des subdivisions, et un paragraphes. Je traduis cela par :

Maintenant, dans cette structure de base, rien ne t'empêche de mettre plusieurs article dans ta section, c'est tout à fait autorisé !
Si tu as un simple titre, tu peux laisser une simple balise h1.
Mais si ton titre est un peu plus complexe, rien ne t'empêche de l'enrichir, comme ci-après :

Mais en toute logique, dans un bloc (section ou article), tu as une seule en-tête, une subdivision (article ou section en alternance du bloc parent) qui peut se répéter indéfiniment et pour terminer un seul pied de page.

En gardant cette logique de découpage, tu simplifies grandement ton CSS.

Ps : nul besoin de détailler ce que représente un MIAGE. Tout le monde sait que c'est une &quot;méthode informatique appliquée à la gestion d'entreprise&quot; et c'est un master (en trois ans)!
De mon temps, on parlait de maitrise et cela se faisait en deux ans après un deug.

@+


Mon dieu, j'ai l'impression que tu essayes de me "cultivé" sur comment faire mon CV. Je ne suis pas au pôle emploi et sache que mon CV est en général très apprécier, donc merci quand même.

"Je ne mets jamais dans une section, une autre section fils." Je ne cherche pas à savoir ce que tu fais, je cherche à savoir si sémantiquement c'est valide auprès du W3C ainsi qu'en accessibilité.

"Mais en toute logique, dans un bloc (section ou article), tu as une seule en-tête, une subdivision (article ou section en alternance du bloc parent) qui peut se répéter indéfiniment et pour terminer un seul pied de page." J'ai l'impression que tu me prends pour un gugusse en te lisant, car tu m'expliques ce qu'on apprend à la base du HTML Smiley hum

"Ps : nul besoin de détailler ce que représente un MIAGE. Tout le monde sait que c'est une &quot;méthode informatique appliquée à la gestion d'entreprise&quot; et c'est un master (en trois ans)!
De mon temps, on parlait de maitrise et cela se faisait en deux ans après un deug."

Ah bon ? Excuse moi mais moi je le fais en deux ans déjà et ensuite NON tous les employeurs ne sont pas si cultivés que toi mon grand, il m'est arrivé lors de certains entretiens qu'on me demande ce que ça veut dire.

Maintenant le seul truc de bien que je vois est ceci et je l'avais déjà en tête :
<header>
	<h1>titre</h1>
	<nav>
		<ul>
			<li>menu 1</li>
			<li>menu 2</li>
			<li>menu 3</li>
		</ul>
	</nav>
</header>


Bon bref, un peu "énervant" de lire ton commentaire car au final il n'avance pas le schmilblick et je pense que je vais finir par le faire à ma façon car ça dérive, a moins que quelqu'un d'objectif comme les anciens commentaires sans critique sur le contenu veuille bien me faire part de savoir si la structure que je propose est valide

<section id="Curriculum_vitae">
    <section id="formation">
       <header>
           <h2>Formations</h2>
	   <nav>
		<ul>
	            <li>menu 1</li>
		    <li>menu 2</li>
		    <li>menu 3</li>
		</ul>
	   </nav>
       </header>
       <article>Texte parlant du Bac</article>
       <article>Texte parlant du BTS</article>
       ...
    </section>
    <section id="competence">
       <header><h2>Compétences</h2></header>
       <article>Langages informatique</article>
       <article>Théorique</article>
       ...
    </section>
</section>


Enfin je sais pas, y'a pas quelqu'un de calé sur les règles du W3C pour me dire juste un OUI ou un NON et si NON, la solution ? car le seul truc a savoir c'est si cette balise <section id="Curriculum_vitae"> doit peut-être une <section> ou une <div>. Dur d'avoir une réponse sans que tous le monde refasse le monde, car le reste je sais très bien que ma structure est bonne.

(Désolé pour l'énervement, mais bon après le message tournikoti et que je ne demande pas la Lune et bien en 3jours on est encore dessus, c'est plus dur que si j'avais un problème de CSS Smiley sweatdrop , c'est fou ...)
Modifié par Vipear (07 Nov 2013 - 02:22)
Pas la peine de s'emporter Vipear Smiley biggrin les réponses partent de bonnes intentions Smiley cligne Preuve en est, c'est qu'on est là et qu'on essaye quand même de t'aider.
Si tu veux à tout prix garder la structure que tu proposes et si ta page ne contient que ton CV alors il faudrait peut être enlever <section id="Curriculum_vitae"> et juste mettre une <div> sans oublier de préciser un <h1> qui serait donc à mon sens "Curriculum vitae".
Par contre pour le <nav> sans liens et géré en JS sans alternative (au cas où JS est désactivé) n'est pas top top. En plus question accessibilité ça ne doit pas être terrible non plus.
Zelalsan a écrit :
Pas la peine de s'emporter Vipear Smiley biggrin les réponses partent de bonnes intentions Smiley cligne Preuve en est, c'est qu'on est là et qu'on essaye quand même de t'aider.
Si tu veux à tout prix garder la structure que tu proposes et si ta page ne contient que ton CV alors il faudrait peut être enlever &lt;section id=&quot;Curriculum_vitae&quot;&gt; et juste mettre une &lt;div&gt; sans oublier de préciser un &lt;h1&gt; qui serait donc à mon sens &quot;Curriculum vitae&quot;.
Par contre pour le &lt;nav&gt; sans liens et géré en JS sans alternative (au cas où JS est désactivé) n'est pas top top. En plus question accessibilité ça ne doit pas être terrible non plus.


C'est bien ce que je pensais donc pour le <section>, sauf que ça ne m'arrangeait pas en faite Smiley smile , mais bon j'ai la solution Smiley smile petite question, possible de faire ceci, car ça me semble dégueulasse :


<section id="home">
    <div>
        <article>bla bla bla</article>
        <article>bla bla bla</article>
    </div>
    <div>
        <article>bla bla bla</article>
        <article>bla bla bla</article>
    </div>
</section>


Je ne vois pas de contre-indications mais bon Smiley smile

Et ce n'est pas faux pour le <nav>, je vais faire des ancres au cas ou le JS ne fonctionne pas (j'avais complètement zapé cette idée) et dans se cas, le <nav> prendra tout son sens Smiley biggrin est ce que ça te parait bien ainsi ?
Modifié par Vipear (07 Nov 2013 - 02:35)
Bonjour vipear.

Avant de commencer à faire ta page web et de savoir si sémantiquement c'est conforme au W3C, commence par dessiner le plan de ton CV. Sans structure bien défini, on ne peut pas t'aider.
"vipear" a écrit :
J'ai l'impression que tu me prends pour un gugusse en te lisant, car tu m'expliques ce qu'on apprend à la base du HTML
Si tu sais mieux que tout le monde, pourquoi dans ce cas, poses-tu la question ? Tu n'as qu'à faire des essais et ensuite valider ta page. !
"vipear" a écrit :
Ah bon ? Excuse moi mais moi je le fais en deux ans déjà et ensuite NON tous les employeurs ne sont pas si cultivés que toi mon grand, il m'est arrivé lors de certains entretiens qu'on me demande ce que ça veut dire.
Désolé de te le dire, mais la miage existe environ depuis environ 40 ans. Tiens un lien pour te montrer que depuis 2002, la miage se fait en trois ans et se termine par un master !

Pour reprendre ton exemple, je t'ai dit que l'on ne met pas dans une section une autre section, mais un article ! De plus, il y a suffisamment de balise en HTML5 pour ne plus utiliser la balise div qui n'est porteuse d'aucune information sémantique.
Ensuite, tu n'expliques pas ce à quoi va servir ton menu ? Si j'ai bien compris, c'est pour masquer ou dévoiler des parties de ton CV.
Dans ce cas, on ne procède pas ainsi. On fait un menu en accordéon !
<ul id="cv">
	<li><input type="radio" name="cv" id="L1" /><label for="L1">titre 1</label>
		<article>
			<p>texte parlant du Bac</p>
			<p>texte parlant du Bac</p>
			<p>texte parlant du Bac</p>
		</article>
	</li>
	<li><input type="radio" name="cv" id="L1" /><label for="L1">titre 2</label>
		<article>
			<p>texte parlant du Bts</p>
			<p>texte parlant du Bts</p>
			<p>texte parlant du Bts</p>
		</article>
	</li>
	<li><input type="radio" name="cv" id="L2" /><label for="L2">titre 3</label>
		<article>
			<p>langage informatique</p>
			<p>langage informatique</p>
			<p>langage informatique</p>
		</article>
	</li>
		<li><input type="radio" name="cv" id="L3" /><label for="L3">titre 4</label>
		<article>
			<p>compétence théorique</p>
			<p>compétence théorique</p>
			<p>compétence théorique</p>
		</article>
	</li>
</ul>
J'ai mis "radio" afin d'avoir une seule subdivision qui s'ouvre. Si tu veux que plusieurs subdivisions s'ouvrent, mais alors "checkbox".

@+
Modifié par tournikoti (07 Nov 2013 - 07:14)
a écrit :
De plus, il y a suffisamment de balise en HTML5 pour ne plus utiliser la balise div qui n'est porteuse d'aucune information sémantique.

Oui, mais attention: trop de sémantique tue la sémantique. A vouloir en faire trop, on empire l'accessibilité au lieu de l'améliorer.

Donc il faut mettre juste ce qu'il faut. Suffisament, mais pas trop non plus.

De fait, ça peut paraître étrange, mais je vote pour la div.


a écrit :
Dans ce cas, on ne procède pas ainsi. On fait un menu en accordéon !

Mon dieu... je vais me suicider avec le câble wifi et je reviens.

On n'utilise surtout pas des boutons radio ou des checkbox pour faire ce genre de truc. Les formulaires ne sont pas faits pour ça.

Par contre, les ancres, ça fonctionne assez bien; et ça permet de faire des vrais titres pour chaque section, donc c'est mieux. Inutile de dire qu'un <hn> dans un <label>, c'est peut-être techniquement valide W3C, mais ça n'a pas de sens. J'éviterais, pour ne pas dérouter les utilisateurs.

Je vais moi aussi commencer à croire qu'effectivement, tu portes bien ton pseudo.
Modifié par QuentinC (07 Nov 2013 - 10:04)
Pages :