HTML

Introduction au HTML

Formation - 3. L’élément ou la balise HTML

Le langage de balisage HTML

Plus qu’un langage, le HTML (Hypertext Markup Language) est une structure de balisage à l’intérieur du DOM, le « document object model ». C’est pourquoi les spécialistes parle d’élément HTML au lieu de balise. Mais en gros, le code HTML détermine le caractère du contenu qu’il affectera à l’aide de balises. C’est-à-dire une balise d’ouverture, avant le texte ou le contenu, et une balise de fermeture à la fin du texte ou du contenu. Il suffit d’ajouter le symbole « / » (division) dans la balise pour indiquer une balise de fermeture! Comme l’exemple suivant :

<balise>Texte ou contenu</balise>

Code HTML bien formé

IMPORTANT Pourquoi? Pour indiquer au navigateur où cesse l’interprétation de la balise. Omettre de fermer la balise de caractère gras <strong> peut appliquer le style au reste de la page. Il existe toutefois des exceptions. Le paragraphe <p> par exemple, même si je le ferme toujours pour une meilleure lecture du code, se fermera de lui-même. Même chose pour les items d’une liste à puce, le <li>.

Autre contrainte, l’imbrication de balise. Tout est logique, ainsi on ne peut pas imbriquer un paragraphe à l’intérieur d’un autre paragraphe, ou encore faire chevaucher les balises. Ou même baliser une balise de type « bloc » par une balise de type « en-ligne ».

Mauvais exemples:

<p>Mon premier paragraphe <p>Mon deuxième paragraphe</p></p>

<p>Mon paragraphe en <strong>caractère gras</p></strong>

<strong><p>Mon paragraphe en caractère gras</p></strong>

Dans le deuxième exemple, la balise de type « en-ligne » de caractère gras <strong> ne peut contenir la balise de type bloc du paragraphe <p>.

Bons exemples (dit HTML bien formé):

<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>

<p><strong>Mon paragraphe en caractère gras</strong></p>

<p>Premier paragraphe

<p>Deuxième paragraphe

<ol>
  <li>Premier item
  <li>Deuxième item
  <li>Troisième item
</ol>

Éléments bloc et en-ligne

Deux catégories d’éléments HTML. Contrairement à la catégorie « en-ligne », les balises de catégorie « bloc » sont des comme des blocs empilés les uns sur les autres.

• Éléments de bloc (block-level)
  La balise de type bloc utilise la largeur totale disponible défini par les balises qui l’entourent, séparés par un saut de ligne avant et après l’élément.
  <div>, <p>...

• Éléments en ligne (ou en incise)
  La balise en-ligne occupera uniquement l’espace défini par la largeur requise par son contenu.
  <span>, <strong>...

Exemple

<p>Lorem <strong>ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Le paragraphe <p> de type « bloc » versus le caractère gras <strong> de type « en-ligne ».

Types de contenu

On regroupe généralement les balises HTML qui partagent les mêmes caractéristiques en catégorie. Outre le « flux de contenu » (Flow content), qui regroupe a peu près tout le flot du DOM et le « Phrasé » (Phrasing content), les balise de type « en-ligne » :

• Métadonnées
• Section de contenu
• Entête
• Contenu intégré (externe)
• Contenu interactif

« Les métadonnées » est un contenu qui définit la présentation ou le comportement du reste du contenu, ou qui définit la relation du document avec d’autres documents.

<base> <link> <meta> <noscript> <script> <style> <template> <title>.

La « section de contenu » est une section qui a potentiellement un entête et un résumer.

<article> <aside> <nav> <section>

L’« Entête » définit l’entête d’une section.

<h1> <h2> <h3> <h4> <h5> <h6>

Le « contenu intégré » est un contenu qui importe une ressource externe dans le document ou le contenu d’un autre vocabulaire à insérer dans le document.

<audio> <canvas> <embed> <iframe> <img> <MathML> <math> <object> <picture> <SVG> <svg> <video>

Le « contenu interactif » est un contenu spécifiquement destiné à l’interaction de l’utilisateur.

<a> <audio> <button> <details> <embed> <iframe> <img> <input> <label> < select> <textarea> <video>

Attributs

Bien que davantage HTML4, il reste une bonne douzaine d’attributs valide. Dont les plus importants dans le cadre de cette formation :

• id : Identifiant unique de l’objet;
• lang : langage (fr-FR)
• style : la plupart des styles CSS
• class : non d’une classe CSS;

  <div style="color:red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>

Références