Article invité rédigé par Thomas !

C’est avec un immense plaisir que je me retrouve ici aujourd’hui, pour vous parler du langage HTML et de ce qu’on a besoin de savoir à nos débuts.

Tout d’abord, je tiens à remercier Alexandra MARTIN alias Miss-SEO-Girl, pour m’avoir gentiment invité à partager mes connaissances techniques sur ce blog, et surtout avec vous !

Pour ceux qui ne me connaissent pas (tout le monde je pense :P), je m’appelle Thomas CUBEL, j’ai 22 ans et je suis actuellement en phase de devenir référenceur. Ceci dit, j’ai tout de même un passé de développeur puisque j’ai effectué une formation de Webmaster pendant 3 ans.

Maintenant que les présentations sont faites, je vais pouvoir vous parler de cet article orienté plutôt vers la technique.

Pour commencer, nous allons faire le tour des quelques subtilités à connaître sur la création d’un document HTML, puis nous verrons comment organiser et nettoyer notre code. Cela vous permettra d’éviter les erreurs, de vous relire facilement et de rendre votre code pratique et évolutif.

Cet article s’adresse avant tout aux débutants en HTML mais pourra satisfaire un grand nombre de personnes ayant soif de nouvelles informations sur le sujet.

Créer sa première page

Tout d’abord, dans cette première partie, nous allons aborder la création d’un premier document HTML. On va voir quels sont les outils à utiliser, pourquoi il vaut mieux développer en HTML5 plutôt que dans une autre version, et comment on peut se préparer pour produire un code de qualité.

Les outils

Pour créer un document HTML, il ne vous faut techniquement qu’un simple bloc note. Cependant, vous ne pourrez pas disposer de la coloration syntaxique qui colore vos balises, attributs et plus encore. De plus, ce n’est pas réellement pratique de développer sur le bloc note puisqu’il n’a pas énormément de fonctionnalité par rapport à d’autres outils orientés développement.

A la place du bloc note, je vous conseille donc dans un premier temps de choisir Notepad++. C’est un outil de développement très léger que l’on peut configurer comme bon nous semble et qui plus est, est gratuit ! Plus tard, quand vous aurez du PHP ou d’autres langages à votre actif, vous pourrez passer sur des logiciels appelés EDI (Environnement de Développement Intégré) comme Netbeans, Eclipse ou encore Komodo. Heureusement, pour du HTML, nous n’avons pas besoin aujourd’hui de ces « usines à gaz » qui demandent beaucoup de ressources à votre ordinateur.

Une fois Notepad++ téléchargé, installé et démarré, l’utilitaire est en mode texte. Cela veut dire que tout ce que vous écrirez sera considéré comme du contenu textuel et rien d’autre. Je vous propose donc de passer en mode HTML en cliquant sur Langage-> HTML via le menu principal.

A partir de là, tous vos éléments bénéficieront de la coloration syntaxique et Notepad++ considérera par défaut votre contenu en tant que code HTML. A noter que vous avez la plupart des langages disponibles de A à Z et qu’il vous sera pratique d’éditer des fichiers divers et variés.

Ensuite, pour éviter les problèmes d’encodage, je vous suggère de sélectionner l’UTF-8 (sans BOM) via le menu Encodage->Encoder en UTF-8 (sans BOM). Vous éviterez ainsi les problèmes de compatibilité, les problèmes d’accents ou autre. UTF-8 est universel.

Maintenant que notre outil est configuré, nous allons nous attaquer au logiciel qui interprète notre code HTML : Le Navigateur. Je vous suggère d’installer plusieurs navigateurs sur votre ordinateur afin de pouvoir tester votre code sur différentes solutions. En ce qui me concerne, j’ai choisi Mozilla Firefox comme navigateur principal, Internet Explorer et Google Chrome comme navigateurs de test. Vous pouvez par ailleurs installer une extension de type Firebug qui vous aidera à déceler vos erreurs de code.

