Alain Éric Gauthier

Comment créer un site web avec HTML5BP

HTML5BP (HTML5 boiler plate) est le modèle de base que j'utilise le plus souvent pour démarrer un site. Mais je ne crois pas m'en servir de la manière prévue par ses cocepteurs. Dans cet article, je fais un survol de ma méthode et j'explique ensuite les différentes parties de la page web.

Ma méthode

Retour

Un site web statique en quelques minutes

Pour se procurer le modèle, il faut aller ici: https://html5boilerplate.com/ Une fois le fichier téléchargé, je retire le dossier doc et les fichiers suivants :

  • .editorconfig
  • .gitattributes
  • .gitignore
  • LICENSE.txt

Ensuite, je modifie le fichier index.html pour qu'il contiennent la navigation du site et les autres éléments qui apparaîtront sur toutes les pages du site.

Évidemment, il faut aussi modifier le CSS.

Quand tout est en place, je fais une copie de index.html que je renomme template.html. Chaque nouvelle page sera une copie renommée de template.html.

Ensuite, il faut refaire la page 404. Celle-ci est particulière car le code HTML qu'elle contient est plus léger et le CSS est dans la page et non pas dans le fichier main.css.

Cette méthode fonctionne très bien pour les sites avec peu de page (moins de 30). Si le besoin est d'avoir un site avec plus de pages, il est vraiment plus utile d'utiliser un CMS.

Les éléments de HTML5BP

Retour

DOCTYPE

<!doctype html>

C’est le premier élément qui doit apparaitre au haut du document HTML. S’il n’est pas présent, le navigateur choisira un mode d’affichage différent de la norme HTML la plus récente. Le résultat est que vos pages ne s’afficheront pas comme elle le devrait.

Il existe d’autres déclarations !doctype selon les différentes normes HTML. Avant la norme HTML actuelle, plusieurs version d’HTML ont été utilisées. Chaque déclaration !doctype faire référence à chacune de ces versions.

Retour

HTML

<html class="no-js" lang="fr">

C’est la première balise à mettre dans une page. Elle encadre tout le contenu de la page.

class="no-js"

Sert à prévenir le FOUC. Par défaut, on présume que JavaScript n’est pas activé par le navigateur. Une fois que la page est chargé, le script de modernizr viendra changer cette classe pour "js". Cela permet de faire du CSS spécifique aux navigateurs avec ou sans JavaScript mais sans provoquer le FOUC.

lang="fr"

Définir la langue principale du contenu de votre page est important. Cette information est utilisée pour l’indexation de vos pages par les moteurs de recherches mais elle est aussi utilisée par le navigateur.

Tous les codes de langues sur trouve sur la page language-subtag-registry.

Retour

HEAD

<head>

</head>

C’est la deuxième balise à mettre dans une page. Tout ce qu’elle contient ne sera pas affiché sur la page, mais beaucoup d’instructions seront utilisée par le navigateur et une partie de l’information fournie sera utilisée par les moteurs de recherche lorsqu’ils indexent votre page.

Retour

META charset

<meta charset="utf-8">

Cette balise doit se trouver à l’intérieur des premiers 1024 bytes pour être interprétée correctement. De plus, une faille dans IE nécessite que cette déclaration apparaisse le plus rapidement possible dans votre document HTML. Finalement, UTF-8 est l’encodage par défaut pour tout ce qui est relativement moderne sur le web. Cet encodage permet d’afficher les caractères dans toutes les langues correctement.

Retour

TITLE

<title> … </title>

Cette balise fait exactement ce qu’elle suggère : elle donne un titre à votre document. Le texte balisé sera affiché dans l’onglet du navigateur et sera utilisé par défaut si un usager sauvegarde la page à partir de son navigateur. De plus, le texte sera indexé par les moteurs de recherche; c’est très important pour le SEO.

Retour

META descrition

<meta name="description" content="…">

