/ Accueil / English
HTML

HTML : la structure de votre site Web !

La naissance du HTML

Le HTML est venu au monde vers les années 1990. Il a été inventé afin d’afficher des documents hypertextes sur les navigateurs Web (aussi appelés « fureteurs Web »). Il y a eu plusieurs versions avant d’arriver à la dernière que nous utilisons actuellement, c’est-à-dire, le HTML5.

1 – HTML c’est quoi ?

HTML signifie HyperText Markup Language. C’est un langage de balisage utilisé pour créer des pages Web et c’est la base d’un site Web. Il sert à bâtir la structure de votre site. J’aime souvent comparer avec le corps humain. Le HTML est le squelette d’un site, le CSS est la peau, les cheveux, les vêtement, etc. et le JavaScript est ce qui rend la page dynamique.

Un parallèle du HTML avec le corps humain

Le HTML permet au développeur de gérer la manière dont le contenu d’un site s’affichera à l’écran. À l’aide de balises, il est possible d’insérer des titres et des sous-titres, mettre en gras et en italique, créer des paragraphes de texte, hiérarchiser le contenu et plus encore. Il est aussi utilisé afin d’insérer des médias tel que des images et des vidéos et d’introduire des liens hypertextes.

Les balises peuvent s’imbriquer ou être une en dessous de l’autre. Tout dépend de l’affichage souhaité. Le HTML est un langage côté client, ce qui veut dire, que le navigateur décode les balises et affiche le contenu à l’écran.

2 – Comment utiliser les balises

Les balises ont une syntaxe rigide et ont certaines règles à respecter. À quelques exceptions, il y a toujours une balise d’ouverture et une balise de fermeture. Elles s’écrivent toujours de la même façon.

La balise d’ouverture

La balise d’ouverture commence par un chevron d’ouverture « <« , suivi de l’élément, d’un attribut si nécessaire et d’un chevron de fermeture « > ».

Un exemple de balise d'ouverture en HTML

La balise de fermeture

Elle ressemble beaucoup à la balise d’ouverture, mais elle contient seulement l’élément. Il n’y a pas d’attribut et il y a aussi une barre oblique après le chevron d’ouverture.

Un exemple de balise de fermeture en HTML

Comme on peut le voir dans l’exemple ci-dessus, les balises <p> sont utilisées pour ajouter des paragraphes de texte. La « class » est un attribut qui sert à manipuler l’élément à l’aide de CSS ou JavaScript.

Il y a quelques exceptions où il n’y a pas de balise de fermeture. Ces balises s’écrivent comme la balise d’ouverture, mais il y a une barre oblique avant le chevron de fermeture.

Un exemple de balise d'ouverture et de fermeture en HTML
Un exemple de balise d'ouverture et de fermeture en HTML

3 – J’aimerais un exemple concret s.v.p. !

Si par exemple vous voulez afficher ceci :

Exemple d'une page Web HTML sans CSS

Voici le code nécessaire pour obtenir ce résultat :

Exemple du code HTML d'une page Web sans CSS
  • La balise <title> sert à afficher le méta title (le titre que l’on voit dans l’onglet du fureteur).
  • La balise <h1> est utilisée pour afficher le titre principal d’une page Web. Contrairement aux autres balises de titre (h2, h3, h4, etc.), elle doit être unique. Il ne doit pas avoir d’autres balises <h1> sur une même page.
  • Les balises <p> pour afficher des paragraphes de texte tel que mentionné dans l’exemple plus haut.
  • La balise <strong> sert à mettre en gras.
  • La balise <em> sert à mettre en italique.
  • La balise <a> qui sert à créer un lien. C’est l’attribut « href » qui détermine vers quelle page le lien dirige.

4 – OK, mais c’est laid !

Effectivement, le HTML sert à structurer votre page et ne sert pas à réaliser une belle mise en page. C’est là que son meilleur allié le CSS entre en jeu. Je vous invite à rester à l’affût sur notre blogue pour en savoir plus. Mon prochain article parlera du CSS, un langage qui permet de rendre votre site plus joli!

Auteur.e de l'article

Marie-Michel Tremblay

Intégratrice Web, Graphiste
Dotée d’une fibre artistique certaine, Marie-Michel détient un DEC en techniques d’intégration multimédia, une AEC en graphisme et d’un DEC en musique. Après ses études, elle travaille durant six ans comme conceptrice Web et graphiste au sein de diverses entreprises du Saguenay, et réalise des mandats à son propre compte. Elle enseigne également le chant pendant un an et demi. En 2016, Marie-Michel rejoint Wenovio et évolue avec l’équipe pendant deux ans. Elle quitte ensuite l’équipe pour prêter main-forte à une entreprise de sa région, et revient finalement chez Wenovio en 2021. Son but : mettre au service des clients son appétit pour les nouveaux défis et sa soif d’apprendre.

À découvrir sur notre blogue

2022-04-26

CSS : ce qui rends votre site Web sexy !

Marie-Michel Tremblay / Intégratrice Web, Graphiste

CSS est l’acronyme de Cascading Style Sheets ou en français « feuilles de style en cascade ». C’est un langage pour formater le design de votre site.

Lire la suite
2017-05-26

Live chat : mise en place sur un site WordPress

Gilles Duquerroy / Flexocodeur

Mettre en place un live chat sur son site wordpress, deux solutions différentes à prendre en compte suivant les cas

Lire la suite
2019-05-07

Le persona en marketing : c’est quoi ?

Davyd Quintal / Directeur des solutions novatrices

Le persona est la description de l’auditoire cible de vos produits et services tel que défini dans votre plan marketing.

Lire la suite
2023-07-18

6 astuces SEO efficaces pour un site Web de massothérapie qui se démarque

Davyd Quintal / Directeur des solutions novatrices

Découvrez 6 astuces SEO pour améliorer le référencement naturel de votre site Web de massothérapie et attirer davantage de visiteurs.

Lire la suite

Laisser un commentaire

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.