Après cela, vous aurez normalement tous les outils indispensables pour développer en HTML. Sauf peut-être son apprentissage. D’ailleurs, je vous propose dès maintenant une petite présentation de HTML5 afin que vous puissiez penser à l’utiliser dès maintenant.

Le HTML5 ? Une future référence…

Depuis la naissance du langage HTML dans les années 90, de nombreuses évolutions ont vu le jour au fur et à mesure des versions. Nouvelles balises, nouvelles façons de développer et aujourd’hui nouvelles manières de restituer les structures de nos sites grâce à l’HTML5.

En effet, depuis l’annonce de la révision HTML5 en 2007, le web ne jure que par ce langage encore en phase de développement aujourd’hui.

Pourquoi le HTML5 est-il si populaire ? Pourquoi sommes-nous encouragés sans cesse à utiliser ce langage ? Quels sont les mystères qui se cachent derrière celui-ci ?

De nombreuses questions subsistent parmi nous, mais il est certain qu’à l’avenir, c’est cette version qui marquera la modernisation, le web sémantique, et d’autres traits importants du monde du web.

Pour aller plus en détail et pour vous encourager à utiliser cette version HTML5 dès maintenant, je ne peux que vous montrer quelques exemples concrets dévoilant la simplicité et la logique de cette version prévue en 2014.

Par exemple, le DOCTYPE (c’est la déclaration qui indique le type de votre document). Que ce soit en HTML4, en XHTML ou dans une autre version exceptée le HTML5, il fallait s’embêter à recopier au début de chaque fichier HTML, un code ressemblant à cela :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”

“http://www.w3.org/TR/html4/frameset.dtd”>

A titre de comparaison, le DOCTYPE HTML5 est définitivement plus simple, plus petit et moins embêtant à retenir :

<!DOCTYPE html>

Facile non ? Attendez de voir mon histoire sur les balises DIV.

Une DIV vous permet d’encadrer un certain nombre de balises HTML. C’est un conteneur qui peut contenir un article, un en-tête, un logo ou un autre ensemble.

Le souci des DIV dans les précédentes versions de HTML. C’est qu’il y en avait partout. La seule chose qui différenciait une DIV d’une autre, c’était le nom de sa classe ou de son identifiant. Techniquement, on se retrouvait avec des DIV HEADER, des DIV CONTENU, des DIV LOGO, des DIV FOOTER, des DIV SIDEBAR ou plus encore. Vous m’aurez compris, c’est redondant et si chaque développeur met ses propres noms de classe ou d’ID, toute la signification du code est à réapprendre.

En HTML5, c’est un petit peu différent. Les balises DIV sont aussi utilisées, mais de nouvelles balises permettent de dégrossir votre structure et de mieux vous y retrouver.

Vous avez des balises <header> qui indiquent les en-têtes, des balises <aside> qui indiquent les sidebar, des balises <nav> qui indiquent vos menus et navigation, et même des balises <article> qui, je pense que vous l’aurez compris, indiquent vos articles.

Bref, sémantiquement, vous indiquez aux navigateurs, aux développeurs ou aux moteurs de recherche que cet élément (l’en-tête, l’article, etc.), est le vrai contenu défini entre la balise HTML5 ouvrante et fermante que vous avez renseignée. Ceci sera toujours vrai même si on renseigne une classe ou un id particulier.

Bien sûr, hormis ces nouvelles balises, le HTML5 propose la possibilité de glisser-déposer des éléments, de générer des éléments graphiques, d’obtenir une meilleure gestion des médias et même de gérer la géolocalisation. Et encore, ce n’est pas la liste complète.

En gros, si vous êtes débutant, je pense que le HTML5 est fait pour vous. Même si vous êtes déjà un développeur averti, je vous encourage vraiment à migrer sur cette version. En plus, vous avez des tas de tutoriels sur le net et une communauté fortement active.

Imaginer sa structure, c’est mieux la développer

