2.3 HTML élements type Block et Inline

18 octobre 2018

HTML a 2 principaux types d’éléments

En HTML, vous rencontrerez principalement 2 types d’éléments HTML :

élements de type block comme :
- paragraphes <p>
- listes : unordered (non ordonnée – avec des points) <ul> or ordered (ordonnées – avec des nombres) <ol>
- headings (titres) : du 1er niveau <h1> au 6th level <h6>
- articles <article>
- sections <section>
- guillemets <blockquote>
élements de type inline comme :
- liens <a>
- mots accentués (mis en emphase) <em>
- mots importants <strong>
- petites citations <q>
- abréviations <abbr>

Les éléments de bloc sont destinés à structurer les principales parties de votre page en divisant votre contenu en blocs cohérents.

Les éléments en ligne sont destinés à différencier une partie d’un texte, à lui donner une fonction ou une signification particulière. Les éléments en ligne comprennent généralement un seul ou quelques mots.

<p>Avez-vous vu cette <a href="https://www.youtube.com">incroyable vidéo</a> sur YouTube ?</p>

Balises d’ouverture et de fermeture

Tous les éléments de type bloc ont des balises d’ouverture et de fermeture.

Par conséquent, les éléments auto-englobants sont des éléments en ligne, tout simplement parce que leur syntaxe ne leur permet pas de contenir d’autres éléments HTML.

	Possède des balises d’ouverture et de fermeture	Auto-englobant
éléments de type Block	`<p>` `</p>` `<ul>` `</ul>` `<ol>` `</ol>`	Impossible
éléments de type Inline	`<a>` `</a>` `<strong>` `</strong>` `<em>` `</em>`	`<input>` `<br>` `<img>`

Autres types d’éléments HTML

Il existe plusieurs exceptions aux éléments block / inline, mais celles que vous rencontrerez le plus souvent sont les suivantes :

list items – élément de liste – <li>
table, table rows, table cells – tableau, rangées de tableau, cellules de tableau – respectivement <table>, <tr> et <td>