2.5 KiB

Raw Permalink Blame History

HTML B1

HTML

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.

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 (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

<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

Balises en ligne

<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 :::

2.5 KiB Raw Permalink Blame History Unescape Escape