HTML - Éléments de phrase : Donner plus de sens à votre texte
Salut à toi, futurs développeurs web ! Je suis ravi d'être votre guide sur ce voyage passionnant à travers le monde des éléments de phrase HTML. En tant que quelqu'un qui enseigne HTML depuis plus d'une décennie, j'attends avec impatience de partager ces outils puissants qui vous aideront à créer un contenu web plus significatif et expressif. Alors, plongeons dedans !
Qu'est-ce que les éléments de phrase HTML ?
Avant de rentrer dans les détails, comprenons ce que sont les éléments de phrase. Imaginez-les comme des balises spéciales qui ajoutent une signification ou un accent à des parties de votre texte. Ils sont comme l'épice dans votre plat préféré - ils ajoutent de la saveur et de la profondeur à votre contenu !
Voici un aperçu rapide des éléments de phrase que nous allons explorer :
| Élément | Description |
|---|---|
<em> |
Texte mis en avant |
<mark> |
Texte marqué ou surligné |
<strong> |
Texte important |
<abbr> |
Abbréviation |
<dfn> |
Terme de définition |
<q> |
Courte citation |
<cite> |
Citation |
<code> |
Code informatique |
<kbd> |
Entrée de clavier |
<var> |
Variable dans un programme ou en mathématiques |
<samp> |
Sortie d'échantillon d'un programme |
<address> |
Informations de contact |
Maintenant, explorons chacun de ces éléments en détail !
Texte mis en avant : L'élément <em>
Lorsque vous voulez souligner un mot ou une expression, comme vous le feriez dans un discours, l'élément <em> est votre outil de choix.
<p>J'<em>adore</em> apprendre HTML !</p>Cela s'affichera comme :
J' adore apprendre HTML !
Le navigateur affiche généralement le texte mis en avant en italique, mais souvenez-vous, il s'agit de la signification, pas seulement du style. Les lecteurs d'écran modifieront souvent leur ton lors de la rencontre de balises <em>, rendant votre contenu plus accessible.
Texte marqué : L'élément <mark>
Avez-vous déjà utilisé un surligneur sur vos manuels ? C'est exactement ce que fait l'élément <mark> en HTML !
<p>La partie la plus importante de la phrase est <mark>juste ici</mark>.</p>Cela apparaîtra comme :
La partie la plus importante de la phrase est juste ici.
C'est parfait pour attirer l'attention sur des parties spécifiques de votre texte, comme je le faisais avec mon pointeur laser en classe !
Texte important : L'élément <strong>
Lorsque vous avez besoin d'indiquer que du texte est d'une importance particulière, <strong> est votre super-héros.
<p>Attention : <strong>Sauvegardez vos fichiers avant de mettre à jour votre système !</strong></p>Cela sera affiché comme :
Attention : Sauvegardez vos fichiers avant de mettre à jour votre système !
Les navigateurs rendent généralement ce texte en gras, mais encore une fois, il s'agit de la signification. C'est comme crier, "Hey, faites attention à cela !"
Texte abrégé : L'élément <abbr>
Nous aimons tous nos abréviations, n'est-ce pas ? Mais tout le monde ne sait pas ce qu'elles signifient. C'est là que <abbr> entre en jeu.
<p>J Trabaille avec <abbr title="HyperText Markup Language">HTML</abbr> tous les jours.</p>Cela apparaîtra comme :
J Trabaille avec HTML tous les jours.
Survolez "HTML" dans un navigateur, et vous verrez la forme complète ! C'est comme avoir un décodeur secret pour vos abréviations.
Terme de définition : L'élément <dfn>
Lorsque vous introducez un nouveau terme ou concept, <dfn> est votre meilleur ami.
<p><dfn>HTML</dfn> est le langage de balisage standard pour créer des pages web.</p>Cela indique aux navigateurs et aux moteurs de recherche, "Hey, nous définissons quelque chose d'important ici !"
Texte cité : L'élément <q>
Pour les moments où vous voulez inclure une courte citation dans un paragraphe, <q> est parfait.
<p>Comme mon professeur préféré disait toujours, <q>La seule question idiote est celle que vous ne posez pas.</q></p>Cela apparaîtra comme :
Comme mon professeur préféré disait toujours, "La seule question idiote est celle que vous ne posez pas."
La plupart des navigateurs ajouteront automatiquement des guillemets autour du texte contenu dans les balises <q>.
Texte de citation : L'élément <cite>
Lorsque vous citez un livre, un film ou toute autre œuvre, <cite> est votre vedette de citation.
<p>Mon livre préféré est <cite>Le Guide du voyageur galactique</cite> de Douglas Adams.</p>Cela sera généralement rendu en italique :
Mon livre préféré est Le Guide du voyageur galactique de Douglas Adams.
Code informatique : L'élément <code>
Pour tous les futurs programmeurs, lorsque vous voulez afficher des extraits de code, <code> est votre meilleur ami.
<p>La fonction <code>console.log()</code> est utilisée pour imprimer des messages dans la console en JavaScript.</p>Cela s'affichera comme :
La fonction console.log() est utilisée pour imprimer des messages dans la console en JavaScript.
Texte de clavier : L'élément <kbd>
Lorsque vous avez besoin d'indiquer une entrée de clavier, <kbd> vient à votre secours.
<p>Pour enregistrer votre fichier, appuyez sur <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>Cela sera rendu comme :
Pour enregistrer votre fichier, appuyez sur Ctrl + S.
Variables de programmation : L'élément <var>
Pour les moments où vous discutez de variables dans un contexte mathématique ou de programmation, <var> est votre virtuosos des variables.
<p>Dans l'équation <var>E</var> = <var>mc</var><sup>2</sup>, <var>E</var> représente l'énergie.</p>Cela sera généralement affiché en italique :
Dans l'équation E = mc2, E représente l'énergie.
Sortie d'échantillon : L'élément <samp>
Lorsque vous voulez montrer un exemple de sortie d'un programme, <samp> est votre vedette d'échantillon.
<p>Si vous exécutez ce code, vous verrez : <samp>Hello, World!</samp></p>Cela sera souvent affiché en police monospace :
Si vous exécutez ce code, vous verrez : Hello, World!
Texte d'adresse : L'élément <address>
Enfin, lorsque vous avez besoin de fournir des informations de contact, <address> est votre élément de choix.
<address>
Écrit par John Doe.<br>
Visitez-nous à :<br>
Example.com<br>
Boîte 564, Disneyland<br>
USA
</address>Cela sera généralement rendu en italique et souvent avec un saut de ligne avant et après.
Et voilà, amis ! Vous venez d'apprendre à propos du merveilleux monde des éléments de phrase HTML. Souvenez-vous, ces éléments ne sont pas seulement là pour changer l'apparence du texte - ils ajoutent de la signification et de la structure à votre contenu. Ils rendent vos pages web plus accessibles, plus riches sémantiquement, et ultimately, plus professionnelles.
En conclusion, je me souviens d'un étudiant qui m'a dit un jour, "Apprendre HTML, c'est comme apprendre une nouvelle langue, mais au lieu de parler aux gens, je parle aux ordinateurs !" Et vous savez quoi ? Elle avait complètement raison. Avec ces éléments de phrase dans votre boîte à outils, vous êtes bien en chemin pour devenir couramment en langage web.
Continuez à pratiquer, continuez à explorer, et surtout, continuez à vous amuser avec HTML. Avant de savoir, vous créerez des pages web qui non seulement ont l'air géniales, mais sont significatives et accessibles également. Bon codage à tous !
Credits: Image by storyset