Bonnes pratiques (X)HTML et CSS.

Le HTML a été créé à l’origine pour être une structure souple et fortement tolérance. C’est-à-dire que même s’il est mal formé le navigateur se doit d’interpréter et d’afficher la page. Certes ce choix est critiquable, mais l’idée est que le format soit accessible à tout le monde.

Dû à cette souplesse, il s’est vu naitre de la part des développeurs un tas de mauvaises pratiques. Aujourd’hui, la philosophie générale tend vers le respect des normes.

La liste des choses à faire et à ne pas faire :

Contenu doit être dans le HTML et le style dans le CSS.

<!-- Mauvaise pratique : Le HTML contient le contenu et le style. -->
.gras{ font-weight: bold; } 
 
<div class="gras">Je suis un texte important</div>
 
 
<!-- Bonne pratique : Le CSS utilise les identifiants sémantiques 
pour déterminer le style à appliquer -->
.text-important{ font-weight: bold; } 
 
<div class="text-important">Je suis un texte important</div>

La balise table doit uniquement être utilisé pour représenter des données

Le tableau est une représentation matricielle de données. C’est une erreur de l’utiliser pour faire le design d’une page. Pour cela la div accompagnée de CSS est suffisant, beaucoup plus maniable et surtout sémantiquement beaucoup plus correcte.

Certaines balises HTML sont trop souvent oubliée

<abbr> : Une abbréviation.

<address> : Une adresse postale.

<area>,<map> : Un plan géographique.

<label> : Pour définir des titres aux input et ainsi lier l’action au libellé.

Les balises HTML à proscrire

<font>, <basefont>, <cente>, <s>, <strike>, <u> : Bienvenu au 21ème siècle ! Il ne faut plus les utiliser.

Faire la différence entre class et id

Incroyable, mais c’est encore confus pour certains.
ID : balise avec identifiant unique. Il ne peut y avoir qu’un même élément avec un id dans le DOM. (en CSS #monid )
CLASS: plusieurs éléments peuvent avoir la même class (en CSS .maclass )

S’efforcer d’écrire du XHTML bien formé.

Si l’on respecte les règles du W3C, et donc que l’on applique la rigueur du XML dans une page HTML on parle alors de XHTML.

En fait le fichier se retrouve être un fichier XML avec une doctype HTML.
Il est possible de valider votre page web sur le site du W3C.

Les nouveautés que nous apportent HTML5

<article> : Définis un article d’une source externe (d’un blog, de la press).

<aside> : Contenu annexe en rapport plus ou moins éloigné.

<audio> : Contenu audio.

<canvas> : Contenu graphique.

<command> : Pour effectuer une action. Pour remplacer l’usage du tag.
<button> quand l’élément n’est pas un bouton (typiquement dans un menu).

<datalist> : Une liste de donnée à utiliser avec un input qui indique les valeurs qu’il peut avoir.

<details>,<summary> : Pour donner des détails sur un document. Faire un sommaire.

<embed> : Contenu intégrer (comme du flash par exemple).

<figure> : Contenu de type prose.

<footer> : Le pied de page.

<header> : L’entête de page (peut intégrer le menu).

<hrgroup> : Définis un groupe de titres. (une table des matières).

<keygen> : Une clé, un Hash

<mark> : Un text important qui doit être mis en valeur.

<menu> : Definit un menu.

<meter> : Définit une unité de mesure.

<nav> : Défnit un menu de navigation (précédent,suivante) pour une section.

<output> : Contenu généré à la sortie d’un script.

<progress> : Pour générer un élément (un texte, une barre) de progression.

<ruby>,<rt>,<rp> : Spécifique au charatère Chinois.

<section> : Section de la page web.

<source> : La source d’un média

<time> : Pour définir une échelle de temps (une date ou une heure).

<video> : Contenu vidéo.

Les balises suivante remplace l’usage qu’avait <strong> ou <em> pour une explication plus précise :

<em> : Mettre en valeur le texte

<strong> : Mettre en valeur le texte

<dfn> : Une définition

<code> :  Un code informatique.

<samp> : Un exemple de code informatique.

<kbd> : Touche du clavier.

<var> : Une variable.

<cite> : Une citation.

Articles similaires :

Mots-clefs : , , , ,

Laisser une réponse