Tag correlati alla visualizzazione del codice, alle citazioni e alle liste

Questo articolo spiega i tag correlati alla visualizzazione del codice, alle citazioni e alle liste.

Questo spiega come scrivere codice sorgente, citazioni, annotazioni e elenchi in HTML.

YouTube Video

Tag correlati alla visualizzazione del codice

Tag <code>

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

• Il tag <code> è un elemento in linea utilizzato per indicare frammenti di codice o programmi all'interno di un documento HTML.
• Per impostazione predefinita, viene visualizzato in un carattere a larghezza fissa, migliorando la leggibilità del codice.

Tag <pre>

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

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

• Il tag <pre> è usato per visualizzare il testo nel suo formato originale all'interno di un documento HTML. Utilizzando questo tag si mantiene lo spazio bianco e i ritorni a capo nel testo, preservandone il formato originale. È principalmente utilizzato per visualizzare contenuti che devono mantenere la formattazione, come il codice del programma, poesie o arte testuale.

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

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

• Nel tag <pre>, gli spazi sono preservati, quindi se c'è uno spazio prima del tag di chiusura, apparirà una linea vuota alla fine come in questo esempio.

Tag <samp>

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

• Il tag <samp> è un tag HTML utilizzato per rappresentare l'output di un programma informatico. È usato per indicare l'output o i messaggi da un programma o sistema.

Tag <kbd>

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

• Il tag <kbd> è un tag HTML utilizzato per rappresentare l'input dell'utente. È utilizzato per indicare l'input da tastiera o comandi, come le scorciatoie.

Tag <var>

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

• Il tag <var> è utilizzato per rappresentare variabili in un programma o equazione. È utilizzato per enfatizzare i nomi delle variabili o le variabili nelle formule matematiche.

Tag usati per citazioni, ecc.

Tag <blockquote>

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

• Il tag <blockquote> è utilizzato per rappresentare citazioni lunghe o testi da altre fonti ed è tipicamente visualizzato a livello di blocco.

Tag <q>

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

• Il tag <q> è un elemento in linea utilizzato per rappresentare citazioni brevi. Questo tag può essere utilizzato per contrassegnare una parte di testo o una frase come citazione. Il testo racchiuso in un tag <q> viene tipicamente visualizzato con virgolette. Il tag <q> può anche essere nidificato. In questo caso, si usano generalmente diversi tipi di virgolette per la citazione interna.

Tag <cite>

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

• Il tag <cite> è un elemento in linea utilizzato per indicare la fonte di una citazione o di un riferimento. È principalmente utilizzato per indicare la fonte di un'opera, come titoli di lavori, articoli, documenti, pagine web o libri.

Tag <address>

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

• Il tag <address> è utilizzato per rappresentare le informazioni di contatto relative all'autore o al proprietario di un documento o sezione. Questo tag contiene tipicamente indirizzi email, numeri di telefono, indirizzi fisici e informazioni simili.

Il tag <time>

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

• Il tag <time> viene utilizzato per rappresentare un momento specifico, una durata o un tempo ricorrente. Questo tag può includere date e orari per fornire un significato semantico al documento.

Il tag <data>

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

• Il tag <data> viene utilizzato per associare contenuti leggibili all’uomo con valori interpretabili dalle macchine. Questo tag è utile per marcare i dati in modo che possano essere facilmente elaborati dai programmi.

Tag <details> e <summary>

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

• Il tag <details> crea un widget a scomparsa ed espandibile. Utilizzandolo con il tag <summary>, è possibile impostare una sezione cliccabile per rivelare più dettagli, spesso utilizzata per display interattivi come 'Leggi di più'.

Tag utilizzati per la visualizzazione delle liste

Tag <ul>

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

• Questo è un tag utilizzato per creare liste non ordinate. Ogni voce nella lista è definita con il tag <li>. Per impostazione predefinita, un punto nero viene visualizzato davanti a ogni voce della lista.

Tag <ol>

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

• Questo tag è utilizzato per creare una lista ordinata. Ogni voce nella lista è definita con il tag <li>. Per impostazione predefinita, i numeri vengono visualizzati per indicare l'ordine degli elementi.

Tag <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>

• Questo tag è utilizzato per creare una lista di coppie composte da termini e definizioni, o nomi e dettagli. Gli elementi della lista sono definiti con i tag <dt> e <dd>. Il termine o il nome è scritto nel tag <dt>, e la definizione o spiegazione è scritta nel tag <dd>.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video