3.1 KiB
HTML – Débutant
Le HTML (hyper text markup language) 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.
::: 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 contenudir= Sens de lecture du contenucharset= définit l'encodage des caractères utiliséstitle= 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 (block) et en ligne (inline). 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 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 :::