Aller au contenu

HTML Langage

Le HTML permet de décrire des données. Il n’a pas été créé pour définir le rendu visuel (c'est le rôle des CSS) mais pour définir la structure et organiser le contenu d’un document.

Le document HTML doit permettre l’accessibilité des données qu’il contient, toutes les pages web ne sont pas forcément affichées par un navigateur ! (imprimante, lecteur d’écran, service web, etc.).

Un fichier HTML est un fichier texte édité avec un simple éditeur de texte. Son extension est .html.

Le HTML utilise des balises pour décrire les données qu’il contient. Une balise est formée de 2 tags, un tag ouvrant et un tag fermant.

Exemple pour créer un paragraphe

<p>Le texte du paragraphe est ici.</p>

Le HTML est le code source de la page.

Règles d’écriture#

  • Écrire en minuscule
  • Respecter la structure HTML
  • Choisir la bonne sémantique
    • pour définir le rôle, pas la mise en forme
    • ex: un texte peut-être un… texte <p>, un titre <h1>, un élément de liste (une puce) <li>, un lien <a>, une date <time>, une adresse <address>, etc.
  • Ne pas utiliser les anciennes balises de mise en forme
    • comme <center>, <font>, <br>, etc.
  • Fermer les balises ouvrantes
    • ex: <p>blabla</p> ou <strong>bla</strong>
    • sauf exceptions: <img>, <meta>, <link>, <input>, <hr>
  • Les balises peuvent être imbriquées
    • en respectant l’ordre d'ouverture
    • ex: <p>texte<strong>important</strong> du paragraphe</p>
  • Les balises ont des attributs
    • ce sont les métadonnées d’un élément
    • toujours dans le tag ouvrant
    • de la forme <p attribut="valeur">
    • certains attributs sont obligatoires. ex: un lien <a href="http://www.google.fr">lien vers google</a> définit obligatoirement l’attribut href qui précise la destination du lien
    • plusieurs attributs par élément possible. ex: <img src="" alt="">
  • Certaines règles particulières (au cas par cas):
    • pas de balises de type block dans d’autres balises block (sauf <div>)
    • les <li> obligatoirement dans <ul>, et <ul> ne contient uniquement que des <li>
    • etc.
  • Les commentaires utilisent une syntaxe particulière : <!-- Contenu du commentaire -->

Conformité du document#

Un outil proposé par le W3C permet de valider la syntaxe HTML d’une page : http://validator.w3.org

Vous pouvez également installer l’extension W3C Web Validator pour Visual Studio Code.