Menu du cour

Les balises de base

Cette section présente les balises HTML de base pour structurer le contenu de votre page web.

Pour faire un titre de niveau 2, utilisez les balises :
<h2>Titre de niveau 2</h2>
Les balises de titre vont de <h1> (le plus important) à <h6> (le moins important).

Pour créer un paragraphe, utilisez les balises :
<p>Votre paragraphe ici.</p>

Pour insérer un saut de ligne, utilisez la balise :
<br> (c'est une balise auto-fermante, pas besoin de </br>)

Texte en italique (balises <em></em>) : met l'accent sur le texte.

Texte en gras (balises <strong></strong>) : indique une importance forte.

Texte souligné (balises <u></u>) : à utiliser avec parcimonie, peut être confondu avec un lien.

Texte barré (balises <del></del>) : indique un texte supprimé ou qui n'est plus valide.

Texte surligné (balises <mark></mark>) : met en évidence une partie du texte.

Texte_{en indice} (balises <sub></sub>) : utile pour les formules chimiques (H₂O) ou les notes de bas de page.

Texte^{en exposant} (balises <sup></sup>) : utile pour les puissances (x²) ou les références.

Texte en petit (balises <small></small>) : pour les mentions légales, le copyright, etc.

Texte en grand (balises <big></big>) : augmente la taille du texte (moins utilisé que les styles CSS).

Courte citation (balises <q></q>) :

Pour créer un lien hypertexte :
<a href="url">Texte du lien</a>
Remplacez "url" par l'adresse web de destination.

Pour un menu de navigation utiliser les balises : <nav></nav>

Pour mettre un commentaire dans le code HTML, utilisez les balises : <!-- commentaire -->

Les listes

Le HTML propose deux types de listes principales : les listes ordonnées et les listes non ordonnées.

                        
    <ol>
        <li>Premier élément</li>
        <li>Deuxième élément</li>
        <li>Troisième élément</li>
    </ol>
                        
                    

                        
    <ul>
        <li>Élément 1</li>
        <li>Élément 2</li>
        <li>Élément 3</li>
    </ul>
                        
                    

La notion de parent/enfant

En HTML, les éléments peuvent être imbriqués les uns dans les autres. On parle alors de relations parent/enfant. Comprendre ces relations est crucial pour naviguer dans la structure de votre page et pour créer des liens corrects.

Si un élément A contient un élément B, alors A est le parent de B, et B est l'enfant de A. Cette relation s'applique aussi aux dossiers et fichiers sur votre ordinateur.

Exemple : Si vous avez un dossier "mon_site" contenant un fichier "index.html", alors "mon_site" est le parent et "index.html" est l'enfant.

Pour passer du parent à l'enfant (dans un lien, par exemple) :
<a href="dossier/index.html">Ouvrir l'enfant</a>
Ici, "dossier" est un sous-dossier du dossier courant, et "index.html" est un fichier à l'intérieur de "dossier".

Pour remonter d'un niveau (de l'enfant au parent) :
<a href="../index.html">Revenir au parent</a>
../ signifie "remonter d'un niveau dans l'arborescence".

Faire un fichier téléchargable

Pour permettre aux utilisateurs de télécharger un fichier (par exemple, un fichier .zip, un document PDF, etc.), vous pouvez créer un lien hypertexte pointant vers ce fichier.

Exemple :
<a href="mon_fichier.zip">Télécharger le fichier ZIP</a>
Important : Assurez-vous que le fichier à télécharger ("mon_fichier.zip" dans cet exemple) se trouve dans le même dossier que votre fichier HTML, ou spécifiez le chemin correct vers le fichier.

Faire des liens d'ancrage

Les liens d'ancrage (ou ancres) permettent de créer des liens qui pointent vers des sections spécifiques *à l'intérieur* d'une même page. C'est très utile pour les longues pages, comme celle-ci !

Étape 1 : Définir l'ancre
Vous devez d'abord donner un identifiant unique à la section vers laquelle vous voulez pointer. Utilisez l'attribut id :
<h2 id="mon_ancre">Titre de la section</h2>
Ici, "mon_ancre" est l'identifiant unique. Choisissez des noms d'identifiants clairs et descriptifs.

Étape 2 : Créer le lien vers l'ancre
Utilisez un lien hypertexte classique, mais au lieu d'une URL, utilisez le symbole # suivi de l'identifiant de l'ancre :
<a href="#mon_ancre">Aller à la section</a>

Incruster des images

Le HTML permet d'insérer des images dans vos pages web, ce qui les rend plus attrayantes et informatives.

Image simple (<img>)

