Balises relatives à l'affichage de code, aux citations et aux listes

Cet article explique les balises relatives à l'affichage de code, aux citations et aux listes.

Cela explique comment écrire du code source, des citations, des annotations et des listes en HTML.

YouTube Video

Balises liées à l'affichage du code

Balise <code>

1Inline code example: <code>let x = 10;</code>

• La balise <code> est un élément en ligne utilisé pour indiquer des extraits de code ou de programme dans un document HTML.
• Par défaut, il est affiché dans une police à espacement fixe, ce qui améliore la lisibilité du code.

Balise <pre>

function hello() {
    console.log("Hello, world!");
}

1<pre>
2function hello() {
3    console.log("Hello, world!");
4}
5</pre>

• La balise <pre> est utilisée pour afficher du texte dans son format original dans un document HTML. Utiliser cette balise préserve les espaces blancs et les sauts de ligne dans le texte, maintenant son format original. Elle est principalement utilisée pour afficher du contenu qui doit conserver son formatage, comme le code de programme, la poésie ou l'art textuel.

    function hello() {
        console.log("Hello, world!");
    }
    

1    <pre>
2    function hello() {
3        console.log("Hello, world!");
4    }
5    </pre>

• Dans la balise <pre>, les espaces sont préservés, donc s'il y a un espace avant la balise fermante, une ligne vide apparaîtra à la fin comme dans cet exemple.

Balise <samp>

1Sample system output: <samp>Error: Invalid input.</samp>

• La balise <samp> est une balise HTML utilisée pour représenter la sortie d'un programme informatique. Elle est utilisée pour indiquer les sorties ou les messages d'un programme ou d'un système.

Balise <kbd>

1Keyboard input example: <kbd>Ctrl</kbd> + <kbd>C</kbd>

• La balise <kbd> est une balise HTML utilisée pour représenter une saisie utilisateur. Elle est utilisée pour indiquer une saisie au clavier ou une saisie de commande, comme des raccourcis.

Balise <var>

1Variable example: <var>x</var> = 5;

• La balise <var> est utilisée pour représenter des variables dans un programme ou une équation. Elle est utilisée pour souligner les noms de variables ou les variables dans les formules mathématiques.

Balises utilisées pour les citations, etc.

Balise <blockquote>

1<blockquote>
2    This is a blockquote for longer quotations.
3</blockquote>

• La balise <blockquote> est utilisée pour représenter des longues citations ou du texte d'autres sources et est typiquement affichée au niveau bloc.

Balise <q>

1This is a short quote: <q>Short quote example.</q>

• La balise <q> est un élément en ligne utilisé pour représenter des courtes citations. Cette balise peut être utilisée pour marquer une partie de texte ou une phrase comme étant une citation. Le texte inclus dans une balise <q> est typiquement affiché avec des guillemets. La balise <q> peut aussi être imbriquée. Dans ce cas, différents types de guillemets sont généralement utilisés pour la citation intérieure.

Balise <cite>

1Reference to a book: <cite>The Great Gatsby</cite>

• La balise <cite> est un élément en ligne utilisé pour indiquer la source d'une citation ou d'une référence. Il est principalement utilisé pour indiquer la source d'une œuvre, comme les titres d'œuvres, articles, documents, pages web ou livres.

Balise <address>

1<address>123 Main Street, Springfield, USA</address>

• La balise <address> est utilisée pour représenter les informations de contact liées à l'auteur ou au propriétaire d'un document ou d'une section. Cette balise contient généralement des adresses email, numéros de téléphone, adresses physiques et informations similaires.

La balise <time>

1<time datetime="2024-12-04">December 4, 2024</time>

• La balise <time> est utilisée pour représenter un moment précis dans le temps, une durée ou un temps récurrent. Cette balise peut inclure des dates et des heures afin d'apporter une signification sémantique au document.

La balise <data>

1<data value="2024">Current Year</data>

• La balise <data> est utilisée pour associer du contenu lisible par l'humain à des valeurs compréhensibles par une machine. Cette balise est utile pour baliser des données de manière à ce qu'elles puissent être traitées facilement par des programmes.

Balises <details> et <summary>

1<details>
2    <summary>More information</summary>
3    <p>Here is some additional content.</p>
4</details>

• La balise <details> crée un widget rétractable et extensible. En l'utilisant avec la balise <summary>, vous pouvez créer une section cliquable pour révéler plus de détails, souvent utilisée pour des affichages interactifs comme 'Lire la suite'.

Balises utilisées pour l'affichage des listes

Balise <ul>

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

• C'est une balise utilisée pour créer des listes non ordonnées. Chaque élément de la liste est défini avec la balise <li>. Par défaut, un point noir est affiché devant chaque élément de la liste.

Balise <ol>

1<ol>
2    <li>Step 1</li>
3    <li>Step 2</li>
4    <li>Step 3</li>
5</ol>

• Cette balise est utilisée pour créer une liste ordonnée. Chaque élément de la liste est défini avec la balise <li>. Par défaut, des numéros sont affichés pour indiquer l'ordre des éléments.

Balise <dl>

1<dl>
2    <dt>Term 1</dt>
3    <dd>Definition of Term 1</dd>
4    <dt>Term 2</dt>
5    <dd>Definition of Term 2</dd>
6</dl>

• Cette balise est utilisée pour créer une liste de paires constituées de termes et de définitions, ou de noms et de détails. Les éléments de la liste sont définis avec les balises <dt> et <dd>. Le terme ou nom est écrit dans la balise <dt>, et la définition ou explication est écrite dans la balise <dd>.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video