Les éléments HTML

La base du langage de balisage hypertexte est l’élément. Les éléments HTML définissent la structure du document HTML. Pour décrire les éléments on utilise les tags HTML.

Les éléments et les tags sont souvent confus. Les tags servent à ouvrir et fermer l’objet, et l’élément comprend à la fois les tags et leur contenu.

Prenons un exemple avec le tag <h1> <h1>Titre du document est un élément, et <h1> , </h1> sont tags.

Types des éléments

Les éléments HTML sont appariés ou simples (seul). Le contenu de l’élément apparié est écrit entre le tag d’ouverture <> et le tag de fermeture </>.

Ne pas oublier la balise de fermeture! Bien que certains cependant, les éléments HTML sont correctement affichés, même sans la balise de fermeture, ne vous fiez pas à ce sujet. Cela pourrait entraîner des résultats inattendus ou des erreurs.

Les éléments vides n'ont pas de tag de fermeture. Ils peuvent être "fermés" dans le tag d'ouverture comme cela:
Les éléments vides de HTML sont: <area>,<base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source>, <track> and <wbr>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la page Web</title>
  </head>
  <body>
    <h1>Titre de la page</h1>
    <p>Premier paragraphe </p>
    <p>Deuxième paragraphe <br> où on a inséré un saut de ligne</p>
  </body>
</html>

Résultat

Dans cet exemple nous avons utilisé 4 éléments appariés:

  • L’élément <html>, qui comprend tous les éléments HTML de la page.
  • L’élément <body>, dans lequel le contenu de la page Web est stocké.
  • L’élément <p>, pour afficher un paragraphe.
  • L’élément <h1>, qui contient le titre.

Dans notre exemple, nous avons également utilisé un élément simple <br> pour déplacer une ligne.

Les éléments HTML de bloc et de ligne

Les éléments en HTML sont également divisés en de bloc et de ligne. Les éléments de blocsont appelés ceux constituant des blocs de construction de pages Web. Ils sont utilisés pour diviser le contenu d’une page Web en blocs logiques, tels que des menus, le titre de site, un bloc contenant du contenu, le "sous-sol" du site, etc. Les éléments de bloc sont écrits à partir d'une nouvelle ligne ; avant et après ces éléments, un saut de ligne est automatiquement ajouté au navigateur.

Les éléments de bloc sont <address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <footer>
      <p>Auteur: Equipe W3docs</p>
      <p><a href="info@w3docs.com">Envoyer un message à l'auteur</a>.</p>
    </footer>
  </body>
</html>

Résultat

Les parties du contenu des éléments sont marquées par les éléments de ligne. Ils n'occupent que des espaces limités par des tags, le navigateur n'ajoute pas automatiquement un saut de ligne. Les éléments <img>, <span>, <a> et d’autres sont les éléments de ligne.

Les éléments HTML imbriqués

Les éléments HTML, qui sont composés des tags appariés, peuvent soit contenir d’autres éléments, soit être eux-mêmes imbriqués dans d’autres éléments.

Dans les éléments de bloc, on peut insérer des éléments de bloc et de ligne. Dans la même ligne, vous ne pouvez insérer que d'autres éléments de ligne.

Par exemple, si vous souhaitez mettre en évidence certains mots de la phrase en gras, vous pouvez utiliser le tag <strong> apparié intégré au tag <p>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <p>Dans cette phrase <strong>cette partie</strong> est définie en gras.</p>
  </body>
</html>

Résultat

Lorsque vous insérez des tags dans d'autres éléments avec des tags, fermez les tags dans la séquence opposée à ceux dans lequel vous les avez ouverts.

Dans notre exemple, nous devons d'abord fermer le tag <strong>, puis le tag <p>.




Trouvez-vous cela utile?

Articles Associées