Mise en place

Pour que ton navigateur comprenne ce qu’est chaque élément de ton site, on doit les étiqueter avec des tags (balises) HTML. HTML est l’abréviation de “Hypertext Markup Language” (Langage de Balisage d’Hypertexte). Les tags sont des mots entourés des symboles < et >. Par exemple, la tag <img> indique à ton navigateur “ceci est une image”. La tag <button> lui indique “ceci est un bouton”.

alt text

Les tags peuvent également être utilisées pour organiser ton page Web ! L’image ci-dessous présente la structure d’une page Web de base. Le “head” (tête) contient généralement les libraries (bibliothèques) supplémentaires utilisées et le titre de la page, tandis que le corps contient la majeure partie du contenu affiché.

html tag structure

La plupart des tags nécessitent une tag d’ouverture et une tag de fermeture. Par exemple, tu vois que toutes les pages ont une tag d’ouverture <html> au début et une tag de fermeture </html> à la fin. Cela indique au navigateur où les éléments HTML commencent et où ils se terminent. Pensez aux tags comme à des guillemets ; par exemple, l’ordinateur comprendra que tout ce qui se trouve entre les tags <html> et </html> fait partie d’un site Web de HTML.

Il existe également quelques tags, comme la tag d’image <img>, qui se ferment automatiquement, ce qui signifie qu’elles ne nécessitent qu’une tag d’ouverture et non une tag de fermeture.

Voici un exemple :

See the Pen HTML Basics by Deliana Escobari (@Sunny-Dee) on CodePen.