Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le W3C valide cette modeste proposition, les enveloppeurs Web font preuve d’imagination. Voici un florilège de composés HTML (HTML Compound) plus ou moins sémantiques pour baliser l’identité d’un site internet. Cerise sur le SEO, j’ai demandé à Didier Sampaolo de nous dire ce qu’il pense — ou ce que Google pense — des différentes solutions présentées. @dsampaolo est éditeur du site Brave New World et consultant e-business spécialisé en référencement naturel.

Ces marquages HTML trouvés sur le Web (pour la plupart) seront brièvement commentés par mes soins, puis par l’expert SEO. J’ai évoqué la CSS pour le premier exemple seulement pour alléger l’article. Grosso modo, dans ce contexte, les CSS sont souvent utilisées pour afficher une image en background d’une balise et «évacuer» le texte avec display: none, text-indent: -99999em ou position: absolute, en ajoutant éventuellement une balise span, comme dans h1 span { position: absolute; top: -9999px; }.

1. Logo texte dans «h1»

<div id="top">
    <h1>
        <a href="/">ici &amp; ailleurs</a>
    </h1>
</div>

background: transparent url(top_bg.png) no-repeat 0px 3px;

#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}

L’avis de l’expert SEO — Le texte est positionné « hors de l’écran » via CSS, et donc caché pour le visiteur. Je ne pense pas qu’un site ait déjà été pénalisé pour cette seule raison (cela semblerait un peu abusif), mais Google demande aux webmasters d’éviter ce genre de techniques, qui pourraient donner l’impression que leur site est « peu fiable » (source Google). Note : j’aurais plutôt utilisé un lien absolu reprenant l’URL complète de la homepage plutôt qu’un "/" qui signifie « vers la racine du site ».

2. Logo texte dans «h1» et Motto dans «p»

Un marquage HTML similaire avec une tagline à la clé :

<div id='logo'>
    <h1><a href="http://t37.net/">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></h1>
    <p>Blog professionnel de Frédéric de Villamil sur les métiers du web</p>
</div>

Ces deux premiers exemples sont probablement la forme la plus courante en raison de leur simplicité et d’une certaine logique. La marque répétée sur l’ensemble des pages du site se voit attribuer une balise d’en-tête de premier niveau. Au temps de HTML 4 ou XHTML 1.0 on s’interrogeait sur le bien-fondé de cette utilisation d’une précieuse balise h1 que l’on réserve normalement aux titres des articles. Le débat est encore houleux entre les partisan de la balise h1 unique pour l’ensemble de la page et ceux qui voudrait en mettre partout. Avec HTML5, les intégrateurs peuvent utiliser au moins une balise h1 par section…

L’avis de l’expert SEO — Etant partisan de la balise h1 unique pour chaque page, je trouve dommage de l’utiliser pour un logo commun à toutes les pages du site. Cela ne permet pas de différencier sémantiquement les pages entre elles. Le p, ici, est neutre, et permet d’améliorer la densité des mots-clefs qu’il contient. Pour preuve, le blog ressort très bien sur Google quand on cherche le nom de son auteur.

Mise à jour (14/11/2010) : comme le fait remarquer Frédéric dans les commentaires, le fragment de code a été prélevé sur la page d’accueil. Sur http://t37.net, le marquage HTML pour la page affichant les articles présente une différence importante : la balise h1 est remplacée par une balise p.

<div id='logo'>
    <p id='title'><a href="http://t37.net">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></p>
    <p>Frédéric de Villamil analyse l'écosystème Web en temps presque réel</p>
</div>

3. Logo image dans «div»

<div id="logo">
    <a title="Le blog de intégrateur HTML & CSS" href="http://css4design.com/">
        <img src="css-4-design.png" alt="css 4 design" />
    </a>
</div>

Voici le marquage que j’utilise sur ce blog : pas de balise d’en-tête, l’image est purement décorative et permet d’identifier le site lors de l’impression de la page. Le premier élément h1 que l’on trouve dans la page est le titre des articles.

