J’ai demandé à chatGPT des choses assez simples pour débuter en HTML5. Globalement les réponses sont très efficaces, même si dès la première question il oublie des balises très importantes.

Quelles sont les balises principales du HTML5 ?

HTML5 est la dernière version du langage HTML (Hypertext Markup Language) utilisé pour créer des pages web. Voici quelques-unes des balises principales de HTML5 :

  1. <!DOCTYPE html> : Cette déclaration indique que le document est écrit en HTML5.
  2. <html> : La balise racine qui englobe tout le contenu de la page web.
  3. <head> : Cette section contient des informations sur la page web, telles que le titre, les métadonnées, les liens vers des feuilles de style et des scripts.
  4. <title> : Définit le titre de la page, qui apparaît dans l’onglet du navigateur.
  5. <meta> : Utilisé pour spécifier des métadonnées, comme l’encodage du document ou la description de la page.
  6. <link> : Permet de lier des fichiers externes, tels que des feuilles de style CSS.
  7. <script> : Utilisé pour incorporer du code JavaScript dans la page.
  8. <style> : Permet d’inclure des règles CSS directement dans le document.
  9. <body> : Contient le contenu visible de la page web, y compris le texte, les images, les liens, etc.
  10. <header> : Marque le début de l’en-tête de la page, qui peut contenir des éléments tels que des logos, des titres, des menus de navigation, etc.
  11. <nav> : Utilisé pour définir la zone de navigation de la page.
  12. <main> : Définit la section principale du contenu de la page.
  13. <article> : Marque le contenu autonome et significatif, tel qu’un article de blog.
  14. <section> : Utilisé pour diviser le contenu de la page en sections thématiques.
  15. <aside> : Contient du contenu auxiliaire, comme des encarts, des publicités ou des informations connexes.
  16. <footer> : Marque la fin de la page ou de la section et peut contenir des informations de pied de page.
  17. <img> : Utilisé pour insérer des images dans la page.
  18. <a> : Crée des liens hypertexte vers d’autres pages ou ressources.
  19. <ul> et <ol> : Utilisés pour créer des listes non ordonnées (à puces) et des listes ordonnées (numérotées), respectivement.
  20. <li> : Marque les éléments de liste à l’intérieur de <ul> ou <ol>.
  21. <p> : Utilisé pour créer des paragraphes de texte.
  22. <div> : Une balise générique pour diviser le contenu en blocs ou en conteneurs pour le CSS.
  23. <span> : Une balise générique pour appliquer du style ou des scripts à une partie de texte ou de contenu en ligne.
  24. <input> : Crée des éléments de formulaire, tels que des champs de texte, des cases à cocher et des boutons radio.
  25. <form> : Utilisé pour créer des formulaires qui permettent aux utilisateurs de saisir et de soumettre des données.

Ces balises constituent la base de la structure d’une page HTML5, mais il en existe bien d’autres pour répondre à divers besoins et exigences de mise en page.

Je valide, mais il manque les titres de <h1> à <h6>.

Peux-tu m’écrire ta réponse en HTML ?

(je voulais la mettre sur jenseign.com :))

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Balises principales HTML5</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <style>
        /* Styles CSS ici */
    </style>
</head>
<body>
    <header>
        <h1>Balises principales HTML5</h1>
        <!-- Autres éléments d'en-tête ici -->
    </header>
    <nav>
        <!-- Menu de navigation ici -->
    </nav>
    <main>
        <article>
            <h2>Article principal</h2>
            <p>Contenu de l'article...</p>
        </article>
        <!-- Autres sections ou articles ici -->
    </main>
    <aside>
        <!-- Contenu auxiliaire ici -->
    </aside>
    <footer>
        <p>Copyright © 2023. Tous droits réservés.</p>
    </footer>
    <ul>
        <li>Élément de liste non ordonnée 1</li>
        <li>Élément de liste non ordonnée 2</li>
    </ul>
    <ol>
        <li>Élément de liste ordonnée 1</li>
        <li>Élément de liste ordonnée 2</li>
    </ol>
    <p>Ceci est un paragraphe de texte.</p>
    <div>
        <!-- Contenu générique ici -->
    </div>
    <span>Ceci est une portion de texte en ligne.</span>
    <a href="https://www.example.com">Lien vers Example.com</a>
    <img src="image.jpg" alt="Description de l'image">
    <form action="traitement.php" method="post">
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom">
        <label for="email">Email :</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Envoyer">
    </form>
</body>
</html>
> Je valide, même si l’exemple n’explique pas vraiment avec un cas pratique. On note la présence d’un h1 et h2 🙂