<h1>Paragraphes, sauts de ligne et lignes horizontales</h1>

<!-- Commencez par lire le texte ci-dessous, puis vous le structurerez en suivant les consignes à la fin -->

Paragraphes

L'élément HTML &lt;p&gt; représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont des éléments blocs.

Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture &lt;p&gt; (voir Omission de balises dans le tableau qui suit). Ainsi, pour modifier l'espacement entre les paragraphes, il faut utiliser la propriété CSS margin. Tout comme dans Word, il ne faut jamais insérer de paragraphes vides ou d'éléments &lt;br&gt; afin de créer un espace.

Accessibilité de l'élément &lt;p&gt;

Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.

L'utilisation de paragraphes vides (des éléments HTML &lt;p&gt; sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.

S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétés CSS comme margin pour obtenir l'effet désiré.

Sauts de ligne manuels

L'élément HTML &lt;br&gt; crée un saut de ligne (un retour chariot) dans le texte. Il a essentiellement le même effet que le raccourci clavier Maj+Entrée dans Word. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).

Attention, &lt;br&gt; ne doit pas être utilisé afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété CSS margin sur l'élément &lt;p&gt;.

Accessibilité de l'élément &lt;br&gt;

Utiliser une suite d'éléments &lt;br&gt; pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.

Lignes horizontales

L'élément HTML &lt;hr&gt; représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'une section).

Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification (séparation du contenu) et ne représente plus un élément de mise en forme. Pour insérer une ligne horizontale décorative seulement, il est préférable d'utiliser la propriété CSS border appliquée sur un titre ou un paragraphe.

Références

&lt;p&gt; : l'élément paragraphe
https://developer.mozilla.org/fr/docs/Web/HTML/Element/p
&lt;br&gt; : l'élément de saut de ligne
https://developer.mozilla.org/fr/docs/Web/HTML/Element/br
&lt;hr&gt; : l'élément de de rupture thématique (règle ou ligne horizontale)
https://developer.mozilla.org/fr/docs/Web/HTML/Element/hr

<!--
Exercice

1) Cliquez sur le bouton 'Fork' pour copier ce pen dans les vôtres (si vous avez un compte);

2) Appliquez la balise <h2> (ouvrante et fermante) aux titres suivants :

Pagragraphes
Sauts de ligne manuels
Lignes horizontales 
Références

3) Appliquez la balise <h3> (ouvrante et fermante) aux titres suivants :

Accessibilité de l'élément &lt;p&gt;
Accessibilité de l'élément &lt;br&gt;

4) Appliquez la balise <p> au début de tous les paragraphes de texte et la balise </p> à la fin de chacun;

5) Appliquez la balise <p> au début de chacune des trois références et la balise et la balise </p> à la fin de chacune;

6) Insérez une balise <br> devant chaque lien hypertexte des trois références (avant http);

7) Insérez une balise <hr> entre le dernier paragraphe et le titre <h2>Références</h2>.

Vous savez maintenant structurer un texte à l'aide de quatre éléments HTML : les titres <h1> à <h6>, <p>, <br> et <hr>!

Passez le texte en revue dans le panneau de résultat maintenant qu'il  est bien structuré.

-->






External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.