L’avis de l’expert SEO — Voilà qui me semble très bien. Les balises utilisées (div) sont sémantiquement neutres et permettent de réserver les éléments h1 pour des données contextuelles ciblées. L’utilisation combinée du title sur le lien et du alt sur l’image permet aux moteurs de savoir précisément de quoi parle la homepage du blog, et n’impacte pas la page en cours, qu’il reste possible d’optimiser finement.

4. Logo image et Motto dans «span» enveloppés dans «address»

<div="header">
    <address id="site_contact" class="vcard">
        <a class="url home bookmark" href="http://identi.ca/">
            <img class="logo photo" src="http://theme.status.net/0.9.5/identica/logo.png" alt="Identi.ca"/>
            <span class="fn org">Identi.ca</span>
        </a>
        <span class="poweredby">propulsé par <a href="http://status.net/">StatusNet</a></span>
    </address>
</div>

Source : http://identi.ca

L’avis de l’expert SEO — Effectivement, ce balisage est un peu surprenant mais ne manque pas de sens. Google a annoncé sa volonté d’utiliser de plus en plus les microformats (dont hCard) qui permettent de structurer l’information. Identi.ca fait un pari à long terme sur la généralisation des traitements de ces formats, qui permettront, à terme, une mise en avant visuelle dans les pages de résultats de recherches sur les moteurs (qu’on appelle SERP’s, pour Search Engines Results Pages).

5. Logo image dans «h1» et logo texte dans «span»

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/logo.png" width="90" height="53" alt="W3C" />
    </a>
    <span class="alt-logo">W3C</span>
</h1>

L’avis de l’expert SEO — Là encore, l’utilisation d’une balise h1 commune à toutes les pages est à déplorer. A mon sens, cette balise peut (et donc doit) qualifier la page en cours, et non l’ensemble du site.

6. Logo image dans «h1» avec baseline évènementielle

<div id="title" class="vevent">
    <h1 class="span-5">
        <img class="summary" src="/img/paris-web.png" alt="Paris-Web" title="" width="178" height="36">
        <img class="print" src="/img/paris-web-print.png" alt="" title="" width="202" height="36" />
    </h1>
    <abbr class="dtstart" title="2010-10-14"><!-- --></abbr>
    <abbr class="dtend" title="2010-10-16"><!-- --></abbr>
    <p class="baseline">
        <img src="/img/du_14_au_16_octobre_2010.png" alt="Du 14 au 16 octobre 2010" title="" width="202" height="36" />
        <span class="hide">
            à <span class="location">Paris</span>.
        </span>
    </p>
    <hr class="hide">
</div>

Actualité oblige, voici le marquage choisi pour le site Paris Web. Un peu complexes au premier abord, les choix s’expliquent par la nature évènementielle du site, d’où l’image réservée à l’impression ou les dates de début et de fin.

L’avis de l’expert SEO — Comme Identi.ca, Paris Web fait le pari des microformats en utilisant hCalendar, qui semble adapté pour de l’évènementiel. La prise en charge des microformats par Google reste à ce jour aléatoire (au mieux), mais reste une piste très intéressante car sémantiquement très poussée, et normalisée.

7. Logo image dans «span»

<div id="tete">
    <span><img src="/style/ici-michel-fortin.png" alt="ici Michel Fortin" /></span>
    <ul>
        <li><strong>Journal</strong></li>
        <li><a href="/logiciels/">Logiciels</a></li>
        <li><a href="/services/">Services</a></li>
        <li><a href="/joindre/">Me joindre</a></li>
        <li class="alt"><a href="/weblog/" hreflang="en">English</a></li>
    </ul>
</div>

Source : http://michelf.com/journal

L’avis de l’expert SEO — L’utilisation de balises neutres (div, span, ul…) est une bonne chose (les h1 étant libres d’être utilisés pour le contenu de la page), mais la mise en avant du menu de navigation est un choix qu’il faut assumer. L’écueil vient plutôt des pages que l’on va placer dans le menu : ces pages seront linkées depuis toutes les pages du site, dès le début du code-source, et seront donc sur-pondérées aux yeux des moteurs. Il faut les choisir avec soin, et se limiter à quelques pages. Le lien vers la page Contact (qui n’a que très peu de valeur ajoutée en référencement) pourrait être caché (en utilisant du Javascript).

