Le boiler plate HTML est le code basique HTML que nous devons non seulement connaître, mais surtout comprendre pour développer des sites ou des applications web de qualité. Celui-ci est donc composé de 2 principaux éléments à savoir le <DOCTYPE! html> et le html.
Le !DOCTYPE html est une déclaration qui indique au navigateur le type de document et la version de HTML utilisée car si aujourd’hui nous sommes à la version 5 du HTML, cela signifie qu'il y a eu des versions antérieures. Ces versions antérieures impliquent donc des déclarations antérieures mais cela fera parti d'un autre article. Cette déclaration doit être la première car elle permet au navigateur d'afficher la page convenablement.
la balise html lang='en' quand à elle est la balise racine à laquelle appartiendront toutes les autres balises. L'attribut 'lang' permet de spécifier la langue ce qui est très importante pour l'accessibilité car cela permettra aux lecteurs d'écran de correctement prononcer les mots.
À quoi resemble le HTML boilerplate (passe-partout)?
Ci-dessous nous avons le boilerplate html.
Nous pouvons aussi le représenter de cette façon.
Maintenant que nous connaissons les premiers éléments du boiler plate, il est temps d'aller un peu plus en profondeur.
Comme nous pouvons le voir ce le schémas et le code, la balise html en elle-même contient deux balises essentielles head et body.
La balise head
Contient toutes les informations dont les navigateurs et les moteurs de recherche ont besoin pour comprendre l’intérêt du site et le proposer à l'audience appropriée.
La balise meta charset='UTF-8': contient deux éléments très importants pour notre navigateur car ceux-ci vont l'aider à afficher le texte comme il faut. Ces éléments sont le charset et le UTF-8.
Le charset informe le navigateur sur la norme de codage des caractères ce qui permet à celui-ci de correctement interpréter la page.
Le UTF-8 est une codage de caractères qui contient quasiment tous les symboles utilisés dans les langue humaines.
La balise meta name="viewport" content="with=device-with", initial-scale="1.0" cette balise est tout aussi importante car elle permet d'adapter la page selon la taille de l'écran. Ces ajustements sont possible grâce aux différents attributs ci-dessous:
name='viewport: qui fait référence à la fenêtre d'affichage de l'écran selon l'appareil utilisé.
content="with=device-with": qui permet d'adapter le rendu de la page à la taille de l'écran de l'appareil.
initial-scale="1.0": qui permet d'afficher la page par défaut sans zoom.
La balise <meta http-equiv="X-UA-Compatible", content="ie=edge"> nous rassure d'afficher avec la plus récente version d'Internet Explorer de Microsoft.
http-equiv="X-UA-Compatible" permet d'émuler l'entête du mode rendu dans Internet Explorer.
content="ie=edge" permet d'assurer le rendu de la page avec la version la plus récente du moteur de rendu de Microsoft.
La balise <titre>My first boilerplate</titre> est l'une des balises visible contenue dans head car comme la balise, elle affiche le titre de la page actuelle sur le navigateur. Cette balise est d'une importance capitale car elle permet de nous retrouver lorsqu'on a. une navigateur qui a plusieurs fenêtres ouvertes. La balise nous permet de facilement retrouver nos pages et donc facilite notre expérience.
La balise body
Tout a long du développement de notre site ou application web, cette balise s'agrandira pour abriter tout le code qui va s'afficher sur notre navigateur. Une élaboration de ce qui doit contenu dans cette balise se fera dans nos prochain articles. Ce que nous pouvons retenir de cette balise c'est que si vous voulez que quelque chose s'affiche dans votre navigateur, insérez-le dans la balise body.
Pour conclure, nous avons vu les balises fondamentales de html. Mais il est néanmoins important de souligner que ces balises peuvent contenir plus d’éléments que ceux mentionnés ici. Restez câblé pour plus d'articles de ce genre.
Top comments (0)