cours/docs/dev/01-debutant/html.md

# HTML – Débutant

Le HTML (<span lang="en">hyper text markup language</span>) [est un langage de programmation](https://briefs.video/videos/is-html-a-programming-language/) qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe&nbsp;:  
`<` `nom de la balise` `attributs` `>`  
`contenu de la balise`  
`</` `nom de la balise` `>`

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.

::: tip Astuce
En HTML, chaque balise est une boîte. Se représenter une boîte par élément est un bon moyen de comprendre la structure du document. Tout est une boîte en HTML.
:::

## 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 (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.

Ci-dessous, quelques exemples de balises (listes non exhaustives).

### Balises bloc

Les balises “&nbsp;en bloc&nbsp;” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.

- `<blockquote>` = une citation
- `<p>` = un paragraphe
- `<ol>` = liste ordonnée
- `<ul>` = liste désordonnée (liste à puce)
- `<li>` = élément d’une liste
- `<div>` = conteneur générique

::: info
[Les balises structurantes](#les-balises-structurantes) sont toutes des balises en bloc.
:::

### Balises en ligne

Les balises “&nbsp;en ligne&nbsp;” sont des balises qui occuperont uniquement la largeur de leur contenu.

- `<img>` = insertion d’une image
- `<a>` = un lien
- `<span>` = conteneur générique en ligne
- `<strong>` = contenu important (en gras)
- `<br>` = saut de ligne

::: details Afficher le code
<<< @/snippets/html/base.html#full
:::
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								# HTML – Débutant
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								Le HTML (<span lang="en">hyper text markup language</span>) [est un langage de programmation](https://briefs.video/videos/is-html-a-programming-language/) qui sert à structurer, hiérarchiser et afficher le contenu d'une page web. Il s'écrit avec des balises suivant cette syntaxe&nbsp;:
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
+								`<` `nom de la balise` `attributs` `>`
 								`contenu de la balise`
-												fixed html tag

											
										
										
											2022-09-27 12:39:07 +02:00
+								`</` `nom de la balise` `>`
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								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.
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								::: tip Astuce
 								En HTML, chaque balise est une boîte. Se représenter une boîte par élément est un bon moyen de comprendre la structure du document. Tout est une boîte en HTML.
 								:::
 								## Les balises indispensables
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								- `<!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
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								## Les balises et attributs recommandés
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								- `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
 								:::
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								## Les balises structurantes
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								- `<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
 								:::
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								## Les balises de contenus
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								On distingue deux catégories de balises: bloc (<span lang="en">block</span>) et en ligne (<span lang="en">inline</span>). Les balises en ligne ne peuvent pas contenir de balises bloc.
 								Ci-dessous, quelques exemples de balises (listes non exhaustives).
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								### Balises bloc
 								Les balises “&nbsp;en bloc&nbsp;” sont des balises qui occuperont toute la largeur disponible, quelle que soit la largeur de leur contenu.
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								- `<blockquote>` = une citation
 								- `<p>` = un paragraphe
 								- `<ol>` = liste ordonnée
 								- `<ul>` = liste désordonnée (liste à puce)
 								- `<li>` = élément d’une liste
 								- `<div>` = conteneur générique
-												reorganized levels,
added content
updated dependencies

											
										
										
											2023-02-14 19:30:53 +01:00
+								::: info
 								[Les balises structurantes](#les-balises-structurantes) sont toutes des balises en bloc.
 								:::
 								### Balises en ligne
 								Les balises “&nbsp;en ligne&nbsp;” sont des balises qui occuperont uniquement la largeur de leur contenu.
-												dep update + B1 html

											
										
										
											2022-09-24 17:32:11 +02:00
 								- `<img>` = insertion d’une image
 								- `<a>` = un lien
 								- `<span>` = conteneur générique en ligne
 								- `<strong>` = contenu important (en gras)
 								- `<br>` = saut de ligne
 								::: details Afficher le code
 								<<< @/snippets/html/base.html#full
 								:::