8. Logo texte et image dans «dt» et motto dans «dd»

<dl>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>HTML5 & CSS3, vous le savez, c'est ma grande passion !</dd>
</dl>

<dialog>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>Pinailler, c'est mon dada !</dd>
</dialog>

@media aural {
    dialog {
        voice-family: betty, female;
    }
}

La conclusion de l’expert SEO

Lorsqu’on conçoit le code HTML d’un site, il faut garder à l’esprit qu’un moteur de recherche a besoin d’être guidé. Je recommande d’utiliser les balises h1 à h3 de manière à ce qu’en les lisant, on ait une sorte de « plan de la page » (rappelez-vous de vos cours : grand I, petit b, etc.) qui suffira à la résumer. De cette manière, les moteurs sauront d’emblée quel est (ou sont) le(s) thème(s) de la page, et par voie de conséquence, quand la présenter à l’internaute qui effectue une recherche. Pour les balisages communs à toutes les pages du site, je recommande l’utilisation d’éléments sémantiquement « neutres » (comme div et span).

La conclusion de l’intégrateur

La banalité et la récurrence de la présence du logo et du slogan aurait pu laisser supposer une relative homogénéïté des pratiques. Il n’en est rien :  on trouve un nombre important de combinaisons. Certaines sont sémantiques mais ne sont pas optimisées en terme de référencement ; d’autres ne paient pas de mine, mais permettent aux articles de transmettre plus de «jus» aux termes et aux expressions utilisées.

A part celui que j’utilise déjà, les deux derniers composés HTML ont ma préférence. Ils permettent de lier sémantiquement le nom du site avec sa baseline (ainsi que le logo) sans utiliser de balise hiérarchique h1 ou de balise de contenu p.

Par ailleurs — et même si on peut considérer l’absence de feuille de style comme une légende urbaine — j’aime assurer un maximum de lisibilité en dehors de toute mise en forme : le contenu doit être «tout terrain» même s’il ne sort que rarement accompagné sans CSS ou Javascript.

Merci à Didier Sampaolo d’avoir pris le temps de se pencher sur ces composés HTML et d’avoir donné un point de vue extérieur, ce qui donne à cet article un supplément d’âme :-)

Articles sur le même sujet

• Manifeste pour la création des éléments LOGO et MOTTO dans HTML5
• Une solution CSS accessible pour remplacer du texte HTML par une image
• Quelques notes sur la balise h1 avec HTML5
• Aperçu instantané de Google, Webdesign et référencement naturel
• Référencement de sites Web — Chassez le naturel, il revient au SEO !

Dans la série des problèmes existentiels qui ponctuent la journée de l’intégrateur web, la question du marquage HTML des petites portions de texte est souvent de la partie. Pour la baseline par exemple, on peut justifier l’utilisation de la balise blockquote : c’est une « citation » de la marque, elle est souvent mise en italique ou entre guillemets.

Ca donne :

<blockquote id="baseline"><p>Ma baseline est plus belle que la tienne</p></blockquote>

Or, en l’absence de CSS — notamment sur les périphériques mobiles — les micro-contenus enveloppés avec div ne possèdent pas de marges, et visuellement, au mieux, c’est balot, au pire, c’est illisible (cf. le visionnage du flux friendfeed, par ex.) !

Dans ce contexte, vous privilégiez quoi entre :

<p id="copyright">copyright, copyleft ou copycenter ?</p>

<div id="copyright">copyright, copyleft ou copycenter ?</div>

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Quelques notes — Programme de formation HTML & CSS
• Interviews Bruno Bichet, intégration web et css 4 design de 2007 à nos jours

Il y a quelques temps, je m’étais interrogé sur les différentes manières de rétablir le flux après un float. A l’époque, mon vocabulaire en la matière était rustique mais solide : je contentais souvent d’un coup de clear: both appliqué soit à une balise div, hr ou br. Comme j’en ai appris un peu plus sur le clearing suite aux commentaires qui ont suivi, j’assure le service après-vente, ce qui fait de moi une espèce de Darty Monsieur Plus du CSS… 

