HTML Premiers pas - Leçon 2 - Les balises p, div et leurs différences. La balise br
Dans la leçon précédente, nous avons créé notre premier document HTML, ce qui signifie que vous savez déjà que nous écrivons le code HTML dans un éditeur de texte et que nous regardons les changements dans un navigateur en actualisant la page (généralement avec la touche F5).
Dans cette leçon, nous allons continuer à travailler avec du texte et utiliser les balises pour entourer du texte : span, p, div. Nous examinerons également la balise br.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
</body>
</html>
Ceci est notre code avec lequel nous allons travailler.
Ajoutons les lignes suivantes.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<p>Première ligne dans une balise P</p>
<p>Deuxième ligne dans une balise P</p>
<div>Première ligne dans une balise DIV</div>
<div>Deuxième ligne dans une balise DIV</div>
</body>
</html>
Si vous ouvrez ce document dans un navigateur, vous verrez que les balises p affichent les phrases sur différentes lignes, mais il y a une différence. Mon navigateur applique par défaut une marge en haut et en bas à la balise P, tandis que pour la balise div, les lignes sont collées les unes aux autres. En effet, p est une balise de paragraphe de texte, alors que div est une balise de bloc, une zone. Donc, si nous avons besoin d'une balise pour du texte, nous utiliserons la balise P, mais si nous voulons définir une zone spécifique, par exemple pour y appliquer une couleur de fond ou des bordures, nous utilisons la balise DIV.
Si un site contient du texte, celui-ci DOIT être dans une balise p ou h1-h6, sauf si ce texte est utilitaire, c’est-à-dire qu’il sert à la mise en forme de la page. Ainsi, le texte devrait ressembler à ceci :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<div>
<p>Première ligne dans une balise P</p>
<p>Deuxième ligne dans une balise P</p>
</div>
</body>
</html>
Ainsi, nous avons la séquence body>div>p. Retenez, il ne doit pas y avoir de balise div à l’intérieur d’une balise p, body>p>div est incorrect.
Voyons maintenant comment forcer un saut de ligne. Il arrive que notre paragraphe soit très long, nous avons alors le choix de le diviser en plusieurs paragraphes ou d’ajouter une balise de saut de ligne br. La balise <br /> est une balise auto-fermante, c’est pourquoi nous mettons une barre oblique avant le chevron fermant.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<div>
<p>Le langage HTML a été développé par le scientifique britannique Tim Berners-Lee entre 1989 et 1991 au Conseil européen pour la recherche nucléaire à Genève (Suisse). HTML a été créé comme un langage d’échange de documentation scientifique et technique, adapté aux personnes n’étant pas des spécialistes de la mise en page. HTML a réussi à résoudre la complexité de SGML en définissant un petit ensemble d’éléments structurels et sémantiques — descripteurs. Les descripteurs sont souvent appelés « balises ». Avec HTML, il est facile de créer un document relativement simple mais joliment formaté. Outre la simplification de la structure du document, HTML a introduit le support de l’hypertexte. Les fonctionnalités multimédia ont été ajoutées plus tard. À l’origine, le langage HTML était conçu comme un moyen de structurer et formater les documents sans les lier aux moyens de rendu (affichage). Idéalement, le texte avec balisage HTML devait pouvoir être rendu sans déformations stylistiques et structurelles sur différents matériels (écran couleur d’un ordinateur moderne, écran monochrome d’un organiseur, écran de taille limitée d’un téléphone mobile ou d’un dispositif, et programmes de synthèse vocale). Cependant, l’utilisation actuelle du HTML est très éloignée de son objectif initial. Par exemple, la balise <TABLE>, utilisée plusieurs fois pour formater la page que vous lisez actuellement, est destinée à créer des tableaux simples dans les documents, mais comme vous pouvez le constater, il n’y a pas un seul tableau ici. Au fil du temps, l’idée principale de portabilité du HTML a été quelque peu sacrifiée au profit des besoins modernes en matière de multimédia et de mise en forme graphique.</p>
</div>
</body>
</html>
La ligne est devenue trop longue, si nous la divisons dans le document texte, cela ne changera rien dans le HTML :
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<div>
<p>Le langage HTML a été développé par le scientifique britannique Tim Berners-Lee entre 1989 et 1991 au Conseil européen pour la recherche nucléaire à Genève (Suisse).
HTML a été créé comme un langage d’échange de documentation scientifique et technique, adapté aux personnes n’étant pas des spécialistes de la mise en page. HTML a réussi à résoudre la complexité de SGML en définissant un petit ensemble d’éléments structurels et sémantiques — descripteurs.
Les descripteurs sont souvent appelés « balises ». Avec HTML, il est facile de créer un document relativement simple mais joliment formaté. Outre la simplification de la structure du document, HTML a introduit le support de l’hypertexte. Les fonctionnalités multimédia ont été ajoutées plus tard. À l’origine, le langage HTML était conçu comme un moyen de structurer et formater les documents sans les lier aux moyens de rendu (affichage).
Idéalement, le texte avec balisage HTML devait pouvoir être rendu sans déformations stylistiques et structurelles sur différents matériels (écran couleur d’un ordinateur moderne, écran monochrome d’un organiseur, écran de taille limitée d’un téléphone mobile ou d’un dispositif, et programmes de synthèse vocale). Cependant, l’utilisation actuelle du HTML est très éloignée de son objectif initial. Par exemple, la balise <TABLE>, utilisée plusieurs fois pour formater la page que vous lisez actuellement, est destinée à créer des tableaux simples dans les documents, mais comme vous pouvez le constater, il n’y a pas un seul tableau ici.
Au fil du temps, l’idée principale de portabilité du HTML a été quelque peu sacrifiée au profit des besoins modernes en matière de multimédia et de mise en forme graphique.</p>
</div>
</body>
</html>
Cela ne nous sauvera pas, dans le navigateur rien ne changera et ici la balise <br /> vient à notre secours. Ajoutons-la à la fin de chaque ligne.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<div>
<p>Le langage HTML a été développé par le scientifique britannique Tim Berners-Lee entre 1989 et 1991 au Conseil européen pour la recherche nucléaire à Genève (Suisse).<br />
HTML a été créé comme un langage d’échange de documentation scientifique et technique, adapté aux personnes n’étant pas des spécialistes de la mise en page.<br />
HTML a réussi à résoudre la complexité de SGML en définissant un petit ensemble d’éléments structurels et sémantiques — descripteurs.<br />
Les descripteurs sont souvent appelés « balises ». Avec HTML, il est facile de créer un document relativement simple mais joliment formaté.<br />
Outre la simplification de la structure du document, HTML a introduit le support de l’hypertexte.<br />
Les fonctionnalités multimédia ont été ajoutées plus tard.<br />
</p>
<p>
À l’origine, le langage HTML était conçu comme un moyen de structurer et formater les documents sans les lier aux moyens de rendu (affichage).<br />
Idéalement, le texte avec balisage HTML devait pouvoir être rendu sans déformations stylistiques et structurelles sur différents matériels (écran couleur d’un ordinateur moderne, écran monochrome d’un organiseur, écran de taille limitée d’un téléphone mobile ou d’un dispositif, et programmes de synthèse vocale).<br />
Cependant, l’utilisation actuelle du HTML est très éloignée de son objectif initial. Par exemple, la balise, utilisée plusieurs fois pour formater la page que vous lisez actuellement, est destinée à créer des tableaux simples dans les documents, mais comme vous pouvez le constater, il n’y a pas un seul tableau ici.<br />
Au fil du temps, l’idée principale de portabilité du HTML a été quelque peu sacrifiée au profit des besoins modernes en matière de multimédia et de mise en forme graphique.</p>
</div>
</body>
</html>
Le navigateur comprend maintenant qu’il doit effectuer un saut de ligne, ce que lui indique la balise <br />.
Nous pouvons aussi diviser le texte en plusieurs paragraphes, utilisons les balises p.
<html>
<head>
<title>Mon premier document HTML</title>
</head>
<body>
<h1>Mon premier document HTML</h1>
<div>
<p>Le langage HTML a été développé par le scientifique britannique Tim Berners-Lee entre 1989 et 1991 au Conseil européen pour la recherche nucléaire à Genève (Suisse).<br />
HTML a été créé comme un langage d’échange de documentation scientifique et technique, adapté aux personnes n’étant pas des spécialistes de la mise en page.<br />
HTML a réussi à résoudre la complexité de SGML en définissant un petit ensemble d’éléments structurels et sémantiques — descripteurs.<br />
Les descripteurs sont souvent appelés « balises ». Avec HTML, il est facile de créer un document relativement simple mais joliment formaté.<br />
Outre la simplification de la structure du document, HTML a introduit le support de l’hypertexte.<br />
Les fonctionnalités multimédia ont été ajoutées plus tard.<br />
</p>
<p>
À l’origine, le langage HTML était conçu comme un moyen de structurer et formater les documents sans les lier aux moyens de rendu (affichage).<br />
Idéalement, le texte avec balisage HTML devait pouvoir être rendu sans déformations stylistiques et structurelles sur différents matériels (écran couleur d’un ordinateur moderne, écran monochrome d’un organiseur, écran de taille limitée d’un téléphone mobile ou d’un dispositif, et programmes de synthèse vocale).<br />
Cependant, l’utilisation actuelle du HTML est très éloignée de son objectif initial. Par exemple, la balise, utilisée plusieurs fois pour formater la page que vous lisez actuellement, est destinée à créer des tableaux simples dans les documents, mais comme vous pouvez le constater, il n’y a pas un seul tableau ici.<br />
Au fil du temps, l’idée principale de portabilité du HTML a été quelque peu sacrifiée au profit des besoins modernes en matière de multimédia et de mise en forme graphique.</p>
</div>
</body>
</html>
Actualisez la page dans votre navigateur et vous verrez que le texte est maintenant divisé en deux paragraphes.