Le body, le titre et le paragraphe
Introduction
Maintenant que nous avons vu la balise « head » qui, pour rappel, ne montre rien à vos visiteurs réels, mais qui parle surtout aux bots, aux explorateurs internet ou aux média-sociaux, nous allons enfin pouvoir afficher quelque chose.
Le body
Nous avons obtenu dans les articles précédents quelque chose de ce genre (Bien sûr, votre « head » peut contenir bien plus de lignes de code selon votre besoin.)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content=" Votre description" />
<meta name="robots" content="index" />
<meta name="author" content="nom de l’auteur" />
</head>
</html>
Maintenant, nous voulons, enfin, écrire quelque chose. Mais nous n'allons pas le faire dans le « head » mais plutôt dans une autre balise, ce qui va nous permettre de bien séparer les informations. Cette balise s'appelle « body », elle se place après la balise « head » et s'écrit de la même façon. Elle va permettre de dire aux bots et explorateurs internet que c'est là où les choses importantes se passent pour vos visiteurs ! Attention, elle se trouve toujours dans la balise « html », car c'est là que nous écrivons notre code.
<!DOCTYPE html>
<html lang="fr">
<head>
Nos balises meta et autres
</head>
<body>
</body>
</html>
Les titres de votre page
Nous allons commencer par vouloir mettre des titres à notre contenu. C'est toujours une bonne chose de mettre des titres, car votre lecteur va tout de suite savoir de quoi vous parlez. De plus, cela va être très important pour votre référencement par les moteurs de recherche.
Comme nous l'avons vu dans le chapitre sur la syntaxe du HTML, un titre s'écrit de cette façon :
<h1>Mon titre</h1>
Écrire un titre, c'est bien, mais nous pouvons vouloir écrire des sous-titres. Les créateurs du HTML ont tout prévu, car nous pouvons avoir 6 niveaux de titres. Il suffit de changer la balise « h1 » en balises « h2 », et ainsi de suite jusqu'à la balise « h6 ». « h1 » est le niveau le plus fort, et « h6 » est le niveau le plus faible.
Quand je parle de niveau plus fort, cela signifie que les moteurs de recherche comme Google vont comprendre que le titre « h1 » a plus d'importance dans votre article que le « h2 », etc. De plus, l'aspect des titres change. Le titre « h1 » sera plus grand, et plus épais que le « h2 », le « h2 » sera plus grand et épais que le « h3 » et ainsi de suite. Attention, ne pas mettre de « h1 » à du texte que vous voulez mettre seulement en grand ou en gras. Cela serait une grosse erreur de sémantique et votre article pourrait être mal référencé.
Passons à la pratique, et tapez ce code dans votre éditeur de code :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Les titres et paragraphes</title>
</head>
<body>
<h1>Le titre de mon article</h1>
<h2>Le sous-titre de mon article</h2>
<h3>Le sous-titre de mon article</h3>
<h4>Le sous-titre de mon article</h4>
<h5>Le sous-titre de mon article</h5>
<h6>Le sous-titre de mon article</h6>
</body>
</html>
Vous allez obtenir ce résultat :
On peut combiner les balises pour former des chapitres avec du texte. Voici comment cela peut se présenter :
<h1>Mon titre</h1>
<h2>Mon sous-titre</h2>
<p>Mon paragraphe</p>
<h2>Mon deuxième sous-titre</h2>
<p>Mon paragraphe</p>
Ou faire d'autres combinaisons, comme vous le souhaitez :
<h1>Mon titre</h1>
<h2>Mon sous-titre par exemple, introduction</h2>
<h3>Un sous sous-titre</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, repellat.</p>
<h3>Encore un autre sous sous-titre</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
deserunt dignissimos ea minima
nobis repudian</p>
<h2>Mon deuxième sous-titre, par exemple, ma conclusion</h2>
<h3>Un sous sous-titre</h3>
<p>Mon paragraphe</p>
Vous pouvez avoir plusieurs h2, h3, etc. , mais il ne faut avoir, en principe, qu'un seule h1 dans votre article. Les moteurs de recherche vous en seront reconnaissant. L'indentation des titres n'est pas obligatoire, mais je trouve que cela rend le code plus lisible.
Les paragraphes
Lors de la rédaction d'un article, vous voudrez très probablement faire des paragraphes pour chaque point particulier traité dans votre texte. C'est possible en HTML grâce à la balise « p » que nous avons déjà vu.
Attention, cette balise vous permet de faire un retour à la ligne à la fin du paragraphe, mais pas de faire un alinéa sur la première ligne du paragraphe. Il faudra utiliser le CSS pour cela (voir text-indent).
<p>Voici un paragraphe comme nous l'avons déjà vu</p>
Astuces :
Lorsque l'on code, et que l'on veut créer du texte rapidement pour tester son application, on va utiliser du texte généré automatiquement. C'est ce que l'on appelle du Lorem ipsum.
Pour générer ce texte :
- Utiliser Emmet et taper lorem puis faire une tabulation. Voir la documentation : Emmet . Emmet est d'office sur VsCode et PHPStorm.
- Utiliser un site internet et faire un copié collé du texte. Lorem Ipsum par exemple
Les commentaires
Il n'y a pas encore de commentaire, mais cela ne serait tarder ...