[Résolu] Utilisation attribut href obligatoire dans une balise a ?

Après bientôt deux ans de lecture régulière du site, je me lance. J'ai lu quelque part qu'il vaut mieux avoir l'air bête pendant quelques minutes que de le rester dans son coin à jamais !

Dans un menu horizontal déroulant obtenu par une liste non ordonnée HTML mise en forme par CSS (merci à "Alsacréations" et à "pompage") la premiére ligne de chaque colonne est en quelque sorte le titre de la partie qui se déroule lorsqu'on le survole.

Il est créé avec une balise <a> imbriquée dans une balise <li> par exemple :

<div id="nav">  <!--  début du menu de navigation -->
	<ul id="menu1">  <!-- Début du menu niveau 1-->
		<li class="marron"><a href="">Région</a> <!-- titre de la première colonne -->
			<ul class="menu2">
				<li><a href="pages/ville1.htm">Ville 1</a></li>
				<li><a href="pages/ville2.htm">Ville 2</a></li>
			</ul>
		</li>
	</ul> <!-- Fin du menu niveau 1 -->	
	 
</div> <!-- fin du bloc menu de navigation -->

Je suis trop inexpérimenté en Webdesign pour prétendre être un puriste, mais j'essaye d'apprendre
à travailler proprement.

Mes questions sont les suivantes : est-il obligatoire d'avoir une balise <a> dans ma ligne région, puisque ce n'est pas un lien mais une entrée de menu déroulant ?

Si c'est obligatoire, est-il obligatoire de mettre l'attribut href ?

Si l'attribut href est obligatoire, quel valeur est préférable : href="" ou href="#" ?

Merci pour votre avis.

Yann
Modifié par yanngaudino (01 Mar 2014 - 22:13)

salut,
non ce n'est pas obligatoire d'avoir une balise <a> et c'est même préférable de ne pas avoir de balise <a> vu que ce n'est pas un lien. Tu peux remplacer par un <span>.
Si en revanche on utilise une balise <a> alors non seulement l'attribut "href" est obligatoire mais en plus il ne doit pas être vide.

Et pour

:hover

, pas de problème vu qu'il s'applique à toutes les balises.

Juste pour info , et eventuellement des critiques constructives.
Tu peut annihiler momentanément le click sur ton lien de premier niveau via CSS et l'attribut tabindex.
L'idée est d'utiliser pointer-events:none; sur ce lien et de donner un attribut tabindex au li parent direct afin de capturer le click et de s'en servir pour dérouler le menu.
Une fois que le focus est pris par li , il est possible de redonner un pointer-events:auto; au lien pour qu'il soit cliquable a nouveau .
http://codepen.io/gc-nomade/pen/tqpFk
Bon c'est quand même plus simple en utilisant un simple span, pas de liens et seulement :hover

Merci à tous pour les réponses, à mon niveau de pratique, je vais rester simple et mettre un span.

Notez quand même que le lien peut être très utile. C'est important que les menus déroulants puissent être ouverts au clic, et que l'élément qui déclenche l'ouverture soit focusable. IL en va de l'accessibilité, et puis je ne crois pas que les téléphones tactiles supportent bien hover.

En ce qui concerne la seconde remarque, le lien est pratique à utiliser car il a l'avantage d'être implicitement focusable. Dans le cas contraire, avec un span par exemple, il faut utiliser tabindex=0 et il peut y avoir des effets secondaires indésirables avec certains navigateurs dans certains contextes.

Dans ce cas, utiliser href="#" + onclick javascript, car un href vide n'est pas valide.