<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
</body>
</html>Résumé : Une page HTML commence par une structure de base comprenant la déclaration <!DOCTYPE html>, suivie des balises <html>, <head> et <body>. Cette structure permet d’organiser le contenu et d’y intégrer les métadonnées, les scripts, les feuilles de style et les éléments visibles par l’utilisateur.
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>Résumé : Les balises de titre <h1> à <h6> permettent de structurer hiérarchiquement le contenu d’une page HTML. Elles indiquent l’importance des sections et sont essentielles pour l’accessibilité et le référencement naturel (SEO).
<p>Ceci est un paragraphe.</p>
<strong>Texte en gras</strong>
<em>Texte en italique</em>
<mark>Texte surligné</mark>Résumé : HTML propose différentes balises pour structurer et mettre en forme le texte, comme <p> pour les paragraphes, <strong> pour le texte important, <em> pour l’emphase, <mark> pour surligner un texte, ou encore <br> pour les sauts de ligne. Ces éléments permettent de donner du sens au contenu avant d’en définir l’apparence via le CSS.
<p>Première ligne.<br>Seconde ligne après un saut.</p>
<hr>
<p>Texte après une ligne de séparation.</p>Résumé : L’élément <br> permet d’insérer un saut de ligne manuel dans un texte, sans créer un nouveau paragraphe. Il est utile pour forcer un retour à la ligne à l’intérieur d’un bloc. L’élément <hr>, quant à lui, crée une ligne horizontale servant à séparer visuellement les sections d’un contenu. Ces deux éléments sont auto-fermants et ne contiennent pas de contenu.
<!-- Lien interne vers un site externe-->
<a href="https://exemple.com">Lien externe</a>
<!-- Lien interne vers une page dans le même dossier -->
<a href="page.extension">Cliquez ici</a>
<!-- Lien interne vers une page dans sous-dossier -->
<a href="nom_du_sous_dossier/page.extension">Cliquez ici</a>
<!-- Lien interne vers une page dans un dossier parent -->
<a href="../page.extension">Cliquez ici</a>
Résumé : L’élément <a> est utilisé pour créer des liens hypertextes. Grâce à son attribut href, il permet de naviguer vers une autre page, un fichier, une section de la même page ou une ressource externe. C’est un élément fondamental de la navigation web.
<img src="image.jpg" alt="Une image">
<video controls><source src="video.mp4" type="video/mp4"></video>
<audio controls><source src="audio.mp3" type="audio/mp3"></audio>Résumé : L’élément <img> permet d’afficher des images sur une page web. Il nécessite l’attribut src pour la source et alt pour une description alternative. Les balises <audio> et <video> permettent d’intégrer des contenus multimédias comme du son ou de la vidéo.
<ul>// Liste de non-ordonné
<li>Élément 1</li>
<li>Élément 2</li>
</ul>
<ol>// Liste de ordonné
<li>Premier</li>
<li>Deuxième</li>
</ol>
<dl> // Liste de définition
<dt>Terme 1</dt>
<dd>Défnition du terme</dd>
<dt>Terme 2</dt>
<dd>Défnition du terme</dd>
</dl>Résumé : HTML permet de créer des listes non ordonnées avec <ul>, des listes ordonnées avec <ol> et des listes de définitions avec <dl>. Les éléments des listes sont définis à l’aide de <li>, <dt> et <dd>, selon le type de liste utilisée.
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
</tr>
</table>Résumé : L’élément <table> permet de représenter des données tabulaires. Il se compose de lignes <tr>, de cellules <td> et d’en-têtes <th>. On peut également structurer le tableau avec <thead>, <tbody> et <tfoot> pour une meilleure lisibilité et accessibilité.
<div>Contenu ici</div>Résumé : L’élément <div> est un conteneur générique en HTML. Il ne représente rien de particulier visuellement, mais il sert à regrouper et structurer des blocs de contenu. Il est souvent utilisé avec du CSS ou JavaScript pour le style ou le comportement. C’est l’un des éléments les plus utilisés pour la mise en page.
<p>Ceci est un <span>mot mis en valeur</span> dans une phrase.</p>Résumé : L’élément <span> est un conteneur en ligne utilisé pour cibler une portion de texte ou un petit groupe d’éléments dans une phrase. Il ne modifie pas le rendu par défaut, mais il est très utile pour appliquer des styles CSS ou manipuler le contenu avec JavaScript.
<section>
<h2>Nos services</h2>
<p>Description des services proposés par l'entreprise.</p>
</section>Résumé : La balise <section> permet de regrouper un ensemble de contenu thématiquement lié. Elle est souvent utilisée pour diviser une page en différentes parties logiques, chacune avec son propre titre. Elle apporte une meilleure structure sémantique au document.
<article>
<h2>Titre d’un article</h2>
<p>Contenu indépendant qui peut être partagé ou syndiqué, comme un billet de blog ou une actualité.</p>
</article>Résumé : L’élément <article> est utilisé pour des contenus autonomes, pouvant exister indépendamment du reste de la page. Cela inclut les articles de blog, les actualités, les commentaires ou tout autre contenu réutilisable ou partageable.
<form method="post">
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<button type="submit">Envoyer</button>
</form>Résumé : Les formulaires, créés avec la balise <form>, servent à recueillir des données utilisateur. Ils utilisent des champs comme <input>, <textarea>, <select> et des boutons pour envoyer les informations. Ces éléments permettent d’interagir avec un site web de manière dynamique.
<details>
<summary>Afficher plus d'informations</summary>
<p>Voici du contenu supplémentaire qui peut être affiché ou masqué.</p>
</details>Résumé : Les balises <details> et <summary> permettent de créer des zones de contenu déroulantes. L’élément <summary> agit comme un titre cliquable, et le contenu à l’intérieur de <details> se développe ou se replie. C’est une solution simple pour afficher des contenus supplémentaires sans JavaScript.