Le html, un langage à balises
Une page html est un fichier texte ayant pour extension .html ou .htm Vous pouvez très bien créer vos propres pages html à partir d’un logiciel de traitement de texte comme Bloc-notes ou Text-edit.
Une page html contient des balises permettant de mettre en forme le texte, de mettre en place des liens, d’afficher des images…
Le html n’est pas un langage de programmation.
Comment utiliser les balises html ?
Les balises html sont généralement présentes par paire afin d’agir sur les éléments qu’elles encadrent. La première est appelée « balise d’ouverture » ou « balise ouvrante » et la seconde « balise de fermeture » ou « balise fermante ».
Une balise ouvrante est un ensemble composé d’un nom encadrée par le caractère inférieur « < » et le caractère supérieur « > » par exemple <head>
La balise fermante est composé comme la balise ouvrante avec le caractère « / » entre le caractère inférieur « < » et le nom par exemple </body>
<marqueur> Votre texte formaté </marqueur>Ainsi les balises <b> et </b> permettent de mettre en gras le texte qu’elles encadrent :
<b> Ce texte est en gras </b>Les balises html peuvent parfois être uniques : la balise <br> représente par exemple un retour à la ligne. Pour autant, afin d’être le plus proche possible du standard Xhtml (beaucoup plus stricte que le standard html), il est conseillé d’utiliser la notation suivante : <br />.
Les balises ne sont pas sensibles à la casse, c’est-à-dire qu’elles peuvent être indifféremment en minuscules ou en majuscules ! Mais dans le respect de la règle, vous préférez les balises en minuscules.
Imbrication
Les balises html ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de permettre le cumul de leur propriétés. En contrepartie le chevauchement de balises n’est pas toléré par le standard html.
<i><u>italique et souligné</u>, italique uniquement</i>L’exemple ci-dessus donne le résultat suivant :
italique et souligné, italique uniquement
En contrepartie l’exemple ci-dessous n’est pas correct :
<i><b>ceci ne marche pas</i>, ceci ne marche pas</b>Notion d’attribut
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés supplémentaires à la balise à laquelle il appartient. Les attributs se présentent la plupart du temps comme une paire clé-valeur, sous la forme cle= »valeur », mais certains attributs sont parfois une seule clé.
Voici un exemple d’attribut pour la balise <p> (balise définissant un paragraphe) permettant de spécifier que le texte doit être aligné sur la droite :
<p align="right">Exemple de paragraphe</p>Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs valeurs.
Espaces, saut de ligne et tabulations
La langage html ne tient pas compte des espaces, des tabulations et des sauts de ligne ou plus exactement considère une suite d’un ou plusieurs espaces/tabulations/saut de ligne comme un seul espace. Cela est notamment très utile afin de permettre d’indenter le code html pour plus de lisibilité.
Les deux codes html suivants donnent ainsi le même résultat :
<p>Exemple de
code
html</p><p>Exemple de code html</p>Le langage html possède par contre des éléments permettant expressément de définir chacun de ces éléments de mise en forme :
Espace insécable : il s’agit d’un espace ne pouvant être brisé par une fin de ligne. Sa représentation en html est .
Saut de ligne manuel : il s’agit d’un saut de ligne explicite. Sa représentation en html est <br> ou <br /> pour être conforme au Xhtml.
À noter tout de même : il existe une exception pour le code contenu dans des balises <pre> et </pre>, dont l’objectif est justement de conserver le formatage du texte (espaces, sauts de lignes… ).
Quelles sont les principales balises HTML utilisées pour structurer et organiser le contenu d’une page web ?
1. Balises de structure
<html>: Encapsule l’ensemble du document HTML.<head>: Contient des métadonnées pour le document, comme le titre, les liens vers les feuilles de style, etc.<body>: Contient le contenu visible de la page.
2. Balises de titre et de texte
- <title> : Titre de la page qui s’affiche dans l’onglet du navigateur.
<h1>,<h2>, …<h6>: Balises de titres, de<h1>(titre principal) à<h6>(sous-titre de niveau inférieur).<p>: Paragraphe.<br>: Saut de ligne.<hr>: Ligne horizontale (séparation visuelle).<strong>: Texte en gras (important).<em>: Texte en italique (emphase).
3. Balises de lien et de média
<a href="URL">: Hyperlien vers une autre page ou ressource.<img src="URL" alt="Description">: Image avec attributs pour le chemin (src) et la description (alt).<video>et<audio>: Pour intégrer des fichiers vidéo et audio, avec divers attributs (commecontrols).
4. Balises de liste
<ul>: Liste non ordonnée (à puces).<ol>: Liste ordonnée (numérotée).<li>: Élément de liste (utilisé dans<ul>ou<ol>).
5. Balises de tableau
<table>: Crée un tableau.<tr>: Ligne de tableau.<td>: Cellule de données dans une ligne.<th>: Cellule d’en-tête (souvent pour la première ligne ou colonne).
6. Balises de formulaire
<form>: Encapsule un formulaire pour la collecte de données.<input>: Champ de saisie de données (texte, bouton, etc.).<textarea>: Zone de texte multi-lignes.<button>: Bouton cliquable.<select>et<option>: Liste déroulante avec options.
7. Balises de division et de conteneur
<div>: Division ou section de la page, souvent utilisée pour organiser et structurer le contenu.<span>: Conteneur en ligne pour styler une partie du texte ou du contenu en ligne.
8. Balises sémantiques (HTML5)
<header>: En-tête de la page ou d’une section.<footer>: Pied de page.<article>: Contenu autonome, comme un article de blog.<section>: Section thématique.<nav>: Menu de navigation.<aside>: Contenu en marge (comme une barre latérale).
Ces balises permettent de structurer et d’enrichir le contenu HTML pour les navigateurs et les moteurs de recherche.