Cette balise sert à inclure une description du contenu de la page. Dans certaines situations, elle sera utilisée comme résumé dans les résultats de recherche. Les conseils de Google pour les meta descriptions efficaces :

  • Chaque page doit contenir sa propre meta description : ne faites pas un texte générique qui est utilisé sur toutes les pages de votre site.
  • Utilisez des données clairement associées au contenu : pas seulement du texte, cela peut parfois être des données (auteur, prix, nombre de pages pour un livre par exemple).
  • Rédigez des descriptions de qualité : la description n’est pas visible quand vous chargez la page mais si elle est jugée bonne par Google (ou un autre moteur de recherches), elle sera affichée dans les résultats de recherche. Cela vous permet d’attirer plus de visiteurs sur vos pages affichées dans les résultats de recherches.

Retour

META viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

Cette balise contrôle comment la page sera affichée sur les appareils mobiles. La valeur width="device-width" indique au navigateur d’utiliser la largeur de l’écran pour afficher la page. La valeur initial-scale="1" ajuste le zoom du navigateur à 100%.

Ces valeurs fonctionnent dans la majorité des cas mais pour en savoir plus, il faudra lire de la documentation en anglais ici et ici.

Retour

META theme-color

<meta name="theme-color" content="#...">

Bien que ceci ne soit qu’un léger détail, c’est une option disponible et elle pourrait être intéressante. Elle permet de changer la couleur de la barre de statut (la partie supérieure de l’écran des appareils mobiles) mais seulement pour Chrome sur Android.

Un bon texte d’introduction à ces concepts se trouve sur le site pour développeurs de Google.

Retour

BODY

<body>

</body>

Tout ce qui se trouve entre ces deux balises fera partie du corps de la page et à moins que ce ne soit des balises qui n’affichent rien (<style>, <script>, etc.), le contenu sera affiché dans la fenêtre du navigateur.

Retour

If IE

<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser.
Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->

Ce bout de code ne s’affiche que pour les utilisateurs de IE9 et moins. Ils sont gentiment invités à mettre leur navigateur à jour. Évidemment, si le site doit supporter ces navigateurs inférieurs, il faudra enlever ou modifier cette partie de code.

Retour

SCRIPT

Les scripts nécessaires au bon fonctionnement de la page sont ajoutés à la fin pour éviter de ralentir le chargement du contenu.

modernizr

<script src="js/vendor/modernizr-3.8.0.min.js"></script>

Il s’agit d’une librairie JavaScript qui ajoute des classes à l’éléments <html> une fois que certains tests sont complétés. La librairie permet aux vieux navigateurs d’interpréter correctement les balises sémantiques plus récentes (<section>, <article>, <header>, <footer>, etc.).

Le site de modernizr offre un peu plus d’information.

jQuery

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>

jQuery est une librairie JavaScript qui permet d’ajouter de l’interactivité aux pages web au moyen de JavaScript. Dans ce segment de code, il y a en fait deux liens vers jQuery : le premier se trouve sur le site de jQuery et le second chargera vers une version locale (dans les rares cas où la version sur le web ne serait pas disponible).

plugin.js

<script src="js/plugins.js"></script>

Ce fichier contient un bout de code qui évite, dans certains navigateurs, d’afficher des messages d’erreurs liés à JavaScript.

Il est possible d’ajouter des plugins jQuery ou d’autres libraires dans ce document. Ce fichier comme tel n’est pas nécessaire mais en incluant toutes les librairies additionnelles dans un seul document, on réduit le nombre de documents à charger pour chaque page, ce qui évite de rendre votre site trop lent.

main.js

<script src="js/main.js"></script>

Encore une fois, pour des fins d’organisations, ce document contient le JavaScript que vous créez vous-mêmes. Par défaut il est vide.

Google Analytics

<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID.-->
<script>
window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
ga('create', 'UA- XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')
</script><script src="https://www.google-analytics.com/analytics.js" async></script>

Si vous utilisez Google Analytics vous devez remplacer UA-XXXX-Y par votre ID Google Analytics. N’oubliez pas de la faire pour toutes les pages de votre site.

Si vous n’utilisez pas GA, vous pouvez simplement effacer ce segment de code.