Etiquetas relacionadas con la visualización de código, citas y listas

Este artículo explica las etiquetas relacionadas con la visualización de código, citas y listas.

Esto explica cómo escribir código fuente, citas, anotaciones y listas en HTML.

YouTube Video

Etiquetas relacionadas con la visualización de código

Etiqueta <code>

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

• La etiqueta <code> es un elemento en línea utilizado para indicar fragmentos de código o de programa dentro de un documento HTML.
• Por defecto, se muestra en una fuente monoespaciada, mejorando la legibilidad del código.

Etiqueta <pre>

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

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

• La etiqueta <pre> se utiliza para mostrar texto en su formato original dentro de un documento HTML. El uso de esta etiqueta preserva los espacios en blanco y los saltos de línea en el texto, manteniendo su formato original. Se utiliza principalmente para mostrar contenido que necesita mantener el formato, como el código de programas, poesía o arte en texto.

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

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

• En la etiqueta <pre>, los espacios se preservan, por lo que si hay un espacio antes de la etiqueta de cierre, aparecerá una línea en blanco al final, como en este ejemplo.

Etiqueta <samp>

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

• La etiqueta <samp> es una etiqueta HTML utilizada para representar la salida de un programa informático. Se utiliza para indicar la salida o los mensajes de un programa o sistema.

Etiqueta <kbd>

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

• La etiqueta <kbd> es una etiqueta HTML usada para representar la entrada del usuario. Se utiliza para indicar la entrada del teclado o la entrada de comandos, como atajos.

Etiqueta <var>

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

• La etiqueta <var> se utiliza para representar variables en un programa o ecuación. Se utiliza para enfatizar nombres de variables o variables en fórmulas matemáticas.

Etiquetas utilizadas para citas, etc.

Etiqueta <blockquote>

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

• La etiqueta <blockquote> se utiliza para representar citas largas o textos de otras fuentes, y generalmente se muestra a nivel de bloque.

Etiqueta <q>

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

• La etiqueta <q> es un elemento en línea utilizado para representar citas cortas. Esta etiqueta se puede utilizar para marcar una porción de texto o una oración como cita. El texto encerrado en una etiqueta <q> se muestra típicamente con comillas. La etiqueta <q> también se puede anidar. En este caso, generalmente se utilizan diferentes tipos de comillas para la cita interna.

Etiqueta <cite>

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

• La etiqueta <cite> es un elemento en línea utilizado para indicar la fuente de una cita o referencia. Se utiliza principalmente para indicar la fuente de una obra, como títulos de trabajos, artículos, documentos, páginas web o libros.

Etiqueta <address>

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

• La etiqueta <address> se utiliza para representar información de contacto relacionada con el autor o propietario de un documento o sección. Esta etiqueta generalmente contiene direcciones de correo electrónico, números de teléfono, direcciones físicas y información similar.

La etiqueta <time>

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

• La etiqueta <time> se utiliza para representar un momento específico en el tiempo, una duración o un tiempo recurrente. Esta etiqueta puede incluir fechas y horas para proporcionar significado semántico al documento.

La etiqueta <data>

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

• La etiqueta <data> se utiliza para asociar contenido legible por humanos con valores interpretables por máquinas. Esta etiqueta es útil para marcar los datos de una manera que pueda ser fácilmente procesada por programas.

Etiquetas <details> y <summary>

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

• La etiqueta <details> crea un widget plegable y expandible. Al usarla con la etiqueta <summary>, puedes crear una sección clicable para revelar más detalles, a menudo utilizada para displays interactivos como 'Leer más'.

Etiquetas utilizadas para la visualización de listas

Etiqueta <ul>

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

• Esta es una etiqueta utilizada para crear listas no ordenadas. Cada elemento de la lista se define con la etiqueta <li>. Por defecto, se muestra un punto negro frente a cada elemento de la lista.

Etiqueta <ol>

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

• Esta etiqueta se utiliza para crear una lista ordenada. Cada elemento de la lista se define con la etiqueta <li>. Por defecto, se muestran números para indicar el orden de los elementos.

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

• Esta etiqueta se utiliza para crear una lista de pares que consisten en términos y definiciones, o nombres y detalles. Los elementos de la lista se definen con las etiquetas <dt> y <dd>. El término o nombre se escribe en la etiqueta <dt>, y la definición o explicación se escribe en la etiqueta <dd>.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video