La balise <img> est utilisée pour insérer une image. C'est une balise auto-fermante.

Attributs importants :
* src : Spécifie l'URL (l'adresse) de l'image. C'est l'attribut *obligatoire*. * alt : Spécifie un texte alternatif qui sera affiché si l'image ne peut pas être chargée. C'est *très important* pour l'accessibilité et le SEO. * height : Spécifie la hauteur de l'image (en pixels ou en pourcentage). *Optionnel*, mais recommandé. * width : Spécifie la largeur de l'image (en pixels ou en pourcentage). *Optionnel*, mais recommandé.

Exemple :

                        
    <img src="mon_image.jpg" alt="Description de mon image" height="200">
                        
                    

                        
    <a href="mon_image_grande.jpg">
        <img src="mon_image_petite.jpg" alt="Description de l'image" 
        title="Cliquez pour agrandir" height="100">
    </a>
                        
                    

Image avec légende (<figure> et <figcaption>)

Pour associer une légende à une image de manière sémantique, utilisez les balises <figure> et <figcaption>.

Exemple :

                        
    <figure>
        <img src="mon_image.jpg" alt="Description de l'image" height="200">
        <figcaption>Ceci est la légende de mon image.</figcaption>
    </figure>
                        
                    

La structure de la page

Une page HTML5 bien structurée utilise des balises sémantiques pour organiser le contenu. Voici un exemple de structure typique :

* <header>: L'en-tête de la page (titre, logo, navigation principale). * <nav>: La navigation principale du site. * <main>: Le contenu principal de la page. * <article>: Un contenu autonome et réutilisable (comme un article de blog, un cours, etc.). * <section>: Une section thématique du contenu. * <aside>: Contenu lié au contenu principal, mais secondaire (barre latérale, informations complémentaires). * <footer>: Le pied de page (informations sur l'auteur, mentions légales, etc.).

La balise <nav>

La balise <nav> est un élément sémantique HTML5 utilisé pour définir un bloc de liens de navigation. Ces liens peuvent pointer vers d'autres pages du site, vers des sections de la page courante (ancres), ou vers des ressources externes.

Pourquoi utiliser <nav>?

• Sémantique : <nav> indique clairement aux navigateurs, aux moteurs de recherche et aux technologies d'assistance (comme les lecteurs d'écran) que le contenu à l'intérieur est destiné à la navigation.
• Accessibilité : Les lecteurs d'écran peuvent utiliser la balise <nav> pour aider les utilisateurs malvoyants à naviguer plus facilement sur le site. Ils peuvent, par exemple, proposer une option pour "sauter directement à la navigation principale".
• SEO (Référencement) : Les moteurs de recherche peuvent utiliser la balise <nav> pour mieux comprendre la structure de votre site et identifier les liens importants.
• Organisation du code : <nav> rend votre code HTML plus lisible et plus facile à maintenir.

Quand utiliser <nav>? Il est recommandé d'utiliser la balise <nav> pour la navigation *principale* de votre site. Cela inclut généralement :

• Le menu principal du site (comme celui en haut de cette page).
• Une table des matières.
• Une série de liens de pagination (précédent/suivant).

Il n'est *pas* recommandé d'utiliser <nav> pour :

• Des liens isolés (par exemple, un lien "Contactez-nous" dans le corps du texte).
• Des groupes de liens qui ne sont pas considérés comme de la navigation principale (par exemple, des liens vers les réseaux sociaux dans le pied de page). Pour cela, une simple `
  ` ou une liste non ordonnée (`

  `) suffisent.

  Exemple :

                      
      <nav>
          <ul>
              <li><a href="index.html">Accueil</a></li>
              <li><a href="page1.html">Page 1</a></li>
              <li><a href="page2.html">Page 2</a></li>
              <li><a href="#section-importante">Section Importante (Ancre)</a></li>
          </ul>
      </nav>
                      
                  

  Explication de l'exemple :

  • <nav>...</nav> : Encadre l'ensemble du bloc de navigation.
  • <ul>...</ul> : Une liste non ordonnée est couramment utilisée pour structurer les liens de navigation. Ce n'est *pas* obligatoire (vous pourriez utiliser des `
    `, par exemple), mais c'est une bonne pratique car cela indique qu'il s'agit d'une liste d'éléments.
  • <li>...</li> : Chaque élément de la liste représente un lien de navigation.
  • <a href="...">...</a> : Le lien hypertexte lui-même. L'attribut `href` indique la destination du lien.
  • Dans l'exemple, les trois premiers liens pointent vers d'autres pages (fictives). Le dernier lien (`#section-importante`) est une ancre qui pointe vers une section de la page courante (vous devriez avoir un élément avec `id="section-importante"` quelque part sur la page).

  Imbrication de <nav> : Il est *possible* d'imbriquer des balises <nav> (une à l'intérieur d'une autre). Cependant, cela doit être fait avec précaution et uniquement si cela a du sens sémantiquement. Par exemple, vous pourriez avoir une <nav> principale pour la navigation du site, et une <nav> secondaire à l'intérieur d'une <section> ou d'un <article> pour la navigation *à l'intérieur* de cette section/article.