Pour « clearer » les « float », j’utilise désormais en première intention un overflow: hidden dont j’applique soigneusement la pommade sur le bloc qui contient les éléments flottants de manière à créer un contexte de formatage, le tout agrémenté d’une pincée de Ouidzzz !, de Zzoum ! ou de Héiiiitt… pour IE6 qui a besoin d’un petit câlin pour déclencher son fumeux fameux hasLayout sur lequel vous trouverez tout ce qu’il faut savoir chez blog-and-blues qui a mené de nombreux tests XHTML et CSS sur le sujet.

Voici quelques exemples de code que j’utilise pour rétablir le flux :

Avec overflow: hidden

.container-with-overflow {
    overflow: hidden;
    height: 1%;
}

Avec la pseudo-classe :after

.container-with-generated-content {
    height: 1%;
}
.container-with-generated-content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Pourquoi présenter deux méthodes ? Simplement parce que si on utilise overflow: hidden pour déclencher le contexte de formatage, il ne pert pas pour autant sa fonction première : masquer le contenu qui dépasse d’un bloc. C’est souvent très pratique, par exemple lorsqu’on ne veut pas trop se soucier de la largeur des images, mais parfois très ennuyeux lorsque le bloc en question doit inclure un menu déroulant, car ce dernier risque d’être masqué lui aussi…

En faisant flotter le container lui aussi !

Une troisième méthode consiste à donner une largeur de 100% à l’élément container et à le faire flotter lui aussi :

.container-with-float {
    float: left;
    width: 100%;
}

Pour en savoir plus sur les avantages et inconvénients de ces trois techniques, je vous invite à jeter un oeil chez Robert Nyman et chez Florent Verschelde pour tout savoir sur les marges et contexte de formatage.

Clearfix reloaded ! (màj du 23/02/2011)

Voici une nouvelle méthode pour le clearing permettant de mieux gérer la fusion des marges (cf. Clearfix Reloaded + overflow:hidden Demystified) :

.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix:before,
.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.clearfix2:before,
.clearfix2:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix2:after { clear: both; }
.clearfix2 { zoom: 1; }

Quelques liens

• Très bonne analyse de Florent Verschelde en quatre parties sur les problèmes liés à l’utilisation des flottants. De nombreux exemples avec capture d’écran pour montrer les problèmes rencontrés sur les différents navigateurs :
  1. Exposé du problème
  2. Exemples avec un élément parent de largeur fixe, et exposé des solutions disponibles
  3. Exemples avec un élément parent sans largeur fixe (non doté du layout)
  4. Pour IE Win : divers moyens de doter l’élément parent du layout
• Clearer des floats sans élément superflu
• How to clear CSS floats without extra markup – different techniques explained — Le site sur lequel j’ai copié-collé les exemples pour illustrer cet article. Des explications concises et efficaces.
• Methods for Containing Floats — Contient des tableaux récapitulatifs des différentes méthodes de clearing et leur support par les navigateurs. Un must-read.
• How To Clear Floats Without Structural Markup
• Containing Floats
• IE/Win: relatively positioned parent and floated child – disappearance
• New clearing method needed for IE7?

Pour la route…

J’en profite pour vous annoncer que la première partie de ce billet est également disponible sur le portail developpez.com, dans la rubrique CSS \o/

Developpez.com, c’est LE site de référence pour tout ce qui concerne les techniques de programmation. Je vous conseille tout particulièrement l’excellent outil XHTML développé par giminik (Matthieu Petiot) pour connaitre la hiérarchie des éléments et les imbrications autorisées par les spécifications.

Articles sur le même sujet

• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards
• [résolu] Les folles journées de l'intégrateur HTML et ses petits tracas…
• Quelques notes — Programme de formation HTML & CSS
• Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8

La mise en page des sites web avec les tableaux n’a pas que des inconvénients : ça permet d’obtenir une structure à l’épreuve des balles très rapidement. La mise en page en div (5 légumes par jour, on vous dit…) n’a pas que des défauts : grâce aux CSS, il sera possible de moduler l’agencement des différentes parties de votre design. Bien sûr, tout n’est pas toujours aussi simple : les éléments constitutifs d’un tableau ne sont pas allergiques aux CSS, tandis qu’une structure en div mal conçue au départ ne sera pas vraiment modulable, même avec des CSS.

