cours/docs/dev/B1/html.md

71 lines
2.5 KiB
Markdown
Raw Normal View History

2022-09-24 17:32:11 +02:00
# HTML B1
## HTML
Le HTML (<span lang="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 :
`<` `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.
### 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à lutilisateur
- `<aside>` = contenu secondaire ou indirect à linverse 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
- `<blockquote>` = une citation
- `<p>` = un paragraphe
- `<ol>` = liste ordonnée
- `<ul>` = liste désordonnée (liste à puce)
- `<li>` = élément dune liste
- `<div>` = conteneur générique
#### Balises en ligne
- `<img>` = insertion dune 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
:::