Le header et le footer

<header> représente l'en-tête de la page (ou d'une section/article). Il contient généralement :

• Le titre principal (<h1>)
• Un sous-titre (<h2> - <h6>)
• Un logo
• Parfois, la navigation principale (<nav>) - comme dans cet exemple.
• D'autres éléments d'introduction, comme une courte description.

Exemple :

                    
    <header>
        <h1>Titre principal de ma page</h1>
        <p>Courte description de la page.</p>
        <nav>
            <!-- Liens de navigation -->
        </nav>
    </header>
                    
                

<footer> représente le pied de page (de la page entière, ou d'une section/article). Il contient généralement :

• Informations sur l'auteur
• Mentions légales
• Liens de contact
• Copyright
• Liens vers les réseaux sociaux
• Un lien "Retour en haut de la page"
• D'autres informations de bas de page.

Exemple :

                    
    <footer>
        <p>Copyright 2023 - Mon Site</p>
        <p><a href="contact.html">Contactez-nous</a></p>
    </footer>
                    
                

Points importants :

• Il peut y avoir *plusieurs* <header> et <footer> dans une même page. Chaque <section>, <article>, ou <aside> peut avoir son propre <header> et/ou <footer>. Cependant, il ne devrait y avoir qu'un seul <header> et <footer> *au niveau supérieur* de la page (c'est-à-dire, directement à l'intérieur de `<body>`).
• Ne confondez *pas* <header> avec les balises de titre (<h1> à <h6>). <header> est un conteneur, alors que les balises de titre définissent des titres de différents niveaux.

La balise section

La balise <section> est utilisée pour regrouper du contenu qui est thématiquement lié. Elle permet de diviser une page ou un article en différentes sections logiques, chacune ayant un sujet ou un but spécifique.

Quand utiliser <section>?

• Pour diviser un long article en chapitres ou en parties distinctes.
• Pour regrouper des éléments connexes sur une page d'accueil (par exemple, une section "À propos", une section "Services", une section "Contact").
• Pour structurer les onglets d'une interface à onglets.
• Pour délimiter une zone de commentaires sur un blog.

Points importants :

• Chaque <section> *devrait* avoir un titre (h1-h6). C'est crucial pour la sémantique et l'accessibilité. Le titre décrit le thème de la section.
• Ne pas utiliser <section> juste pour des raisons stylistiques. Si vous avez besoin d'un conteneur pour appliquer du CSS, utilisez plutôt une <div>. <section> a une signification sémantique.
• Les <section> peuvent être imbriquées (une section à l'intérieur d'une autre). Cela permet de créer une structure hiérarchique.
• Une <section> peut contenir un <article>, et un <article> peut contenir plusieurs <section>. La relation dépend du contenu.

Exemple :

                    
    <section>
        <h2>Introduction</h2>
        <p>Paragraphe d'introduction...</p>
    </section>

    <section>
        <h2>Développement</h2>
        <section> <!-- Sous-section -->
            <h3>Partie 1</h3>
            <p>...</p>
        </section>
        <section> <!-- Sous-section -->
            <h3>Partie 2</h3>
            <p>...</p>
        </section>
        </section>

    <section>
        <h2>Conclusion</h2>
        <p>Paragraphe de conclusion...</p>
    </section>
                    
                

Les balises article et aside

La balise <article> représente un contenu autonome et réutilisable. Cela signifie qu'il doit avoir du sens même s'il est extrait du reste de la page et placé ailleurs (par exemple, dans un flux RSS, sur un autre site, etc.).

Exemples typiques d'<article> :

• Un article de blog
• Un article de journal/magazine
• Un commentaire d'utilisateur
• Un widget autonome (météo, cours de la bourse)
• Un post sur un forum
• Un cours (comme c'est le cas ici !)

Points clés :

• Un <article> *devrait* avoir un titre (<h1> - <h6>).
• Un <article> peut contenir des <section>, des <header>, des <footer>, et même d'autres <article> (si cela a du sens sémantiquement).
• Si votre contenu n'est pas autonome et réutilisable, utilisez <section> ou <div> à la place.

Exemple:

                    
    <article>
        <h2>Titre de l'article</h2>
        <p>Auteur: John Doe</p>
        <p>Date de publication: 15 mars 2023</p>

        <section>
            <h3>Introduction</h3>
            <p>...</p>
        </section>
        <!-- Autres sections -->
    </article>
                    
                

La balise <aside> est utilisée pour le contenu qui est *lié* au contenu principal, mais qui est *tangentiel* ou *secondaire*. Il est souvent affiché dans une barre latérale.

Exemples typiques d'<aside> :

• Définitions de termes
• Citations
• Informations complémentaires
• Publicités (même si ce n'est pas l'idéal en termes d'accessibilité)
• Liens vers des articles connexes
• Biographie de l'auteur (dans un contexte de blog)
• Table des matières (moins courant que <nav>)

Points clés :

• Le contenu d'un <aside> doit être *en relation* avec le contenu principal. Si ce n'est pas le cas, utilisez plutôt une <div>.
• Un <aside> peut être placé *à l'intérieur* ou *à l'extérieur* d'un <article>. S'il est à l'intérieur, il doit être lié au contenu de cet article spécifique. S'il est à l'extérieur, il est généralement lié au contenu de la page entière.
• Il peut y avoir plusieurs <aside> dans une page.

Exemple (à l'intérieur d'un article) :

                    
    <article>
        <h2>Titre de l'article principal</h2>
        <p>...contenu principal...</p>

        <aside>
        <h3>Définitions</h3>
            <dl>
                <dt>Terme 1</dt>
                <dd>Définition du terme 1</dd>
                <dt>Terme 2</dt>
                <dd>Définition du terme 2</dd>
            </dl>
        </aside>
    </article>
                    
                

Exemple (à l'extérieur d'un article):

                    
    <main>
        <article>...</article>
        <article>...</article>
    </main>

    <aside>
        <h2>Articles Récents</h2>
            <ul>
    <!-- Liste des articles récents -->
            <li><a href="#">Article 1</a></li>
            <li><a href="#">Article 2</a></li>
            <li><a href="#">Article 3</a></li>
        </ul>
    </aside>
                    
                

Les balises <div> et <span>

<div> et <span> sont des balises *génériques* qui n'ont *aucune* signification sémantique propre. Elles sont utilisées pour regrouper d'autres éléments HTML, principalement à des fins de stylisation (avec CSS) ou de manipulation avec JavaScript.

Différence principale :

• <div> est un élément de type *bloc* (block-level). Il prend toute la largeur disponible et commence sur une nouvelle ligne.
• <span> est un élément de type *en ligne* (inline). Il prend seulement la largeur nécessaire à son contenu et ne commence pas sur une nouvelle ligne.

Quand utiliser <div>?

• Pour regrouper des éléments afin de leur appliquer un style commun (couleur de fond, marges, etc.).
• Pour créer des mises en page complexes (en combinaison avec CSS).
• Comme conteneur générique lorsqu'aucune autre balise sémantique (comme <section>, <article>, etc.) n'est appropriée.

Quand utiliser <span>?

• Pour appliquer un style à une *partie* d'un texte (par exemple, changer la couleur d'un mot dans un paragraphe).
• Pour cibler une partie d'un texte avec JavaScript.
• Comme conteneur générique en ligne lorsqu'aucune autre balise sémantique n'est appropriée.

Exemple de <div>:

                    
    <div style="background-color: lightblue; padding: 20px;">
        <h2>Titre dans la div</h2>
        <p>Paragraphe dans la div.</p>
        <p>Un autre paragraphe.</p>
    </div>
                    
                

Exemple de <span>:

                    
    <p>Ceci est un paragraphe avec un <span style="color: red;">mot en rouge
    </span>et un <span style="font-weight: bold;">mot en gras</span>.</p>
                    
                

Important : N'abusez pas des <div> et <span>. Utilisez toujours les balises sémantiques (<article>, <section>, <nav>, <aside>, <header>, <footer>, etc.) lorsque c'est possible. Les <div> et <span> ne doivent être utilisées que comme dernier recours, lorsque aucune autre balise n'a de sens sémantique.

La balise <main>

La balise <main> représente le contenu principal et dominant de la page web. Elle englobe le contenu directement lié au sujet central de la page, ou à la fonctionnalité centrale de l'application web. Ce contenu doit être unique à la page et ne doit pas inclure des éléments qui se répètent sur plusieurs pages (comme les barres de navigation, les en-têtes, les pieds de page, les logos, etc.).

Pourquoi utiliser <main> ?

• Accessibilité : La balise <main> joue un rôle crucial pour l'accessibilité. Les technologies d'assistance (comme les lecteurs d'écran) peuvent utiliser cette balise pour permettre aux utilisateurs de naviguer directement vers le contenu principal, en sautant les éléments répétitifs. C'est un point de repère (landmark) ARIA implicite.
• SEO (Référencement) : Bien que l'impact direct sur le SEO soit débattu, utiliser <main> contribue à une meilleure structure de la page, ce qui est généralement bénéfique pour le référencement.
• Organisation du code : <main> rend votre code HTML plus clair et plus facile à comprendre, en séparant distinctement le contenu principal du reste.

Règles d'utilisation importantes :

• Unicité : Il ne doit y avoir qu'une *seule* balise <main> visible par page. Si vous avez plusieurs balises `<main>`, toutes sauf une *doivent* être masquées avec l'attribut `hidden`. En pratique, il est fortement recommandé de n'avoir qu'une seule balise `<main>` par page.
• Pas d'imbrication : La balise <main> ne doit *pas* être imbriquée dans une balise <article>, <aside>, <footer>, <header>, ou <nav>. Ces éléments sont considérés comme étant en dehors du contenu principal.
• Contenu : <main> peut contenir des <section>, <article>, <div>, des titres (<h1>-<h6>), des paragraphes (<p>), des images (<img>), et tout autre élément qui fait partie du contenu principal.

Exemple :

                        
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <!-- ... -->
    </head>
    <body>
        <header>
            <!-- En-tête (logo, navigation, etc.) -->
        </header>
                
        <main>
            <article>
                <h1>Titre de l'article principal</h1>
                <p>Contenu de l'article...</p>
            </article>
        </main>

        <aside>
            <!-- Contenu secondaire (barre latérale, etc.) -->
        </aside>
                
        <footer>
            <!-- Pied de page -->
        </footer>
    </body>
    </html>
                        
                    

Dans cet exemple, tout le contenu à l'intérieur de <main> (l'article avec son titre et son paragraphe) constitue le contenu principal de la page. L'en-tête, la barre latérale et le pied de page sont exclus de <main>.

<main> vs. <div> :

Ne confondez pas <main> avec une simple <div>. <main> a une signification sémantique précise (le contenu principal), tandis que <div> est un conteneur générique sans signification particulière. Utilisez <main> pour délimiter le contenu principal de votre page, et utilisez <div> pour le regroupement logique et stylistique à l'intérieur ou à l'extérieur de <main>, si aucune autre balise sémantique n'est plus appropriée.

Les balises <code> et <pre>

Les balises <code> et <pre> sont deux éléments HTML utilisés pour afficher du code informatique, mais elles ont des usages et des comportements différents. Elles sont très souvent utilisées *ensemble*, mais il est important de comprendre leurs rôles individuels.

                            
    <pre>
        <code>
    function maFonction() {
        console.log("Hello, world!");
    }
        </code>
    </pre>
                            
                        

                            
    function maFonction() {
        console.log("Hello, world!");
    }
                            
                        

                            
    <pre>
        <code>
    &lt;p&gt;Ceci est un paragraphe.&lt;/p&gt;
        </code>
    </pre>
                            
                        

                            
    <p>Ceci est un paragraphe.</p>
                            
                        

La balise <form>

La balise <form> est un élément HTML fondamental qui permet de créer des formulaires interactifs sur une page web. Les formulaires permettent aux utilisateurs de saisir des données (texte, sélections, fichiers, etc.) et de les envoyer à un serveur pour traitement. C'est la base de l'interaction utilisateur pour de nombreuses applications web (inscription, connexion, commentaires, recherche, etc.).

Structure de base d'un formulaire :

                    
    <form action="url_de_traitement" method="post">
        <!-- Éléments du formulaire (inputs, labels, etc.) -->
        <button type="submit">Envoyer</button>
    </form>
                    
                

Attributs essentiels de <form> :

• action (obligatoire) : Spécifie l'URL à laquelle les données du formulaire seront envoyées pour être traitées. Cela peut être une URL absolue (vers un autre site) ou relative (vers une autre page du même site). Si l'attribut `action` est absent, les données sont envoyées à la page courante.
• method (obligatoire) : Spécifie la méthode HTTP utilisée pour envoyer les données. Les deux valeurs les plus courantes sont :
  • get : Les données du formulaire sont ajoutées à l'URL (sous forme de paramètres de requête). Visible dans la barre d'adresse du navigateur. Utilisé pour les formulaires qui *récupèrent* des données (par exemple, un formulaire de recherche). La quantité de données est limitée (la longueur de l'URL est limitée).
  • post : Les données du formulaire sont envoyées dans le corps de la requête HTTP. Invisible dans la barre d'adresse. Utilisé pour les formulaires qui *modifient* des données (par exemple, inscription, ajout d'un commentaire, envoi d'un fichier). Pas de limite de taille. *Plus sécurisé* que `get` pour les données sensibles.
  Si l'attribut `method` est absent, la méthode `get` est utilisée par défaut.
• enctype (important pour l'envoi de fichiers) : Spécifie comment les données du formulaire doivent être encodées avant d'être envoyées au serveur. Les valeurs les plus courantes sont :
  • `application/x-www-form-urlencoded` (valeur par défaut): Les données sont encodées en paires clé-valeur, avec les caractères spéciaux encodés en pourcentages. Convient pour la plupart des formulaires.
  • `multipart/form-data`: *Obligatoire* si le formulaire contient un champ d'envoi de fichier (`<input type="file">`). Les données sont envoyées en plusieurs parties, une pour chaque champ du formulaire, et une partie distincte pour chaque fichier.
  • `text/plain`: Les données sont envoyées sous forme de texte brut, sans encodage particulier. Rarement utilisé, principalement pour le débogage.
• target (optionnel) : Spécifie où afficher la réponse du serveur après l'envoi du formulaire (comme pour les liens `<a>`). Les valeurs possibles sont :
  • `_self` (par défaut) : Ouvre la réponse dans le même onglet/fenêtre.
  • `_blank` : Ouvre la réponse dans un nouvel onglet/fenêtre.
  • `_parent` : Ouvre la réponse dans le cadre parent (si le formulaire est dans un `iframe`).
  • `_top` : Ouvre la réponse dans la fenêtre entière (supprime tous les cadres).
  • *nom d'un iframe* : Ouvre la réponse dans l'iframe spécifié.
• autocomplete (optionnel) : Indique si le navigateur doit activer l'autocomplétion pour le formulaire (proposer des valeurs précédemment saisies). Les valeurs possibles sont `on` (activé) et `off` (désactivé).
• novalidate (optionnel) : Attribut booléen. S'il est présent, le navigateur *n'effectuera pas* la validation HTML5 standard du formulaire (vérification des champs requis, des types de données, etc.) avant l'envoi. Utile pour le débogage ou si vous utilisez votre propre validation JavaScript.

Éléments courants à l'intérieur d'un formulaire :

• <input> : L'élément le plus polyvalent. Permet de créer différents types de champs de saisie : texte, mot de passe, email, date, nombre, case à cocher, bouton radio, fichier, etc. Le type est défini par l'attribut `type`.
• <label> : Associe un texte descriptif à un champ de formulaire. *Très important* pour l'accessibilité. Utilisez l'attribut `for` du `<label>` pour le lier à l'attribut `id` du champ correspondant.
• <textarea> : Champ de texte multiligne.
• <select> : Liste déroulante (menu de sélection).
• <option> : Option d'une liste déroulante (à l'intérieur de <select>).
• <button> : Bouton. Utilisé pour soumettre le formulaire (`type="submit"`), le réinitialiser (`type="reset"`), ou exécuter une action JavaScript (`type="button"`).
• <fieldset> : Regroupe des champs de formulaire apparentés.
• <legend> : Définit une légende pour un <fieldset>.
• <output> : Affiche le résultat d'un calcul (généralement effectué avec JavaScript).

Exemple de formulaire complet :

                    
    <form action="/inscription" method="post">
        <fieldset>
            <legend>Informations personnelles</legend>
            
            <div>
                <label for="nom">Nom :</label>
                <input type="text" id="nom" name="nom" required>
            </div>
            
            <div>
                <label for="email">Email :</label>
                <input type="email" id="email" name="email" required>
            </div>
            
            <div>
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="5" cols="30">
                </textarea>
            </div>
            
            
            <div>
                <label for="fichier">Fichier :</label>
                <input type="file" id="fichier" name="fichier">
            </div>
            
            <div>
                <label for="pays">Pays</label>
                <select name="pays" id="pays">
                    <option value="france">France</option>
                    <option value="belgique">Belgique</option>
                    <option value="canada">Canada</option>
                    <option value="suisse">Suisse</option>
                </select>
            </div>
            
            <div>
                <p>Quel langages connaissez-vous ?</p>
                <input type="checkbox" id="html" name="html" value="HTML">
                <label for="html">HTML</label><br>
                <input type="checkbox" id="css" name="css" value="CSS">
                <label for="css">CSS</label><br>
                <input type="checkbox" id="js" name="js" value="JS">
                <label for="js">JavaScript</label><br>
            </div>
                    
            <div>
                <p>Quel tranche d'âge avez-vous ?</p>
                <input type="radio" id="age1" name="age" value="18-25">
                <label for="age1">18-25</label><br>
                <input type="radio" id="age2" name="age" value="26-35">
                <label for="age2">26-35</label><br>
                <input type="radio" id="age3" name="age" value="36+">
                <label for="age3">36+</label><br><br>
            </div>
        </fieldset>
            
        <button type="submit">S'inscrire</button>
        <button type="reset">Réinitialiser</button>
    </form>
                    
                

Points clés de cet exemple :

• action="/inscription" : Les données seront envoyées à la page "/inscription" (chemin relatif).
• method="post" : La méthode POST est utilisée (appropriée pour une inscription).
• <fieldset> et <legend> : Regroupent les champs liés aux informations personnelles.
• <div>: Utilisé pour regrouper un label et son input.
• <label for="..."> et <input id="..."> : Les attributs `for` et `id` sont liés, améliorant l'accessibilité.
• <input type="text"> : Champ de texte simple.
• <input type="email"> : Champ de texte spécifique pour une adresse email (avec validation HTML5 de base).
• required : Attribut booléen qui rend les champs obligatoires (validation HTML5 de base).
• <textarea>: Pour un message.
• <input type="file">: Pour l'envoie de fichier.
• <select> et <option>: Pour faire des listes.
• <input type="checkbox">: Pour faire des cases à cocher.
• <input type="radio">: Pour faire des boutons radios.
• <button type="submit"> : Bouton pour soumettre le formulaire.
• <button type="reset"> : Bouton pour réinitialiser le formulaire.

Validation HTML5 :

Les navigateurs modernes offrent une validation de formulaire HTML5 de base *avant* l'envoi des données au serveur. Cette validation est basée sur les attributs des champs (comme `required`, `type="email"`, `min`, `max`, `pattern`, etc.). C'est une première couche de vérification, mais elle ne remplace *pas* une validation côté serveur (qui est *toujours* nécessaire pour la sécurité et l'intégrité des données).

Traitement des données du formulaire :

Le code HTML du formulaire ne fait *que* collecter les données. Pour *traiter* ces données (les enregistrer dans une base de données, envoyer un email, etc.), vous aurez besoin d'un langage de programmation côté serveur, comme PHP, Python, Node.js, Java, Ruby, etc. Le fichier spécifié dans l'attribut `action` du formulaire contiendra le code serveur qui effectuera le traitement.

Exemple de formulaire:

Les balises <audio> et <video>

HTML5 a introduit les balises <audio> et <video> pour intégrer directement des contenus multimédias dans les pages web, sans avoir recours à des plugins externes (comme Flash). Ces balises offrent un contrôle natif sur la lecture, le volume, etc., et améliorent considérablement l'accessibilité et la compatibilité multiplateforme.

                        
    <audio controls src="music/music.mp3"></audio>
                        
                    

                        
    <audio controls>
        <source src="music/music.mp3" type="audio/mpeg">
        <source src="music/music.ogg" type="audio/ogg">
    </audio>
                        
                    

                        
    <video controls width="500" height="300">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
    </video>
                        
                    

                        
    <video controls width="500" height="300" poster="apercu.jpg">
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
    </video>
                        
                    

                        
    <video controls width="500" height="300">
        <source src="video.mp4" type="video/mp4">
        <track src="sous-titres.vtt" kind="subtitles" srclang="fr" label="Français">
        <track src="chapters.vtt" kind="chapters" srclang="en" label="Chapters">
    </video>
                        
                    

La balise <table> et la création de tableaux en HTML

La balise <table> est l'élément fondamental pour créer des tableaux en HTML. Un tableau permet d'organiser des données en lignes et en colonnes, ce qui est idéal pour présenter des informations tabulaires (résultats sportifs, statistiques, horaires, etc.). Il est *crucial* d'utiliser les tableaux uniquement pour des *données tabulaires*, et non pour la mise en page (ce qui était une mauvaise pratique courante avant l'avènement de CSS).

Structure de base d'un tableau :

                    
    <table>
        <caption>Titre du tableau (optionnel)</caption>
        <thead>
            <tr>
                <th>En-tête de colonne 1</th>
                <th>En-tête de colonne 2</th>
                <!-- ... autres en-têtes de colonnes ... -->
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Donnée ligne 1, colonne 1</td>
                <td>Donnée ligne 1, colonne 2</td>
                <!-- ... autres données de la ligne 1 ... -->
            </tr>
            <tr>
                <td>Donnée ligne 2, colonne 1</td>
                <td>Donnée ligne 2, colonne 2</td>
                <!-- ... autres données de la ligne 2 ... -->
            </tr>
            <!-- ... autres lignes ... -->
        </tbody>
        <tfoot>
            <tr>
                <td>Pied de tableau, colonne 1</td>
                <td>Pied de tableau, colonne 2</td>
                <!-- ... autres données du pied de tableau ...-->
            </tr>
        </tfoot>
    </table>
                    
                

Éléments clés :

• <table> : L'élément racine du tableau. Tous les autres éléments du tableau sont contenus à l'intérieur de <table> et </table>.
• <caption> (optionnel) : Définit un titre ou une légende pour le tableau. Il doit être placé *immédiatement après* la balise <table> ouvrante. Il est important pour l'accessibilité et la compréhension du tableau.
• <thead> (optionnel, mais fortement recommandé) : Définit l'en-tête du tableau (la ligne d'en-têtes des colonnes).
• <tbody> (optionnel, mais fortement recommandé) : Définit le corps principal du tableau (les lignes de données).
• <tfoot> (optionnel) : Définit le pied du tableau (une ligne récapitulative, par exemple, avec des totaux).
• <tr> : Définit une *ligne* (table row) du tableau.
• <th> : Définit une *cellule d'en-tête* (table header). Utilisé à l'intérieur de <thead> (et parfois aussi dans la première colonne pour des en-têtes de lignes). Le texte à l'intérieur de <th> est généralement affiché en gras et centré.
• <td> : Définit une *cellule de données* (table data). Utilisé à l'intérieur de <tbody> et <tfoot>.
• <caption> : Définit un titre au tableau.

Exemple: :

                    
    <table style="border-collapse: collapse;">
        <caption>Exemple de tableau</caption>
        <thead>
            <tr>
                <th style="border: 1px solid black;" scope="col">Nom</th>
                <th style="border: 1px solid black;" scope="col">Prénom</th>
                <th style="border: 1px solid black;" scope="col">Âge</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="border: 1px solid black;">Melin</td>
                <td style="border: 1px solid black;">George</td>
                <td style="border: 1px solid black;">30 ans</td>
            </tr>
            <tr>
                <td style="border: 1px solid black;">Poucin</td>
                <td style="border: 1px solid black;">Catherine</td>
                <td style="border: 1px solid black;">25 ans</td>
            </tr>
        </tbody>
    </table>
                    
                

Explication du code amélioré :

• `style="border-collapse: collapse;"` : Appliqué directement sur la balise <table>. C'est la manière la plus simple de fusionner les bordures des cellules. Dans un vrai projet, vous mettriez ce style dans un fichier CSS externe.
• <thead> et <tbody> : Ajout de ces balises pour une meilleure structure sémantique.
• scope="col"` : Ajouté aux <th> pour indiquer que ces cellules sont des en-têtes de colonnes. Crucial pour l'accessibilité.
• style="border: 1px solid black;"` : Appliqué à *chaque* <td> et <th>. Encore une fois, dans un vrai projet.

                    
    <table style="border-collapse: collapse; border: 1px solid black;">
        <tr>
            <th style="border: 1px solid black;">Mois</th>
            <th style="border: 1px solid black;" colspan="2">Ventes</th> 
            <!-- Cette cellule s'étend sur 2 colonnes -->
        </tr>
        <tr>
            <td style="border: 1px solid black;">Janvier</td>
            <td style="border: 1px solid black;">Produit A</td>
            <td style="border: 1px solid black;">Produit B</td>
        </tr>
        <tr>
            <td style="border: 1px solid black;">Février</td>
            <td style="border: 1px solid black;">Produit A</td>
            <td style="border: 1px solid black;">Produit B</td>
        </tr>
    </table>
                    
                

                    
    <table style="border-collapse: collapse; border: 1px solid black;">
        <tr>
            <th style="border: 1px solid black;" rowspan="2">Groupe</th> 
            <!-- Cette cellule s'étend sur 2 lignes -->
            <th style="border: 1px solid black;">Membre 1</th>
            <th style="border: 1px solid black;">Membre 2</th>
        </tr>
        <tr>
            
            <td style="border: 1px solid black;">Alice</td>
            <td style="border: 1px solid black;">Bob</td>
        </tr>
        <tr>
            <th style="border: 1px solid black;">Groupe 2</th>
            <td style="border: 1px solid black;">Charlie</td>
            <td style="border: 1px solid black;">David</td>
        </tr>
    </table>