Mise en forme HTML
L'apparence du texte à l'écran dépend des balises HTML utilisées pour le formater. Les balises de formatage appartiennent à deux catégories : les balises de balisage physiques responsables du style (gras, italique, police, etc.) et les balises de balisage logique qui portent une charge sémantique (par exemple, indiquez aux moteurs de recherche quels mots clés doivent être classés sur une page Web).
Examinons en détail les balises de formatage et expliquons les nuances de leur application.
Les balises <h1>-<h6>
Les balises <h1>-<h6> sont utilisées pour déterminer les 6 niveaux des <Titres HTML>. Le titre le plus important de la page est le titre du premier niveau (<h1>) et le moins important est le titre du sixième niveau ( <h6>). Plus le niveau du titre est bas, plus la taille de la police est petite.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de la page Web </title>
</head>
<body>
<h1>Rubrique 1</h1>
<h2>Rubrique 2</h2>
<h3>Rubrique 3</h3>
<h4>Rubrique 4</h4>
<h5>Rubrique 5</h5>
<h6>Rubrique 6</h6>
</body>
</html>Résultat
Les balises <b> et <strong>
Les balises HTML <b> et <strong> définissent la police en gras. La différence entre eux est que la balise <b> est une balise de balisage physique et met en évidence le texte sans accentuer son importance. La balise <strong> identifie le texte qui revêt une importance particulière. Le contenu de la balise a beaucoup de poids pour les moteurs de recherche, et les appareils qui lisent à partir de l'écran sont mis en évidence par une certaine intonation.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Nous avons utilisé la balise <strong>, pour mettre en évidence <strong> cet important fragment du texte</strong>.</p>
</body>
</html>Résultat
Les balises <i> et <em>
Les balises <i> et <em> définissent la police italique. La balise de texte <i> est un élément de balisage physique. En d'autres termes, le texte incorporé ne diffère que de manière visuelle et n'est pas perçu comme étant important par les navigateurs et les moteurs de recherche. La balise <em> met en valeur de manière expressive et émotionnelle un morceau de texte.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>C’est une paragraphe ordinaire</p>
<p> Une partie importante du texte est mis en évidence <em>en italique</em></p>
</body>
</html>Résultat
La balise <pre>
La balise <pre> est utilisé pour inclure du texte pré-formaté dans un document HTML. Dans le texte incorporé dans le tag, tous les espaces et les sauts de ligne sont conservés (comme on le sait, les navigateurs par défaut sont dotés d’un nombre illimité d’espaces consécutifs).Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<pre>Espaces
et sauts de ligne
dans cet élément
sont affichés comme tapés.
</pre>
</body>
</html>Résultat
La balise <mark>
La balise <mark> met en évidence les parties du texte, avec lesquelles l’utilisateur travaille actuellement et qui sont importantes pour lui. Visuellement, le contenu de l’étiquette ressemble à un marqueur marqué.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Apprenez le langage du balisage hypertexte HTML sur le site <mark>W3Docs.com</mark>.</p>
</body>
</html>Résultat
La balise <small>
La balise <small> réduit la taille du texte inclus d'une unité, sauf lorsque le texte incorporé est écrit dans la plus petite police. En HTML5 la balise est utilisée pour stocker d’informations sur les droits d’auteur, et également pour les définitions de police de petite taille ou légale.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>L’utilisation du tag SMALL</title>
</head>
<body>
<p>Le taux d'intérêt n'est que de 10%*</p>
<small>* - pour jour</small> /
</body>
</html>Résultat
Les balises <del> et <s>
La balise <del> sépare le morceau du texte, qui a été effacé du document.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Mon couleur préféré. <del>vert</del> <ins>bleu</ins>!</p>
</body>
</html>Résultat
La balise <s> est utilisée pour définir le texte, qui n’est plus actuel.
Exemple
<!DOCTYPE html>
<html>
<body>
<p><s>J’étudie à l’école</s></p>
<p>J’étudie à l’université.</p>
</body>
</html>Résultat
Les navigateurs affichent le contenu des deux balises sous forme de texte barré. Malgré la similarité externe, les étiquettes ne peuvent pas se remplacer.
Les balises <ins> et <u>
La balise <ins> est utilisé pour déterminer la partie du texte qui a été ajoutée au document. En général, le tag <ins> est utilisé avec le tag <del> , qui contient la partie du texte qui a été supprimée. Le contenu de ce tag est affiché dans le navigateur comme un texte souligné.
Exemple
<!DOCTYPE html>
<html>
<body>
<p>Ses couleurs préférables <del>violettes </del> <ins>perce-neige </ins>․</p>
</body>
</html>Résultat
La balise <u> contient du texte qui est stylistiquement différent du reste du texte. Celles-ci peuvent être des mots avec des fautes d’orthographe, des mots qui doivent être soulignés par les règles de la langue (par exemple, en chinois, les noms propres sont soulignés), etc.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<p>Ici, nous avons utilisé l’élément <u> <u></u>.</p>
</body>
</html>Résultat
Les balises <sub> et <sup>
La balise <sub> est utilisé pour définir le texte avec un index inférieur. Le texte dans l'index inférieur est situé sous la ligne de base des caractères restants dans la chaîne et est affiché dans une police réduite. La ligne de base court le long du bas ou du haut des caractères.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre de la fenêtre de page Web</title>
</head>
<body>
<p>La formule de l'eau -H<sub>2</sub>O, et la formule de l'alcool - C<sub>2</sub>H<sub>5</sub>ОН </p>
</body>
</html>Résultat
La balise <dfn>
La balise <dfn> est utilisé pour séparer le terme, qui est mentionné pour la première fois. Dans le navigateur, le contenu du tag est indiqué en italique.
Exemple
<!DOCTYPE html>
<html>
<body>
<p><dfn>HTML</dfn> (de l’anglais HyperText Markup Language — «langage de balisage hypertexte») — un langage de balisage standardisé pour les documents sur le World Wide Web. La plupart des pages Web contiennent une description de balisage HTML </p>
</body>
</html>Résultat
Les balises <p>, <br> et <hr>
La balise <p> définit un paragraphe dans le texte. Les paragraphes sont séparés les uns des autres par une ligne vide. Le navigateur ajoute automatiquement l’indentation supérieure et inférieure égale à 1em, tandis que l’indentation des paragraphes adjacents est "réduite".
Exemple
<!DOCTYPE html>
<html>
<head>Titre de la page Web</title>
</head>
<body>
<p>C’est un paragraphe</p>
</body>
</html>Résultat
La balise <br> définit la traduction de ligne, c’est-à-dire que tout ce qui est écrit après sera déplacé vers une nouvelle ligne. Contrairement au tag <p> qui définit le paragraphe, un retrait vide n'est pas ajouté avant la ligne.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Exemple de l'élément br</h1>
<p> Voici un paragraphe avec un tag <br /> tag <br /> que nous voulons d'afficher comme un exemple.</p>
</body>
</html>Résultat
En HTML5 la balise <hr> est utilisée pour la division thématique du contenu sur la page. Dans les versions précédentes de HTML, il était utilisé pour créer une ligne horizontale sur la page, en séparant visuellement le contenu. Dans la nouvelle version, il a acquis une charge sémantique et détermine non seulement le contenu visuel, mais aussi le contenu thématique.
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>Football</h1>
<p>Sport d'équipe, dans lequel le but est de marquer le ballon dans le but de l'adversaire.</p>
<hr>
<h1>Basketball</h1>
<p>Un match d'équipe sportive avec une balle dans laquelle la balle est lancée dans le panier (anneau) par l'adversaire.</p>
</body>
</html>Résultat
Pratiquez vos connaissances
