Introduction à HTML
HTML, ou HyperText Markup Language, est le standard universel pour structurer et présenter le contenu des pages web. En utilisant un système de balises, il définit les éléments et les sections nécessaires à la création d'une page.
Créé en 1991 par Tim Berners-Lee, HTML a marqué la naissance du World Wide Web. Aujourd'hui, la version HTML5 inclut des outils modernes pour le multimédia, les animations et les interactions utilisateur.
Pourquoi apprendre HTML ?
- Essentiel pour le développement web : HTML est la base de tous les sites web modernes, permettant de structurer du contenu de manière claire et accessible.
- Facile à apprendre : Un langage simple et intuitif, parfait pour les débutants en programmation.
- Polyvalent et compatible : Fonctionne sur toutes les plateformes et navigateurs, offrant une compatibilité universelle.
Liste Complète des Balises HTML
Découvrez ici une liste exhaustive des balises HTML disponibles en HTML5. Chaque balise est accompagnée d’une brève description pour comprendre son rôle dans la structure et la présentation des pages web.
Balises de structure
-
<!DOCTYPE> : Indique le type de document HTML. Elle est utilisée pour informer le navigateur de la version de HTML utilisée.
<!DOCTYPE html>Exemple : Cette déclaration doit être placée tout en haut de votre document HTML.
-
<html> : Le conteneur principal pour tout le contenu HTML. Tous les éléments d'une page web doivent être inclus à l'intérieur de cette balise.
<html> ... </html>Exemple : Elle encadre toutes les balises présentes sur la page.
-
<head> : Contient des métadonnées et des informations essentielles pour le navigateur (comme les styles, les liens et les scripts). Elle n'affiche rien directement sur la page.
<head> <title>Titre de la page</title> </head>Exemple : Ajoutez les balises de style, de lien ou de script ici.
-
<title> : Définit le titre de la page, qui s'affiche dans l'onglet du navigateur ou dans les résultats de recherche.
<title> Mon site web </title>Exemple : Ce texte apparaît dans l'onglet du navigateur.
-
<body> : Contient tout le contenu visible d'une page web, y compris le texte, les images, les vidéos, les formulaires, etc.
<body> <h1>Bienvenue</h1> <p>Ceci est une page d'exemple.</p> </body>Exemple : Tout le contenu affiché sur votre site est placé à l'intérieur de cette balise.
Balises de Formatage de Texte
-
<h1> à <h6> : Définissent les titres, du plus grand (<h1>) au plus petit (<h6>).
<h1>Titre principal</h1> <h2>Titre secondaire</h2> <h6>Titre très petit</h6>Exemple : Utilisez <h1> pour les titres principaux et descendez jusqu'à <h6> pour des sous-sections.
-
<p> : Définit un paragraphe de texte.
<p>Ceci est un paragraphe de texte.</p>Exemple : Utilisez cette balise pour structurer votre texte en paragraphes.
-
<br> : Insère un saut de ligne.
Texte sur une ligne<br> Texte sur une autre ligneExemple : Utile pour forcer un retour à la ligne.
-
<hr> : Insère une ligne horizontale pour séparer le contenu.
<hr>Exemple : Utilisé pour marquer des sections ou des pauses visuelles.
-
<strong> : Texte en gras avec une importance particulière.
<strong>Texte important</strong>Exemple : Utilisez cette balise pour insister sur un mot ou une phrase clé.
-
<b> : Texte en gras sans connotation d'importance.
<b>Texte en gras</b>Exemple : Utilisez-le pour styliser du texte sans signifier une importance particulière.
-
<i> : Texte en italique.
<i>Texte en italique</i>Exemple : Souvent utilisé pour les termes étrangers ou pour styliser du texte.
-
<em> : Texte en italique avec une emphase sémantique.
<em>Texte avec emphase</em>Exemple : Utilisé pour insister sur des mots dans une phrase.
-
<small> : Texte de petite taille.
<small>Texte réduit</small>Exemple : Idéal pour les mentions légales ou annotations.
-
<mark> : Texte surligné.
<mark>Texte surligné</mark>Exemple : Mettez en avant un texte dans une phrase.
-
<blockquote> : Bloc de citation.
<blockquote> C'est une citation. </blockquote>Exemple : Souvent utilisé pour citer des sources externes.
-
<pre> : Texte préformaté.
<pre> Texte avec des espaces conservés. </pre>Exemple : Utile pour montrer du code ou des textes structurés.
-
<code> : Texte représentant du code.
<code>console.log("Bonjour !")</code>Exemple : À utiliser pour afficher du code en ligne.
Balises Multimédia
-
<img> : Permet d'afficher une image sur la page.
<img src="image.jpg" alt="Description de l'image" />Exemple : Affiche une image avec un texte alternatif en cas d'erreur.
-
<audio> : Permet la lecture de fichiers audio.
<audio controls > <source src="audio.mp3" type="audio/mpeg" /> </audio>Exemple : Ajoute un lecteur audio avec des contrôles.
-
<video> : Permet la lecture de fichiers vidéo.
<video width="640" height="360" controls > <source src="video.mp4" type="video/mp4" /> </video>Exemple : Ajoute un lecteur vidéo avec des contrôles et des dimensions spécifiques.
-
<source> : Spécifie une source pour les balises <audio> ou <video>.
<video controls > <source src="video.mp4" type="video/mp4" /> </video>Exemple : Ajoutez plusieurs balises <source> pour prendre en charge différents formats de fichiers.
-
<track> : Ajoute des sous-titres ou des descriptions textuelles à une vidéo.
<video controls > <source src="video.mp4" type="video/mp4" /> <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" /> </video>Exemple : Ajoutez des sous-titres pour rendre vos vidéos accessibles.
-
<iframe> : Permet d'intégrer un contenu externe, comme une page web ou une carte.
<iframe src="https://example.com" width="640" height="360" frameborder="0" ></iframe>Exemple : Intégrez des vidéos YouTube, des cartes Google Maps, ou d'autres contenus externes.
Balises de Listes
-
<ul> : Définit une liste non ordonnée avec des puces comme marqueurs.
<ul> <li>Premier élément</li> <li>Deuxième élément</li> </ul>Exemple : Utilisez cette balise pour créer une liste non ordonnée comme des options ou des items.
-
<ol> : Définit une liste ordonnée avec des numéros ou des lettres comme marqueurs.
<ol> <li>Étape 1</li> <li>Étape 2</li> </ol>Exemple : Idéal pour afficher des étapes ou une séquence ordonnée.
-
<li> : Élément de liste utilisé à l'intérieur des balises <ul> ou <ol>.
<ul> <li>Élément de liste</li> </ul>Exemple : Chaque élément dans une liste doit être contenu dans une balise <li>.
-
<dl> : Définit une liste de définition, utilisée pour présenter des termes et leurs descriptions.
<dl> <dt>HTML</dt> <dd>Langage de balisage pour le web</dd> </dl>Exemple : Idéal pour afficher des glossaires ou des définitions.
-
<dt> : Définit un terme dans une liste de définition.
<dl> <dt>HTML</dt> <dd>Langage utilisé pour structurer le contenu web</dd> </dl>Exemple : Utilisez <dt> pour introduire chaque terme dans une liste de définition.
-
<dd> : Définit la description ou la définition d'un terme dans une liste de définition.
<dl> <dt>CSS</dt> <dd>Langage utilisé pour styliser les pages web</dd> </dl>Exemple : Placez la description sous chaque terme défini par <dt>.
Balises de Tableaux
-
<table> : Définit un tableau HTML. Contient les lignes et les cellules.
<table> ... </table>Exemple : Utilisez cette balise comme conteneur principal pour un tableau.
-
<tr> : Définit une ligne de tableau. Contient des cellules (<td> ou <th>).
<tr> ... </tr>Exemple : Chaque ligne de tableau doit être définie à l'intérieur de cette balise.
-
<td> : Définit une cellule de tableau contenant des données.
<td>Cellule de données</td>Exemple : À utiliser dans une ligne (<tr>) pour ajouter des données.
-
<th> : Définit une cellule d'en-tête de tableau.
<th>Titre de colonne</th>Exemple : Utilisée pour les en-têtes de colonnes ou de lignes, souvent stylisée en gras.
-
<caption> : Ajoute une légende au tableau.
<table> <caption>Légende du tableau</caption> ... </table>Exemple : Ajoutez un titre descriptif au tableau pour améliorer l'accessibilité.
-
<thead> : Regroupe les lignes d'en-tête du tableau.
<thead> <tr> <th>Colonne 1</th> <th>Colonne 2</th> </tr> </thead>Exemple : Placez les en-têtes de colonnes dans cette section.
-
<tbody> : Contient le corps principal du tableau.
<tbody> <tr> <td>Donnée 1</td> <td>Donnée 2</td> </tr> </tbody>Exemple : Regroupez les données principales ici.
-
<tfoot> : Contient le pied du tableau, généralement utilisé pour les totaux ou notes.
<tfoot> <tr> <td colspan="2">Total : 100</td> </tr> </tfoot>Exemple : Idéal pour afficher les totaux ou des remarques générales.
Balises de Formulaires
-
<form> : Définit un formulaire HTML utilisé pour collecter et envoyer des données.
<form action="/submit" method="POST" > ... </form>Exemple : Utilisez cette balise pour encapsuler tous les champs du formulaire.
-
<input> : Champ de saisie pour collecter des informations (texte, email, mot de passe, etc.).
<input type="text" name="username" placeholder="Entrez votre nom" />Exemple : Utilisez `type` pour spécifier le type de champ (texte, email, mot de passe, etc.).
-
<textarea> : Zone de texte multi-ligne pour une saisie plus étendue.
<textarea name="message" rows="4" cols="50" >Votre message ici</textarea>Exemple : Idéal pour collecter des commentaires ou des descriptions.
-
<select> : Définit un menu déroulant.
<select name="options" > <option>Option 1</option> <option>Option 2</option> </select>Exemple : Contient plusieurs options parmi lesquelles l'utilisateur peut choisir.
-
<option> : Définit une option dans un menu déroulant (<select>).
<option value="valeur1" >Option 1</option>Exemple : Chaque option du menu déroulant doit être définie avec cette balise.
-
<label> : Ajoute une étiquette descriptive pour un champ de formulaire.
<label for="username" >Nom d'utilisateur</label> <input id="username" type="text" name="username" />Exemple : Utilisez l'attribut `for` pour associer un champ à son étiquette.
-
<fieldset> : Groupe de champs de formulaire pour les organiser visuellement et sémantiquement.
<fieldset> <legend>Informations personnelles</legend> ... </fieldset>Exemple : Idéal pour regrouper des champs connexes.
-
<legend> : Ajoute une légende descriptive pour un groupe <fieldset>.
<fieldset> <legend>Informations personnelles</legend> ... </fieldset>Exemple : Utilisez-le pour fournir un titre descriptif pour un groupe de champs.
Balises Sémantiques
-
<header> : Définit l'en-tête de la page ou d'une section.
<header> <h1>Bienvenue sur Mon Site</h1> <nav>...</nav> </header>Exemple : Placez le titre ou le menu principal dans cette balise.
-
<section> : Délimite une section logique dans une page.
<section> <h2>À propos</h2> <p>Contenu de la section...</p> </section>Exemple : Utilisez-la pour diviser votre contenu en parties logiques.
-
<article> : Définit un contenu autonome, comme un article de blog.
<article> <h2>Titre de l'article</h2> <p>Contenu de l'article...</p> </article>Exemple : Utilisez cette balise pour du contenu pouvant être réutilisé indépendamment.
-
<aside> : Définit du contenu secondaire, comme une barre latérale.
<aside> <p>Articles connexes</p> </aside>Exemple : Placez ici des informations secondaires ou des liens supplémentaires.
-
<main> : Conteneur pour le contenu principal de la page.
<main> ... </main>Exemple : Regroupe le contenu central de la page, excluant l'en-tête et le pied de page.
-
<figure> : Conteneur pour des éléments illustratifs comme des images ou graphiques.
<figure> <img src="image.jpg" alt="Description" /> <figcaption>Description de l'image</figcaption> </figure>Exemple : Regroupez une image avec sa légende descriptive.
-
<figcaption> : Ajoute une légende descriptive pour un élément <figure>.
<figcaption>Image de la mer</figcaption>Exemple : Placez cette balise sous une image dans un <figure>.
-
<time> : Définit une date ou heure précise.
<time datetime="2024-12-01" >1er décembre 2024</time>Exemple : Utilisez cette balise pour afficher une date ou une heure sémantique.
Balises pour Programmation et Scripts
-
<script> : Inclut ou référence un fichier JavaScript.
<script src="script.js" ></script>Exemple : Utilisez cette balise pour exécuter du code JavaScript ou inclure des fichiers externes.
-
<noscript> : Affiche un contenu de secours si JavaScript est désactivé.
<noscript> <p>JavaScript est désactivé.</p> </noscript>Exemple : Idéal pour informer les utilisateurs que le site nécessite JavaScript.
-
<canvas> : Définit une surface de dessin pour créer des graphiques dynamiques avec JavaScript.
<canvas id="myCanvas" width="500" height="400" ></canvas>Exemple : Utilisez-le pour dessiner des graphiques 2D ou 3D avec JavaScript.
-
<embed> : Insère des contenus externes, comme des vidéos ou animations Flash.
<embed src="video.mp4" width="640" height="360" />Exemple : Idéal pour intégrer des médias ou des applications interactives.
-
<object> : Conteneur pour intégrer des objets comme des fichiers PDF ou des vidéos.
<object data="document.pdf" type="application/pdf" > </object>Exemple : Utilisez-le pour afficher des objets non HTML comme des PDF ou des applications Flash.
-
<param> : Définit des paramètres pour un élément <object>.
<object data="movie.swf" type="application/x-shockwave-flash" > <param name="autoplay" value="true" /> </object>Exemple : Ajoutez des paramètres comme la lecture automatique pour des objets intégrés.
Autres Balises
-
<details> : Conteneur pour des informations complémentaires, dépliable par l'utilisateur.
<details> <summary>Plus d'informations</summary> Voici les détails supplémentaires... </details>Exemple : Affiche des détails uniquement lorsque l'utilisateur clique sur le résumé.
-
<summary> : Résumé ou titre pour une balise <details>.
<details> <summary>Voir les détails</summary> Voici le contenu... </details>Exemple : Utilisé comme un titre cliquable pour déplier ou replier les informations.
-
<dialog> : Définit une fenêtre de dialogue ou une popup.
<dialog open >Bienvenue dans cette boîte de dialogue !</dialog>Exemple : Utilisé pour afficher une boîte modale ou une alerte.
-
<data> : Associe une valeur numérique ou textuelle à un contenu.
<data value="1234" >Référence : ABC</data>Exemple : Idéal pour afficher des données associées à des valeurs numériques ou uniques.
-
<output> : Affiche le résultat d'un calcul ou d'une interaction utilisateur.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)"> <input type="number" name="a" + <input type="number" name="b" = <output name="result" ></output> </form>Exemple : Affiche le résultat en temps réel d'un calcul effectué via une interaction utilisateur.
-
<progress> : Indique la progression d'une tâche.
<progress value="70" max="100" ></progress>Exemple : Utilisez-la pour afficher une barre de progression de téléchargement ou de traitement.
-
<meter> : Représente une valeur dans une plage connue.
<meter value="2.5" min="0" max="5" ></meter>Exemple : Idéal pour afficher des niveaux ou des scores, comme une jauge.
Liste Complète des Attributs HTML
Les attributs HTML sont des propriétés associées aux balises HTML qui permettent de personnaliser leur comportement, leur apparence ou leur contenu. Ils jouent un rôle essentiel dans la définition des fonctionnalités des éléments HTML et leur interaction avec l’utilisateur ou d’autres composants d’une page web. Chaque attribut est placé à l'intérieur d'une balise d'ouverture et peut être utilisé pour configurer des paramètres spécifiques.
Cette section vous guidera à travers les attributs les plus courants et leur utilisation, en fournissant une description claire de leur rôle ainsi que des exemples pratiques. Que vous soyez débutant ou expérimenté, comprendre les attributs vous permettra de tirer pleinement parti des capacités du HTML.
Attributs Universels
-
id : Identifiant unique pour une balise. Utilisé pour les styles CSS et la manipulation DOM en JavaScript.
<div id="uniqueID" >Contenu ici</div>Exemple : Utilisez cet attribut pour cibler spécifiquement un élément avec JavaScript ou CSS.
-
class : Attribue une ou plusieurs classes CSS pour appliquer des styles ou cibler des éléments.
<p class="text-important highlight" >Texte stylisé</p>Exemple : Une balise peut avoir plusieurs classes pour appliquer plusieurs styles.
-
style : Ajoute des styles CSS directement dans une balise.
<h1 style="color: red; font-size: 2em;" >Titre rouge</h1>Exemple : Utile pour un style spécifique sans créer une règle CSS dédiée.
-
title : Affiche un texte explicatif lorsqu’un utilisateur survole l’élément.
<abbr title="HyperText Markup Language" >HTML</abbr>Exemple : Fournit des informations supplémentaires à l’utilisateur sous forme d'infobulle.
-
lang : Définit la langue de l’élément.
<html lang="fr" >Exemple : Améliore l’accessibilité et les optimisations SEO en précisant la langue.
-
data-* : Attributs personnalisés pour stocker des données supplémentaires dans un élément.
<button data-user-id="1234" >Voir utilisateur</button>Exemple : Utile pour passer des données personnalisées à un script JavaScript.
-
tabindex : Définit l'ordre de tabulation pour un élément dans le DOM.
<button tabindex="1" >Bouton principal</button>Exemple : Contrôlez l'ordre de navigation au clavier pour une meilleure expérience utilisateur.
Attributs de la balise <a>
-
href : Spécifie l’URL de la page ou du fichier lié.
<a href="https://example.com" >Visitez notre site</a>Exemple : Redirige l’utilisateur vers une page externe ou interne.
-
target : Définit où ouvrir le lien.
<a href="https://example.com" target="_blank" >Ouvrir dans un nouvel onglet</a>Exemple : Utilisez `_blank` pour un nouvel onglet ou `_self` pour le même onglet.
-
download : Télécharge le fichier au lieu de l’ouvrir.
<a href="file.pdf" download="document.pdf" >Télécharger le PDF</a>Exemple : Propose un fichier à télécharger avec un nom spécifique.
-
rel : Définit la relation entre le document actuel et la ressource liée.
<a href="https://example.com" rel="noopener noreferrer" >Lien sécurisé</a>Exemple : Ajoutez `noopener` pour empêcher l’accès au contexte du parent (utile pour la sécurité).
-
hreflang : Indique la langue du document cible.
<a href="https://example.com" hreflang="en" >Lien vers le site anglais</a>Exemple : Utile pour les sites multilingues et le SEO.
-
type : Type MIME du lien cible.
<a href="document.pdf" type="application/pdf" >Télécharger le PDF</a>Exemple : Fournit des métadonnées sur le type de fichier ciblé.
Attributs de la balise <img>
-
src : Chemin de l’image.
<img src="image.jpg" alt="Description de l'image" />Exemple : L'attribut `src` est indispensable pour définir le fichier image à afficher.
-
alt : Texte alternatif affiché si l’image ne se charge pas (important pour l'accessibilité).
<img src="image.jpg" alt="Description alternative" />Exemple : Ajoutez une description pour améliorer l'accessibilité et le SEO.
-
width : Largeur de l’image.
<img src="image.jpg" width="300" alt="Image redimensionnée" />Exemple : Utilisez `width` pour définir une largeur fixe en pixels.
-
height : Hauteur de l’image.
<img src="image.jpg" height="200" alt="Image redimensionnée" />Exemple : Ajoutez une hauteur spécifique pour contrôler les proportions de l'image.
-
loading : Définit le chargement paresseux (`lazy`) pour optimiser les performances.
<img src="image.jpg" loading="lazy" alt="Image avec chargement paresseux" />Exemple : Utilisez `lazy` pour différer le chargement des images en dehors du viewport.
-
srcset : Définit plusieurs sources d’image pour s’adapter aux résolutions d’écran.
<img src="image-small.jpg" srcset="image-small.jpg 480w, image-large.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" alt="Image responsive" />Exemple : Permet de charger une image adaptée à la taille de l'écran de l'utilisateur.
Attributs de la balise <input>
-
type : Définit le type de champ (text, password, email, etc.).
<input type="email" placeholder="Entrez votre email" />Exemple : Spécifiez le type de données attendu avec `type`.
-
name : Nom de l’élément utilisé lors de l’envoi du formulaire.
<input type="text" name="username" />Exemple : Utilisez `name` pour identifier les champs dans les données du formulaire.
-
value : Valeur par défaut ou actuelle du champ.
<input type="text" value="John Doe" />Exemple : Affiche une valeur initiale modifiable par l'utilisateur.
-
placeholder : Texte indicatif affiché lorsqu’aucune valeur n’est saisie.
<input type="text" placeholder="Entrez votre nom" />Exemple : Ajoutez des instructions claires à l'utilisateur avec `placeholder`.
-
required : Rend le champ obligatoire pour la soumission du formulaire.
<input type="text" placeholder="Nom requis" required />Exemple : Empêche la soumission tant qu'une valeur n'est pas fournie.
-
disabled : Désactive le champ.
<input type="text" value="Non modifiable" disabled />Exemple : Un champ désactivé ne peut pas être modifié ni envoyé.
-
readonly : Rend le champ non modifiable.
<input type="text" value="Lecture seule" readonly />Exemple : Utilisez `readonly` pour afficher une valeur fixe mais sélectionnable.
-
min et max : Valeurs minimum et maximum pour les champs numériques et de date.
<input type="number" min="1" max="10" />Exemple : Limitez les valeurs acceptées dans une plage définie.
-
step : Incrémentation pour les champs numériques.
<input type="number" step="0.5" />Exemple : Utilisez `step` pour contrôler les intervalles des valeurs.
Attributs de la balise <form>
-
action : URL où envoyer les données du formulaire.
<form action="/submit-form" > ... </form>Exemple : Spécifiez l’URL du serveur ou de l’API pour traiter les données soumises.
-
method : Méthode de soumission (`GET` ou `POST`).
<form method="POST" > ... </form>Exemple : Utilisez `POST` pour envoyer des données sensibles ou complexes.
-
enctype : Encodage des données lors de l’envoi.
<form enctype="multipart/form-data" > ... </form>Exemple : Nécessaire pour envoyer des fichiers via un formulaire.
-
target : Destination de la soumission.
<form action="/submit-form" target="_blank" > ... </form>Exemple : Ouvre la réponse de la soumission dans un nouvel onglet.
-
autocomplete : Active/désactive l'auto-complétion pour le formulaire.
<form autocomplete="off" > ... </form>Exemple : Utilisez `off` pour désactiver l'auto-complétion des navigateurs.
Attributs de la balise <button>
Attributs de la balise <textarea>
-
rows : Nombre de lignes de la zone de texte.
<textarea rows="5" ></textarea>Exemple : Utilisez `rows` pour définir la hauteur de la zone de texte en nombre de lignes.
-
cols : Nombre de colonnes de la zone de texte.
<textarea cols="30" ></textarea>Exemple : Utilisez `cols` pour définir la largeur de la zone de texte en nombre de colonnes.
-
maxlength : Nombre maximum de caractères.
<textarea maxlength="200" ></textarea>Exemple : Limitez la saisie de l'utilisateur à un nombre spécifique de caractères.
-
placeholder : Texte indicatif dans la zone de texte.
<textarea placeholder="Entrez votre message ici" ></textarea>Exemple : Ajoutez un guide pour aider l'utilisateur à comprendre l'utilisation du champ.
-
readonly : Rend la zone de texte non modifiable.
<textarea readonly >Texte non modifiable</textarea>Exemple : Affiche une valeur fixe que l'utilisateur ne peut pas modifier.
Attributs pour la balise <table> et ses éléments
-
border : Largeur de la bordure du tableau.
<table border="1" > ... </table>Exemple : Ajoutez `border="1"` pour afficher une bordure simple autour du tableau.
-
cellpadding : Espace intérieur des cellules.
<table cellpadding="10" > ... </table>Exemple : Utilisez `cellpadding` pour ajouter de l'espace entre le contenu et les bordures des cellules.
-
cellspacing : Espace entre les cellules.
<table cellspacing="5" > ... </table>Exemple : Ajoutez `cellspacing` pour séparer les cellules du tableau.
-
width : Largeur du tableau.
<table width="100%" > ... </table>Exemple : Utilisez `width="100%"` pour que le tableau s'adapte à la largeur de la page.
-
colspan : Fusion de colonnes pour <td> et <th>.
<td colspan="2" >Fusionné sur 2 colonnes</td>Exemple : Fusionnez plusieurs colonnes pour une cellule plus large.
-
rowspan : Fusion de lignes pour <td> et <th>.
<td rowspan="2" >Fusionné sur 2 lignes</td>Exemple : Fusionnez plusieurs lignes pour une cellule plus haute.
Attributs pour <audio> et <video>
-
src : Chemin du fichier média.
<audio src="audio.mp3" ></audio>Exemple : Spécifiez le chemin du fichier pour le lire.
-
controls : Affiche les contrôles de lecture.
<video src="video.mp4" controls ></video>Exemple : Utilisez `controls` pour ajouter des boutons de lecture, pause, volume, etc.
-
autoplay : Démarre automatiquement la lecture.
<audio src="audio.mp3" autoplay ></audio>Exemple : La lecture commence automatiquement dès que la page est chargée.
-
loop : Lit en boucle.
<video src="video.mp4" loop ></video>Exemple : Le fichier sera lu en boucle après la fin.
-
muted : Démarre sans son.
<audio src="audio.mp3" muted ></audio>Exemple : Le média est muet par défaut au démarrage.
-
poster : Image affichée avant la lecture de la vidéo.
<video src="video.mp4" poster="thumbnail.jpg" ></video>Exemple : Ajoutez une image de prévisualisation pour vos vidéos.
Attributs complémentaires pour toutes les balises HTML
Dans cette section, vous découvrirez des attributs supplémentaires applicables à diverses balises HTML. Ces attributs permettent d’améliorer la personnalisation, le comportement et l'accessibilité de vos éléments HTML. Qu'il s'agisse de définir des métadonnées, d'améliorer l'interactivité ou d'ajouter des informations de contexte, ces options vous aident à enrichir votre code de manière efficace.
Attributs de la balise <meta>
-
name : Définit le type de métadonnée (ex. `description`, `keywords`).
<meta name="description" content="Description de la page" />Exemple : Fournit des informations sur la page pour les moteurs de recherche.
-
content : Le contenu de la métadonnée.
<meta name="keywords" content="HTML, CSS, tutoriel" />Exemple : Définissez des mots-clés pour améliorer le référencement (SEO).
-
charset : Définit l'encodage des caractères (ex. `UTF-8`).
<meta charset="UTF-8" />Exemple : Spécifiez `UTF-8` pour garantir la compatibilité des caractères spéciaux.
-
http-equiv : Fournit des informations HTTP à la page (ex. `refresh`).
<meta http-equiv="refresh" content="30" />Exemple : Recharge la page toutes les 30 secondes.
Attributs de la balise <link>
-
href : URL de la ressource liée (ex. fichier CSS).
<link href="styles.css" rel="stylesheet" />Exemple : L'attribut `href` spécifie le chemin vers le fichier CSS.
-
rel : Relation entre le document et la ressource liée (ex. `stylesheet`).
<link rel="icon" href="favicon.ico" />Exemple : Utilisez `rel="icon"` pour l'icône de la page ou `rel="stylesheet"` pour le fichier CSS.
-
type : Type MIME de la ressource.
<link href="styles.css" rel="stylesheet" type="text/css" />Exemple : Bien que rarement nécessaire aujourd'hui, `type` spécifie le format de la ressource (ex. `text/css`).
-
media : Définit le type de média pour appliquer la ressource (ex. `screen`, `print`).
<link href="print.css" rel="stylesheet" media="print" />Exemple : Utilisez `media="print"` pour des styles spécifiques aux impressions.
Attributs de la balise <iframe>
-
src : URL du contenu à afficher.
<iframe src="https://example.com" width="600" height="400" ></iframe>Exemple : Chargez un site ou une application dans une zone définie de votre page.
-
width : Largeur de l’iframe.
<iframe src="https://example.com" width="800" ></iframe>Exemple : Définissez une largeur en pixels ou en pourcentage.
-
height : Hauteur de l’iframe.
<iframe src="https://example.com" height="600" ></iframe>Exemple : Définissez une hauteur en pixels ou en pourcentage.
-
loading : Mode de chargement (ex. `lazy`).
<iframe src="https://example.com" loading="lazy" ></iframe>Exemple : Utilisez `lazy` pour différer le chargement jusqu'à ce que l'iframe soit visible.
-
allowfullscreen : Permet le mode plein écran.
<iframe src="https://example.com" allowfullscreen ></iframe>Exemple : Ajoutez `allowfullscreen` pour permettre aux utilisateurs d’afficher le contenu en plein écran.
-
frameborder : Affiche ou masque la bordure autour de l'iframe.
<iframe src="https://example.com" frameborder="0" ></iframe>Exemple : Utilisez `frameborder="0"` pour supprimer la bordure par défaut.
Attributs de la balise <audio>
-
src : Chemin du fichier audio.
<audio src="audio.mp3" ></audio>Exemple : Ajoutez le chemin d’un fichier audio pour le lire sur la page.
-
controls : Affiche les contrôles de lecture.
<audio src="audio.mp3" controls ></audio>Exemple : Ajoutez `controls` pour permettre à l'utilisateur de lire, mettre en pause ou ajuster le volume.
-
autoplay : Lit automatiquement le fichier audio.
<audio src="audio.mp3" autoplay ></audio>Exemple : La lecture de l’audio commence dès que la page est chargée.
-
loop : Lit en boucle.
<audio src="audio.mp3" loop ></audio>Exemple : L’audio est rejoué automatiquement après la fin.
-
muted : Lit l’audio en mode muet.
<audio src="audio.mp3" muted ></audio>Exemple : Démarrez l’audio avec le son désactivé par défaut.
Attributs de la balise <video>
-
src : Chemin du fichier vidéo.
<video src="video.mp4" width="640" height="360" ></video>Exemple : Spécifiez l'URL de la vidéo que vous souhaitez afficher sur la page.
-
controls : Affiche les contrôles de lecture.
<video src="video.mp4" controls ></video>Exemple : Ajoutez des boutons de lecture, pause, volume et autres options de contrôle.
-
autoplay : Lance automatiquement la vidéo.
<video src="video.mp4" autoplay ></video>Exemple : La lecture démarre dès que la page est chargée.
-
loop : Joue la vidéo en boucle.
<video src="video.mp4" loop ></video>Exemple : La vidéo redémarre automatiquement après sa fin.
-
muted : Commence la lecture sans son.
<video src="video.mp4" muted ></video>Exemple : La vidéo commence en silence par défaut.
-
poster : Image affichée avant le début de la lecture.
<video src="video.mp4" poster="thumbnail.jpg" ></video>Exemple : Ajoutez une vignette ou une image de présentation pour la vidéo.
Attributs de la balise <script>
-
src : URL du fichier JavaScript externe.
<script src="app.js" ></script>Exemple : Chargez un fichier JavaScript externe dans votre page.
-
type : Type MIME du script (généralement `text/javascript`).
<script type="text/javascript" > console.log("Bonjour !"); </script>Exemple : Bien que rarement nécessaire aujourd’hui, il spécifie le type de script.
-
async : Exécute le script de manière asynchrone.
<script src="app.js" async ></script>Exemple : Utilisez `async` pour charger le script en parallèle et l'exécuter dès qu'il est prêt.
-
defer : Retarde l’exécution du script jusqu'à la fin du chargement de la page.
<script src="app.js" defer ></script>Exemple : Les scripts `defer` sont exécutés dans l’ordre où ils apparaissent, après le chargement complet de la page.
Attributs de la balise <source>
-
src : Chemin de la source.
<source src="video.mp4" type="video/mp4" />Exemple : Spécifiez l'URL de la source média à utiliser dans un lecteur audio ou vidéo.
-
type : Type MIME de la source (ex. `image/webp`).
<source src="image.webp" type="image/webp" />Exemple : Définissez le format de la source pour s'assurer qu'elle est correctement interprétée.
-
media : Définit les conditions pour utiliser cette source (ex. `min-width: 800px`).
<source src="large-image.jpg" media="(min-width: 800px)" type="image/jpeg" />Exemple : Utilisez l'attribut `media` dans une balise `
` pour fournir des images adaptées aux différentes tailles d'écran.
Attributs de la balise <track>
-
src : URL du fichier de sous-titres.
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />Exemple : Ajoutez le chemin du fichier de sous-titres pour lier les sous-titres à une vidéo.
-
kind : Type de piste (ex. `subtitles`, `captions`).
<track src="captions.vtt" kind="captions" srclang="fr" label="Français" />Exemple : Définissez `kind="subtitles"` pour des sous-titres ou `kind="captions"` pour des légendes.
-
srclang : Langue de la piste.
<track src="subtitles.vtt" srclang="es" label="Español" />Exemple : Utilisez l'attribut `srclang` pour spécifier la langue des sous-titres (ex. `en`, `fr`, `es`).
-
label : Nom de la piste affichée.
<track src="subtitles.vtt" label="English Subtitles" />Exemple : Le `label` est affiché dans le menu des sous-titres du lecteur vidéo.
-
default : Active cette piste par défaut.
<track src="subtitles.vtt" kind="subtitles" srclang="en" default />Exemple : Ajoutez `default` pour activer automatiquement cette piste lors de la lecture.
Attributs de la balise <time>
-
datetime : Valeur date/heure de l'élément au format ISO 8601.
<time datetime="2024-12-03T14:30" > 3 décembre 2024, 14:30 </time>Exemple : Utilisez `datetime` pour rendre la date ou l'heure compréhensible par les machines, comme les moteurs de recherche.
Attributs de la balise <progress>
-
value : Valeur actuelle du progrès.
<progress value="70" max="100" > 70% </progress>Exemple : Spécifiez une valeur pour indiquer l'état actuel d'une tâche ou d'un téléchargement.
-
max : Valeur maximale de la progression.
<progress value="30" max="50" > 60% </progress>Exemple : Définissez une limite supérieure pour la progression à l'aide de `max`.
Attributs de la balise <meter>
-
value : Valeur de la mesure actuelle.
<meter value="5" min="0" max="10" ></meter>Exemple : Spécifiez la valeur actuelle de la mesure pour indiquer un niveau ou un état.
-
min : Valeur minimale.
<meter value="3" min="0" ></meter>Exemple : Utilisez `min` pour définir le début de l'échelle.
-
max : Valeur maximale.
<meter value="7" max="10" ></meter>Exemple : Utilisez `max` pour fixer la limite supérieure de l'échelle.
-
low : Valeur en dessous de laquelle la mesure est basse.
<meter value="2" low="3" ></meter>Exemple : Définissez une limite basse à l'aide de l'attribut `low`.
-
high : Valeur au-dessus de laquelle la mesure est élevée.
<meter value="8" high="7" ></meter>Exemple : Utilisez `high` pour définir une limite haute sur l'échelle.
-
optimum : Valeur optimale pour cette mesure.
<meter value="5" optimum="6" ></meter>Exemple : Utilisez `optimum` pour indiquer la valeur idéale ou recommandée.
Conclusion
HTML est la pierre angulaire de toute page web. Une maîtrise des balises de base ainsi que des concepts plus avancés est essentielle pour créer des pages web bien structurées, accessibles et performantes. En combinant ces connaissances avec des outils modernes comme CSS et JavaScript, vous serez capable de construire des expériences utilisateur riches et captivantes.