Dans le monde du web, il existe des tas de structures de site. Par structure j’entends le nombre d’éléments, leur position, leur accessibilité au sein d’une page. Certaines de ces structures ont une sidebar à droite, d’autres à gauche et d’autres en ont par exemple une de chaque côté. Pareil pour chaque zone d’une page (header, footer, contenu, etc).

La chose importante quand on développe, c’est de se projeter l’image de notre future page à l’aide de notre imagination. Quand on imagine notre page, on peut mieux imaginer notre code (et donc sa structure).

Avec le temps, vous apprendrez bien évidemment des techniques plus propres et plus standardisées, mais la base, je peux déjà tenter de vous l’expliquer aujourd’hui, dans cet article.

Je vous propose donc un petit exercice pour travailler sur votre propre structure et imagination.

Prenez une feuille de papier et dessinez des cadres. Ces cadres doivent représenter le header, le menu, le contenu, la sidebar et le footer (adaptez le nombre et la disposition en fonction de la page souhaitée).

Ensuite, à l’intérieur de ces cadres, mettez vos éléments toujours sous forme de bloc. Dessinez votre espace logo, vos modules, vos éléments de menu, votre zone de titre… Jusqu’à avoir votre page complète, comme dans votre imagination. Evitez cependant de mettre des fioritures telles que du texte ou des dessins complexes. Restez simple en utilisant seulement des cadres.

Maintenant, vu que votre dessin est terminé, il ne vous reste plus qu’à le traduire en langage HTML par l’intermédiaire des balises que vous aurez apprises. Le HTML se développera dans le sens de la lecture de gauche à droite et de haut en bas. Codez le cadre header, ensuite l’intérieur de ce header, le menu, les éléments de menu et ainsi de suite jusqu’au dernier élément de votre dessin.

Vaincre ses peurs pour avancer davantage

Un truc qui arrive souvent quand on commence et qui m’est arrivé aussi, c’est que l’on n’ose pas développer par peur de casser ou de tout recommencer. Il me parait important de vous rassurer et de vous faire confiance.

Faire des erreurs en HTML ne cassera jamais votre ordinateur ou votre navigateur. Codez et testez aussi longtemps que vous le voulez. Développez votre structure HTML et regardez dans quel ordre le navigateur interprète votre document web. Si ça ne correspond pas à la page souhaitée, faites des modifications, déplacez les ensembles, les balises, etc.

De toute façon, que ce soit en HTML, en CSS ou dans un autre langage, il y a en général toujours plusieurs méthodes pour arriver à ses fins. Si vous obtenez le résultat voulu, c’est que c’est le bon !

Puis je vais vous dire, à force de développer, vous apprendrez les méthodes et les bonnes pratiques des grands gourous du HTML. Soyez patient 😉

Organiser son code HTML

Dans cette seconde partie, nous allons aborder l’organisation de votre code HTML. Nous verrons comment faire une base vierge, quels éléments indiquer dans la partie Head et Body puis nous finirons sur cette notion de sémantique très appréciée en HTML5.

La base du document ? C’est du recopiage…

Normalement, vous êtes actuellement avec votre éditeur HTML et votre structure (voir plus haut).

Ce qu’il faut savoir, c’est qu’en général, la création d’un document HTML commence toujours de la même façon. On indique le type du document, les balises Html, Head et Body.

Ensuite, on définit l’encodage du document, son titre et quelques autres informations. Ça parait simple comme ça… Et ça l’est vraiment ! C’est ça le pire ! On a même des bases toutes prêtes comme par exemple HTML5 Boilerplate ou Initializr c’est vous dire comment on peut être des feignasses !

Quand le Head fait sa déclaration

Une fois votre base HTML recopiée, on passe généralement à l’en-tête d’information du document alias la partie Head. Cette partie indique aux développeurs, aux navigateurs, aux moteurs… où se trouve votre feuille de style, vos scripts… Mais indiquent aussi la description de la page, quelle est la page canonique, etc. C’est en quelque sorte la carte d’identité de votre page web.

