fbpx
/ 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 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
2016-12-02

Visual Composer : incompatibilité avec WordPress 4.5 & 4.6

David Barbier / Shaman programmeur

Visual Composer est un plugin très populaire de construction/gestion de pages(Page builder) pour Wordpress.

Lire la suite
2021-12-03

Modifier la taille du texte sur Windows et son impact sur l’affichage de votre site Web

Davyd Quintal / Directeur des solutions novatrices

La taille du texte sur Windows est une option accessible dans les options d’affichage du panneau de contrôle et permet d’augmenter la taille du texte.

Lire la suite
2021-06-08

Caching WordPress : les 7 meilleures extensions

Vincent Gaudreau / Programmeur Web

C’est quoi le caching et pourquoi vous devriez l’utiliser. La cache est un fichier compilé en mémoire qui est exécuté plus rapidement.

Lire la suite

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Ce site est protégé par reCAPTCHA et le GooglePolitique de confidentialité etConditions d'utilisation appliquer.