Zen-Coding, ou comment ecrire du code HTML plus rapidement

Dans les outils que j’utilise tous les jours dans mon métier de web développeur, Zen-Coding tient une place assez importante. Il permet d’écrire plus rapidement du code HTML à l’aide d’abréviations très bien pensées et très poussées.

Concrètement, en écrivant cette ligne :

body>(div#header>img.logo+ul>li*5)+div#page>(h1{hello world}+dl>(dt+dd)*5)

On obtient ce code HTML, déjà indenté :

<body>
    <div id="header">
	<img src="" alt="" class="logo" />
	<ul>
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	</ul>
    </div>
    <div id="page">
	<h1>hello world</h1>
	<dl>
	    <dt></dt>
	    <dd></dd>
	    <dt></dt>
	    <dd></dd>
	    <dt></dt>
	    <dd></dd>
	    <dt></dt>
	    <dd></dd>
	    <dt></dt>
	    <dd></dd>
	</dl>
    </div>
</body>

Plutôt cool, nan ? Quelques explications :

  • div#header donne : <div id="header">
  • li*5 permet d’afficher 5 balise <li>
  • h1{hello world} permet de remplir le contenu de la balise <h1> avec hello world
  • &gt permet de donner la notion de hiérarchie des éléments du DOM
  • et plein d’autres exemples sur le site de Zen-Coding.

Zen-Coding est disponible pour un bon nombre d’éditeurs comme Komodo Edit, Dreamweaver, Gedit, Notepad++… Il suffit de bien le configurer avec les de bons petits raccourcis clavier pour "extand" le code et le tour est joué !

Ce contenu a été publié dans développement web, HTML / CSS, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *