81 lines
3.1 KiB
Markdown
Executable File
81 lines
3.1 KiB
Markdown
Executable File
# 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 :
|
||
`<` `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 “ en bloc ” 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 “ en ligne ” 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
|
||
:::
|