Le HTML (<spanlang="en">hyper text markup language</span>) est un langage de programmation qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe:
La structure d'un document HTML est donc une suite de balises que l'on organise afin de donner du sens à notre contenu. Il nous revient de construire notre document HTML afin qu'il soit le plus explicite et sémantiquement correcte.
### Les balises indispensables
-`<!DOCTYPE>` = déclaration du type de document
-`<html>` = racine du document, contient tous les autres éléments
-`<head>` = fournit des informations générales (métadonnées) sur le document
-`<body>` = contenu principal du document
### Les balises et attributs recommandés
-`lang` = déclaration du langage utilisé pour le contenu
-`dir` = Sens de lecture du contenu
-`charset` = définit l'encodage des caractères utilisés
-`title` = définit le titre du document (fenêtre/onglet/référencement)
::: details Afficher le code
<<<@/snippets/html/base.html#base
:::
### Les balises structurantes
-`<header>` = en-tête
-`<nav>` = élément contenant des liens, destiné à la navigation
-`<main>` = contenu principal du document
-`<article>` = une composition autonome pouvant être utilisée seule
-`<section>` = zone générique du document, plus utile au développeur qu’à l’utilisateur
-`<aside>` = contenu secondaire ou indirect à l’inverse de `<main>`
-`<h1>` - `<h6>` = niveaux des titres du document
-`<footer>` = pied de page
::: details Afficher le code
<<<@/snippets/html/base.html#structure
:::
### Les balises de contenus
On distingue deux catégories de balises: bloc (<spanlang="en">block</span>) et en ligne (<spanlang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
Ci-dessous, quelques exemples de balises (listes non exhaustives).
Le langage CSS (<spanlang="en">cascading style sheets</span>) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple:
- la mise en page
- les couleurs
- les tailles
- la justification
- les polices de caractères
- etc.
On parle de «règle CSS». Une règle se construit ainsi:
Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de «conflit» entre plusieurs règles.
Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.**
- [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade.
- [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.