Par ailleurs, c’est une partie qui n’est pas visible à proprement parler. Vous pourrez juste apercevoir le titre, la description et éventuellement quelques autres informations. Tout dépend de l’exploitation que chacun en fait.

Voici pour le coup une partie Head simple et optimisée pour une grande majorité de cas :

Comme vous pouvez le constater, il y a des balises qui ne sont pas forcément connues du grand public…

Normalement, si vous avez quelques bases, vous devriez reconnaître la meta description et le lien relatif vers la feuille de style. Cependant, il existe de nombreuses autres balises dont celles que j’ai précisées dans le code ci-dessus. Sans rentrer dans les détails, l’ordre de toutes ces balises est très important et chacune a ses particularités. Organiser bien votre code dans l’ordre indiqué. L’encodage, les balises prioritaires qui agissent sur le navigateur, les meta et puis les autres déclarations.

Entrons dans le corps du document

Le body, c’est l’une des parties où vous allez passer le plus clair de votre temps. Le corps de la page est l’endroit où vous développerez votre structure. Vous devrez indiquer ces fameux cadres/blocs que vous avez imaginés.

Lisez votre structure de gauche à droite et de haut en bas et essayez de traduire ce que vous voyez. Je vois mon cadre d’en-tête, j’écris donc mes balises <header> et </header>. A l’intérieur de ce header, j’ai mon espace dédié au logo. Je n’ai pas de balise <logo> donc je mets une <div id=”logo”> et la fermeture qui va avec.

A l’intérieur de cet espace, j’ai une image mais aussi un lien. J’écris donc mon ancre avec ses attributs <a href=”lien” title=”titre”></a> et je mets mon image à l’intérieur pour qu’elle soit cliquable <img src=”lien vers l’image” alt=”Texte alternatif”>.

Après, ma navigation est-elle dans l’en-tête ? Si oui, je n’ai plus qu’à mettre les balises <nav> et </nav> entre les balises header (à la suite de la div logo) et si c’est non, je les indique après la fermeture </header>.

Et ainsi de suite ! Le HTML c’est aussi simple que cela. Il faut juste être rigoureux, faire attention à ce qu’on écrit et être méthodique. Pour ma part, agir comme cela ne me pose plus de problème en général. Mettez des commentaires au fur et à mesure et vous vous y retrouverez.

Voici pour vous faire une idée, une structure ressemblant au blog Miss-SEO-Girl.com :

C’est simplifié, je dois l’avouer, mais à force de développer ça vous paraîtra évident. Observez ce code, essayez de votre côté et documentez-vous ! Tout ira bien !

Pensez à la sémantique !

Dernier point avant de passer au nettoyage et à l’optimisation de notre code. En HTML5, vous avez le pouvoir d’indiquer précisément de quel type est chaque élément. Essayez d’utiliser les balises sémantiques le plus souvent possible afin d’aider les acteurs qui utilisent et interprètent votre code. Qui sait, Google aime peut-être ça ^^

Nettoyer et Optimiser son code HTML

Troisième et dernière partie de cet article qui, vous l’aurez constaté, est quand même assez long. Ici on va parler de nettoyage et d’optimisation, ce que j’appelle le Cleaning-code (ça doit s’appeler comme ça réellement ahah). Cela vous permettra de vous relire, de faire un code évolutif et de vous faire des potes développeurs 😉

Un bon développement pour une meilleure lecture

Dans le code que je vous ai indiqué au-dessus, j’ai indenté chaque groupe de balises via la touche Tab. Je vous encourage à faire de même en créant une hiérarchie sur plusieurs niveaux.

Dès que vous allez vers « l’intérieur » d’un cadre/ensemble, indentez avant de marquer votre prochaine balise. Puis, quand vous passez d’un cadre principal à un autre (header vers section par exemple), revenez à la même hauteur que le précédent.

