DÉVELOPPEUR WEB FREELANCE

Blog / Actu

25 ans d'expérience

Indépendant depuis 2008

Html, en voilà des manières.Dans Documentation

Toile, web, html

Après pas mal d'années à rouler ma bosse en tant que freelance sautant de code en code, de sites en sites et d'une plateforme web à une autre, j'ai croisé quelques lignes inspirées qui valaient bien une petite mention, un billet spécial.

Une fois n'est pas coutume, faisons un brin de HTML, comme on ferait un brin de toilette. Voici une petite sélection des plus étranges écriture en HTML. Mais au fait,  "Cé esse esse, c'est quoi ?"

Un faux bouton qui ne fait rien, déguisé en lien.

C'est l'internaute qui va user le clic pour rien.

<button role="link" title="Nom du site distant" tabindex="0">
<img alt="Name of website" src="logo.jpg" title="Nom du site distant">
</button>

Qu'en comprendre ?

Il y a une mauvaise utilisation de l'élément button. Il sera inutile de rappeler qu'il existe un élément permettant de créer des liens vers des sites externes <a>. Il vaut mieux ne pas changer la sémantique native, sauf s’il est impossible de faire autrement.
Il est possible de créer des liens vers des pages sans JavaScript.
L'attribut title est redondant.
L'attribut tabindex est redondant et un bouton n'en a pas besoin, il est activable par défaut.

Comment faire quelque chose de propre ?

 CSS :

#alink {
height: 40px;
width: 80px;
background-image:url('img/alink_1.png') no-repeat;
display:block;
...
}

HTML :

<a href="http://domaine.com" title="mon petit titre"></a> 

Une boîte div qui joue le rôle d'un bouton, sans en être un.

On se demande pourquoi faire ?

<div tabindex="-1">
<div role="button">
<svg width="28" height="24"> … </svg>
</div>
</div>

Qu'en comprendre ?

Définir explicitement une sémantique pour les boutons n'est pas nécessaire, il y a un élément pour cela : button
Nous n'avons pas besoin de l'attribut tabindex puisque nous utiliserons un bouton. Les boutons HTML sont activables par défaut.
Pour le SEO, il manque une alternative textuelle pour l'icône.

Comment faire quelque chose de propre ?

CSS :

#button_run {
height: 40px;
width: 80px;
background-image:url('img/bk_bt1.png') no-repeat;
}

HTML :

<button id="#button_run"></button> 

JAVASCRIPT :

document.getElementById('button_run').onclick = function(event) {
...
}

Le cas très classique d'une image qui joue elle aussi au bouton.

Comment fait du bon quand on peut faire du mauvais ?

<img src="/images/edit.gif" onclick="openBoxDialog(id,'...')">
<img src="/images/delete.gif" onclick="closeDialog(id)">

Qu'en comprendre ?

L'élément HTML <img> a, normalement, pour but d'afficher des images et non d'exécuter du JavaScript.
Un événement de clic sur une balise img se déclenche uniquement au clic via le déclencheur onclick.
Attention, pour le SEO, Il n'y a pas d'alternative textuelle pour l'image. 

Comment faire quelque chose de propre ?

CSS :

#button1, #button2 {
height: 40px;
width: 40px;
}
#button1 { background-image:url('img/bk_bt1.png') no-repeat; }
#button2 { background-image:url('img/bk_bt2.png') no-repeat; }

HTML :

<button id="#button1"></button> 
<button id="#button2"></button>

JAVASCRIPT :

document.getElementById('button1').onclick = function(event) {
...
}

document.getElementById('button2').onclick = function(event) {
...
}

Un bouton lié, wahoo !

On est en droit de se demander comment est-ce qu'un navigateur va interpréter ça.

<a href="https://monsitewebdefou.fr/inscription.html">
<button>Inscription</button>
</a>

Qu'en comprendre ?

En imbriquant un bouton dans un lien, on envoie deux messages au navigateur web :
C’est un bouton, mais c’est aussi un lien.
Selon le navigateur et sa version, cela risque, de provoquer des différences de comportement et surtout des actions non souhaitées

Comment faire quelque chose de propre ?

CSS :

.ah_button {
    /* Utilisons CSS pour appliquer des styles de type bouton au lien */
    ...
}

HTML :

<a href="https://monsitewebdefou.fr/inscription.html" class="ah_button">Inscrition</a>

Un truc, une tentative d'écriture synthétique

Le gars aura au moins essayé de faire truc...

<a href="#form" role="button" aria-haspopup="true"> &nbsp;&nbsp;Connexion&nbsp;&nbsp; </a>

Qu'en comprendre ?

Ce serait un lien vers une ancre dans la même page, qui se voudrait être un bouton.

En ajoutant le code role = "button" à un lien, on indique qu’il s’agit d’un bouton, même s’il s’agit d’un lien. Mais dans l'utilisateur qui est fait du lien, cela ne sert à rien.
aria-haspopup = "true" suggère l’existence d’une fenêtre contextuelle, mais elle n’existe pas.
Enfin plutôt que d'utiliser des espaces encodés, mieux vaux se servir d'un padding en CSS

Comment faire quelque chose de propre ?

CSS :

.button {
    /* Utilisons CSS pour appliquer des styles de type bouton au lien */
    ...
    padding:3px 5px 7px 5px;
}

HTML :

<a class="button" href="#form">Connexion</a>

 

Autant le dire, un code bien écrit est un code qui sera bien interprété. Mais ce sera aussi un code compatible multi plateforme et bien vu par les moteurs de recherche.





Dans le même esprit :

TOP