Il m’est arrivé dernièrement d’être « obligé » d’utiliser des tableaux pour faire une grille de mise en page à l’intérieur d’une structure en div pour les raisons suivantes (la première raison étant suffisante) :

1. l’addition de valeurs exprimées en pourcentage ne permettait pas un alignement correcte avec les div, alors que les mêmes valeurs exprimées sur des cellules de tableaux donnaient le résultat attendu.
2. le code CSS pour arriver à un résultat approximatif avec les div était largement plus verbeux que celui utilisé avec les tableaux. Sans parler du code HTML lui-même !
3. cette structure devait pouvoir se décliner rapidement en différents templates. Autant dire que vu le temps passé à gérer les problèmes de float, d’overflow et de clear avec les div, l’utilisation des tableaux a été une bouffée d’air frais… Il suffit de s’en sortir avec les colspan et rowspan and the cat’s in the bag!

Je tiens à préciser que je n’ai pas utilisé de tableaux pour autre chose qu’organiser des données tabulaires depuis 2001 et que je n’hésiterais pas à dénoncer mes amis si je les prenait la main dans le sac ;)

Si je vous raconte tout ça, c’est que bien que l’utilisation d’un marquage sémantique adapté est à privilégier, il arrive parfois que certaines contraintes (de délai, d’organisation ou de compétences dans la chaine de production, etc.) font pencher la balance du côté obscur et je trouve normal de confesser les entorses aux bonnes pratiques que l’on peut faire dans le cadre professionnel.

Tiens, en guise d’auto-flagellation je me connecterai une fois par jour sur #openweb, ça m’apprendra ;)

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Frameworks CSS + Reset CSS : design from scratch
• 5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs
• Pour rétablir le flux après un float, vous êtes plutôt HR, BR ou DIV ?
• Exercice de style CSS et HTML : table vs div

Dans le prolongement du billet précédent concernant une mise en pages CSS avec la propriété float, je me suis intéressé aux différentes manières de styler la balise hr pour rétablir le flux après en avoir sorti des éléments en les faisant flotter à gauche ou à droite. J’utilise généralement hr avec le traditionnel clear: both et visibility: hidden et je jongle ensuite avec les marges ou la hauteur pour espacer les éléments. Or, depuis que j’utilise le reset.css d’Eric Meyer, j’ai tendance à supprimer les marges de tout ce qui bouge, mais cette chère règle horizontale reste récalcitrante à la remise à zéro cross browser…

Un HR cross-browser cachère

Il existe heureusement des solutions pour palier les insuffisances du dernier de la classe. L’une d’entre elles repose sur l’application d’un margin-top et margin-bottom négatif :

