5568 sujets

Sémantique web et HTML

Bonjour tout le monde, je débute en CSS et HTML et j’ai un petit problème de balise HTML.
Dans la colonne gauche de mon site, j’utilise un modèle de menu vertical que j’ai trouvé dans la rubrique modele menu de ce site ( http://css.alsacreations.com/modelesmenus/vd1.htm). Il fonctionne très bien mais je voudrais rajouter d’autres parties dans cette colonne comme la météo ou la photo du jour. J’utilise les mêmes balises que celles du menu et cela fonctionne mais je voulais savoir si c’était correct. Est-ce qu’il ne faut pas utiliser seulement les balises UL et LI pour faire cela ?
Voici la partie météo que j’ai rajouté et une partie de mon menu :


<dl id="menu">
		<dt <?php include "freemeteo/meteo.php3"?> ><a href="#">Accueil</a></dt>
		<dd>
		<ul>
					<li><?php include "date.php";?></li>
					<li><img src=http://perso0.free.fr/cgi-bin/meteo.pl?dep=$dept></li>
					<li><?php echo ($nomdept);?></li>
		</ul>
		</dd>
		
		<dt onclick="javascript:montre('smenu1');"><a href="#">La Société</a></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Présentation</a></li>
					<li><a href="#">Historique</a></li>
					<li><a href="#">Le Bureau</a></li>
					<li><a href="#">Le Comité</a></li>
					<li><a href="#">Adhésion</a></li>
				</ul>
			</dd>

Modifié par laetitia2382 (14 Jul 2005 - 15:06)
Plop,

Le problème de ta structure étant que les <dt> que tu emploie pour les titres de tes menus, ne sont pas des titres ^^

Il me semble que c'est Laurent Denis qui en a débatu récemment dans un post précédent il y a quelques jours, mettant en avant la plus grande facilité à repéré une balise <hX> qu'une balise <dt> avec un lecteur vocal.

(j'ai résumé pcq j'ai la fleme de chercher son post Smiley langue )

Donc je penses que tu devrais opter pour une structure a base de <hX> et de <ul> <li>.
Le lien ne marchait pas mais le menu que j'ai choisi a le programme suivant:

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>

			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>

				</ul>
			</dd>
	
</dl>

Etant debutante en CSS je ne vois pas encore bien comment je pourrais modifier les dl dt dd avec les ul h2
tyx a écrit :


Il me semble que c'est Laurent Denis qui en a débatu récemment dans un post précédent il y a quelques jours, mettant en avant la plus grande facilité à repéré une balise <hX> qu'une balise <dt> avec un lecteur vocal.



C'est peut etre pas le post dont tu parles mais tu peux voir la reflexion de Laurent Denis sur son blog
Je suis allée voir sur le blog.
Si j'ai bien compris, dl dt et dd sont les seules balises que je peux utiliser pour faire un menu déroulant (avec javascript), c'est leur principal attrait mais l'idéal serait de ne pas avoir de balises dl, dt et dd pour l'accessibilite. Le problème c'est que mon menu est assez conséquent (j'ai 5 menus avec 6 ou 7 sous menus chacun), je ne vois donc pas trop comment autrement.
laetitia2382 a écrit :
Le problème c'est que mon menu est assez conséquent (j'ai 5 menus avec 6 ou 7 sous menus chacun), je ne vois donc pas trop comment autrement.


Es-tu sûre de ne pas confondre "menu" et "plan de site" ? Tous ces sous-menus vont-ils amener l'information pertinente pour la navigation, ou au contraire la disperser ?

Et si ce n'est pas le cas, un menu plat, non déroulant, c'est peut-être moins "clinquant" pour les naïfs, mais bien plus pertinent : un interface qui a besoin de "planquer" des bouts est très souvent un interface déjà inutilement encombré, au contenu trop touffu : prend-on forcément le temps d'explorer un menu déroulant de 6 ou 7 sections pour se faire une idée de l'intérêt d'un site parmi d'autres ? Ou passe-t-on au suivant sur la liste si le contenu essentiel n'est pas immédiatement évident ?

enfin, comble de malheur, il est tout à fait possible de faire un de ces satanés menus dynamiques sans <dl>, avec de simples <hn>, <ul> et <div>. ça se fait même couramment.
Modifié par Laurent Denis (14 Jul 2005 - 23:51)