Si vous hiérarchisez sur plusieurs niveaux, vous pourrez mieux réutiliser votre code par copier/couper/coller. En plus, ça facilite les maintenances et les lectures.

Par ailleurs, la petite astuce que je vous conseille est regarder votre code sous Firebug. Celui-ci a le pouvoir de gérer automatiquement ces indentations. Cela peut même vous permettre d’apprendre.

Ensuite, concernant les noms des classes et des identifiants, mettez des noms clairs et compréhensibles. Si vous le pouvez, mettez-les en anglais en séparant chaque mot par des tirets (post-content, top-news, etc.).

Après, vous pouvez le passer au validateur W3C même si je trouve que c’est pas forcément utile.

Enfin, commentez un maximum ce que vous faites. Que ce soit en HTML, en CSS ou même en PHP, les commentaires permettent d’indiquer ce pour quoi vous avez produit ce code. Vos successeurs vous remercieront, croyez-moi !

Un code bâclé n’a pas un bel avenir

Code bâclé = Code réalisé rapidement sans faire attention aux conséquences.

Même si je sais que parfois, nous sommes sous la pression du temps, essayez de faire un code de qualité rapidement. Soyez productif ! N’utilisez pas les vieilles techniques comme les balises FONT par exemple. Les navigateurs ont beau lire et interpréter tout cela, vous allez vous en mordre les doigts plus tard ! Préférez travailler votre vitesse de production plutôt que de bâcler tout à tort et à travers.

Aussi, essayez de produire un code qui pourra évoluer dans le temps. Ne consacrez pas votre temps de développement seulement sur l’instant. Pensez à l’avenir !

De plus, se mettre à jour en permanence sur les nouvelles technologies vous permettra de faire de nouvelles choses encore plus fun que maintenant !

Quand les navigateurs interprètent mal

Pour ce dernier point, je vous propose de parler compatibilité navigateur. En HTML5 notamment, il existe des problèmes de compatibilité avec les anciennes versions d’Internet Explorer ou autre. Des balises ne sont pas reconnues et il est difficile pour le navigateur d’interpréter votre page convenablement.

Cependant, il existe dorénavant des scripts pour contrer ces problèmes. Les voici :

Le premier ensemble est à placer à la place de la balise <html>.

Le second ensemble, quant à lui, se place le plus tôt possible après la déclaration de l’encodage UTF-8 :

Après ça, je ne peux que vous proposer de tester vos pages avec l’utilitaire http://browsershots.org qui vous permet de visionner le rendu de vos documents web sous différents navigateurs.

Il vous suffit pour cela de rentrer l’adresse de votre page puis de cliquer sur Submit. Vous devrez alors attendre quelques instants avant de recharger la page avec F5. Si le résultat attendu est présent, c’est que c’est bon !

Pour terminer ce dernier point, je tenais à parler des Scripts que vous aurez à rencontrer tôt ou tard. Il existe actuellement des tas de librairies et de framework pour vous simplifier la vie. Préférez les mettre après votre Footer plutôt que dans le Head. Cela permettra au navigateur de se concentrer sur votre HTML et votre CSS en premier.

Conclusion

Nous avons fait le tour de beaucoup de choses concernant la création, l’organisation et le nettoyage de code HTML. C’était rempli d’explication, d’histoire et de tutoriel, mais j’espère que ça vous aura fait découvrir au moins quelques informations utiles. J’espère vous retrouver très bientôt pour un nouveau sujet et en attendant, nous attendons vos commentaires ci-dessous !

Vous pouvez me retrouver sur Twitter ou sur Facebook en attendant le blog Thomas CUBEL 🙂

Merci à vous tous et merci encore à Alexandra pour son invitation !

Bon développement à tous 😉

Liens utiles

• En savoir plus sur le HTML5 – Wikipedia
• Tutoriel HTML5/CSS3 en Français – Le Site du Zero
• Tutoriel HTML5/CSS3 en Anglais – W3Schools