hr { height: 1px; margin: -0.5em 0; padding: 0; color: #F00; background-color: #F00; border: 0; }

J’ajoute à celà les propriétés clear: both et visibility: hidden, je mets la hauteur à zéro et je supprime les couleurs pour obtenir un spacer de bon aloi. Les valeurs de margin ne convenant pas dans mon cas, j’ai tâtonné pour trouver une valeur satisfaisante :

hr {
     height: 0;
     margin: -1.2ex 0;
     padding: 0;
     border: 0;
     clear: both;
     visibility: hidden;
 }

hr {
     display:  block;
     height: 1px;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     color: #F00;
     background-color: #F00;
     border: 0;
 }

hr {
     display: block;
     height: 0;
     margin: 0;
     _margin: -7px 0;
     padding: 0;
     border: 0;
     visibility: hidden;
 }

La différence avec la méthode précédente est qu’une fois transformé en block (l’auteur de l’astuce ayant habilement déterminé que le hr se comportait par certains côtés comme un élément en ligne) le margin: 0 suffit à supprimer les marges pour les navigateurs modernes. le _margin: -7px 0 s’adressant plus spécifiquement à IE6. Reste à savoir comment se comporte IE7 dans les mêmes circonstances.

Deux, c’est trop

Ces deux techniques fonctionnent assez bien pour donner le même rendu aux traits horizontaux ou pour rétablir le flux. Malheureusement pour moi, j’ai deux blocs imbriqués contenant des float: left et float: right, ce qui implique deux hr l’un en dessous de l’autre :

             </div><!-- end .pix -->
             <hr class="spacer" />
         </div><!-- end .contents -->
         <hr class="spacer" />
     </div><!-- end #container --> </body>

Je tiens à préciser que j’utilise généralement clear: both sur le blocs eux-mêmes au lieu de créer un spacer superflu. Mais curieusement, les blocs en question se retrouvaient sous les colonnes latérales… la technique utilisée pour créer les colonnes latérales reposant également sur la propriété float, j’ai le sentiment qu’au bout d’un moment on se retrouve dans la situation où il devient interdit d’interdire à un bloc d’avoir des voisins à droite ou à gauche : les spacers indépendants deviennent indispensables.

C’était mieux avant ?

Avant d’utiliser les hr pour rétablir le flux, j’utilisais une <div class= »spacer »></div> qui fonctionnait furieusement bien malgré l’absence de sémantique associée :x

Styler la balise BR

J’ai essayé d’utiliser la balise br en lui associant un clear: both. Tout a l’air de fonctionner, mais si le flux est bien rétabli sous Firefox, IE6 ne passe pas le test de la bordure : elle n’encadre pas l’ensemble de la div comme si un clear: both n’avait pas d’effet sur un br…

C’est dommage parce que lorsqu’il s’agit simplement de rétablir le flux et non de créer une séparation entre deux contenus, cette balise br aurait presque été sémantique : un retour à la ligne… Que demander de mieux (oué, que ça fonctionne sous IE6, je sais…) ?

Je garde cette solution sous le coude pour tests complémentaires. En attendant, j’ai trouvé sur dimension-internet un gabarit utilisant la balise br pour rétablir le flux :

br.clearfloat {
     clear: both;
     height: 0;
     font-size: 1px;
     line-height: 0px;
 }

La rustine

En désespoir de cause, je me suis résolu à utiliser <div class= »spacer »></div> lorsqu’il s’agit seulement de rétablir le flux, et <div class= »spacer »><hr /></div> lorsque j’ai besoin de séparer aussi des contenus :

.spacer {
     clear: both;
 }
.spacer hr {
     display: none;
 }

Quelques mots sur la remise à zéro des éléments HTML

Au cours de mes recherche sur hr, je suis tombé sur une intervention de Florent V. qui fait part de ses réserves quant à l’utilisation d’une remise à zéro des éléments. L’utilisation d’un reset présente selon lui deux écueils. D’une part, il serait facile d’oublier de styler une balise et d’autre part, il ne serait pas souhaitable de vouloir tout maîtriser : un peu de lâcher prise serait bienvenue.

Si je partage cette dernière opinion, je ne suis pas totalement d’accord avec la première : les balises HTML ne sont pas en nombre infini, et au pire, en cas d’oubli, il est facile de palier le problème. Pour ma part, en complément de reset.css, j’utilise un fichier html.css pour donner un nouveau style « par défaut » aux éléments HTML.

Ce fichier est similaire à la partie /* basics / de l’exemple fourni par david larlet de biologeek. Notons que la partie / reset */ de ce fichier ne reprend qu’une partie du reset.css d’Eric Meyer.

Faire reset, c’est rigolo tout le temps ?

Il y a évidemment des cas où l’utilisation d’un reset est à prendre avec des pincettes : lorsque vous intervenez sur une partie d’une page déjà construite, ou dans une moindre mesure, lorsque d’autres personnes sont susceptibles d’intervenir. Je ne conseillerais pas non plus l’utilisation de la remise à zéro dans le cadre d’une formation : si vous commencez l’étude des CSS, il vaut peut-être mieux connaître les bases avant de faire table rase ;)

En guise de conclusion

En tout état de cause, si la théorie nous dicte la bonne conduite à tenir, force est de constater que la pratique nous joue parfois des tours de cochons ^_^

Mise à jour du 28/02/08 : la deuxième partie intitulée Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire vient de sortir.

Articles sur le même sujet

• Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire
• Exercice de style CSS et HTML : table vs div
• Quelques notes — Programme de formation HTML & CSS
• Design CSS liquide (ou fluide) encadré d'images répétées… sans table
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards