HTML 5 - 2 3 : Le rendu du texte avec des éléments de bloc

Bienvenue dans ce cours d'HTML5. Cette leçon couvre le rendu du texte avec les éléments de bloc. Nous allons d'abord remplacer le titre par « premiers pas » et écrire du texte. L'objectif final est de réaliser un article. Pour générer rapidement du texte de remplissage en HTML, utilisez le raccourci Emmet : tapez lorem200 puis appuyez sur Tab : VS Code insère automatiquement 200 caractères de texte aléatoire (Lorem Ipsum). Pour formater un texte trop long en plusieurs lignes lisibles, utilisez le raccourci Alt+Z qui active le retour à la ligne (word wrap).

Paragraphes et titres HTML

Créons trois textes avec lorem, lorem et lorem50 séparément. Sauvegardez et actualisez la page : vous voyez que le texte s'affiche, mais sans séparation visible entre les trois paragraphes. Même en ajoutant des espaces ou des sauts de ligne dans le code source, le navigateur ne les affiche pas. Pour créer un véritable saut de paragraphe avec un retour à la ligne, il faut utiliser la balise <p> que nous avons vue précédemment. Entourez chacun de vos trois textes par une balise <p>...</p>, sauvegardez et actualisez : vous obtenez maintenant trois paragraphes séparés et bien formatés. Le <title> placé en haut s'affiche correctement dans l'onglet du navigateur, indiquant « premiers pas ».

Pour structurer le contenu avec des titres, HTML propose six niveaux de titres : de <h1> (le plus important, le plus gros) à <h6> (le moins important, le plus petit). Ajoutons un titre principal <h1>éléments bloc</h1> au-dessus de nos paragraphes. Après sauvegarde et actualisation, le titre apparaît en gros au-dessus des articles. Ajoutons ensuite un sous-titre <h2> avec un nouveau texte aléatoire lorem5 : il s'affiche avec une taille de caractères différente, plus petite que le h1. De même, un <h3> avec lorem5 apparaît encore plus petit. Ainsi, en utilisant la hiérarchie h1, h2, h3 et au-delà, vous pouvez structurer votre contenu de manière sémantique et lisible pour le lecteur comme pour les moteurs de recherche.

En résumé

Cette leçon explique comment utiliser les éléments de bloc HTML pour bien afficher et structurer le texte sur une page web. Sans balises appropriées, les espaces et les sauts de ligne du code source n'apparaissent pas dans le navigateur. Les balises &lt;p&gt; créent des paragraphes avec des sauts de ligne visibles, tandis que les balises &lt;h1&gt; à &lt;h6&gt; créent des titres hiérarchisés du plus important au moins important.

Points clés

  • La balise &lt;p&gt; permet de créer des paragraphes avec des sauts de ligne visibles dans le navigateur
  • Les balises &lt;h1&gt; à &lt;h6&gt; définissent les titres avec des niveaux d'importance différents, &lt;h1&gt; étant le plus important et &lt;h6&gt; le moins important
  • HTML ignore automatiquement les espaces et les sauts de ligne du code source; les balises de bloc sont nécessaires pour les afficher correctement
  • L'attribut &lt;title&gt; s'affiche dans l'onglet du navigateur et n'apparaît pas sur la page elle-même
  • La taille et l'apparence des titres diminuent progressivement de &lt;h1&gt; (plus grand) à &lt;h6&gt; (plus petit)

Questions fréquentes

Pourquoi mes sauts de ligne et mes espaces multiples ne s'affichent pas sur la page?

HTML ignore les espaces et les sauts de ligne du code source. Pour créer des sauts de ligne visibles, vous devez utiliser la balise &lt;p&gt; pour les paragraphes ou les balises de titre &lt;h1&gt; à &lt;h6&gt;.

Quelle est la différence entre &lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, etc.?

&lt;h1&gt; est le titre principal et le plus important avec la plus grande taille, tandis que &lt;h6&gt; est le titre le moins important et le plus petit. Ils permettent de créer une hiérarchie visuelle et sémantique du contenu.

Comment structurer un article en HTML avec du texte et des titres?

Utilisez la balise &lt;h1&gt; pour le titre principal, puis encapsulez vos paragraphes de texte dans des balises &lt;p&gt;. Vous pouvez ajouter des sous-titres avec &lt;h2&gt;, &lt;h3&gt;, etc., selon le niveau de hiérarchie dont vous avez besoin.