Formateado de contenidos en HTML

El elemento ABBR especifica que el contenido que se va a representar es una abreviatura o un acrónimo. Admite varios atributos, sin embargo, el único "obligatorio" es el atributo TITLE que indica el significado de dicha abreviatura.

Ejemplo

<abbr title="Cascading Style Sheets">CSS</abbr> es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.

Resultado

El elemento ADDRESS Especifica una información de contacto para el documento actual.

Ejemplo

<address>
    Escrito por Pablo Enrique Fernández Casado.
    Visita <a href="https://ejemplo.com">Ejemplo.com</a>
    Castellana 58, local
    28046 Madrid
    España
</address>

Resultado

Ejemplo

<address> 
    Email de contacto: <a href="mailto:ejemplo@gmail.com">ejemplo@gmail.com</a><br> 
    Teléfono: <a href="tel:+34999999999">(+34) 999.999.999</a> 
</address>

Resultado

El elemento BDO especifica la direccionabilidad del contenido que está dentro de él. Requiere del atributo "dir" para asignar la dirección del texto.

Ejemplo

<p dir="ltr">Esta palabara arábica <bdo dir="rtl">ARABIC PLACEHOLDER</bdo>, está escrita de izquierda a derecha, pero se muestra al revés.</p>

Resultado

Los elementos BLOCKQUOTE y CITE especifican que el contenido que se va a representar es una cita. La diferencia estriba en que, BLOCKQUOTE, se mostrará a modo de bloque y, CITE, se mostrará o representará como una cita en línea.

Ejemplo con BLOCKQUOTE

<blockquote cite="https://blog.com/einstein">
    Hay dos cosas infinitas, el Universo y la estupidez humana
</blockquote>

Resultado

Ejemplo con CITE

<p>
    <cite>
        Hay dos cosas infinitas, el Universo y la estupidez humana
    </cite>, dicho por Albert Einstein
</p>

Resultado

El elemento CODE especifica que el contenido que se va a representar es un fragmento de código.

Ejemplo

<code>
    <script type="text/javascript">
        document.querySelector("body").style.fontFamily = "Arial";
        document.querySelector("body").style.fontSize = "14px";
    </script>
</code>

El elemento DATA especifica y vincula un contenido textual con un valor legible para el sistema o aplicación.

En el ejemplo siguiente, el valor del atributo value podría ser el código de barras.

Ejemplo

<ul>
    <li><data value="3967381398">Producto pequeño</data></li>
    <li><data value="3967381399">Producto mediano</data></li>
    <li><data value="3967381400">Producto grande</data></li>
</ul>

El elemento DFN especifica que, a continuación, se va a definir el contenido que está dentro de él.

Ejemplo

<p>
    El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.
</p>

El elemento EM especifica que el contenido que se va a representar debe aparecer enfatizado. Normalmente, este énfasis suele ser el resultado de aplicar un estilo en cursiva, por lo que se puede confundir con la etiqueta I.

Ejemplo

<p>
    Este texto no tiene énfasis, 
    <em>pero este texto sí está con énfasis</em>
</p>

El elemento I especifica que el contenido que se va a representar debe aparecer en cursiva. Cabe destacar que, este estilo cursivo puede confundirse con el resul-tado de la aplicación de la etiqueta EM.

Ejemplo

<p>
    Este texto no tiene énfasis, 
    <i>pero este texto sí está con énfasis</i>
</p>

Los elementos INS y DEL especifican que el contenido que se va a representar ha sufrido una alteración que afecta a un texto, o parte de él, anteriormente escrito. La etiqueta DEL indica el texto que estaba antes y se representa como si estuviese anulado o tachado. La etiqueta INS representa el texto nuevo que ha cambiado.

Ejemplo

<p>
    El cometa <del>C/2020 F3</del> <ins>Neowise</ins>, descubierto ...
</p>

Resultado

El elemento KBD especifica que el contenido que se va a declarar es una tecla o combinación de teclas.

Ejemplos

<kbd>alt + S</kbd>

Resultado

<p>
    Pulse <kbd><kbd style="border: 1px solid #000; border-radius: 4px; padding: 2px;">Ctrl</kbd> + <kbd style="border: 1px solid #000; border-radius: 4px; padding: 2px;">R</kbd></kbd> para recargar la página.
</p>

Resultado

El elemento MARK especifica que el contenido que se va a representar debe estar marcado o resaltado por su relevancia o importancia dentro del contexto en el que se encuentra.

Ejemplo

<p>
    Los <mark>elementos P no deben contener etiquetas que no sean de texto</mark>. Esto es, no es aconsejable introducir en una etiqueta de párrafo un elemento DIV, SECTION, ARTICLE, ...
</p>

Resultado

El elemento MATH especifica que lo que se va a definir es una fórmula o ecuación matemática. Esto es posible gracias al lenguaje MathML que lleva incorporado y permite utilizar etiquetas HTML para escribir anotaciones matemáticas.

El elemento MATH es el nivel superior del MathML, que es un lenguaje de marcado basado en XML cuyo objetivo es expresar mediante notación de marcas una notación matemática de forma sea legible para las máquinas y seres humanos.

Entre sus posibles elementos, los más comunes, son MI (que representa a un identificador o variable), MN (que representa un valor o número), MO (que representa un operador) y MS (que representa una cadena), aunque dispone de muchos más.

Más información en MathML2 de W3C

Ejemplo de superíndices

<math>
    <msup>
        <mi>n</mi>
        <mn>7</mn>
    </msup>
</math>

Resultado

Ejemplo de subíndices

<math>
    <msub>
        <mi>n</mi>
        <mn>7</mn>
    </msub>
</math>

Resultado

Ejemplo de fracciones

<math>
    <mfrac>
        <mn>1</mn>
        <mn>2</mn>
    </mfrac>
</math>

Resultado

Ejemplo de raíces

<math>
    <mroot>
        <mn>-8</mn>
        <mn>3</mn>
    </mroot>
</math>

Resultado

Ejemplo de sumatorios

<math>
    <mrow>
        <munderover>
            <mo>∑</mo>
            <mrow>
                <mi>n</mi>
                <mo>=</mo>
                <mn>1</mn>
            </mrow>
            <mrow>
                <mo>+</mo>
                <mn>∞</mn>
            </mrow>
        </munderover>
        <mfrac>
            <mn>1</mn>
            <msup>
                <mi>n</mi>
                <mn>2</mn>
            </msup>
        </mfrac>
    </mrow>
</math>

Resultado

Ejemplo de matrices

<math>
    <mrow>
        <mo>[</mo>
        <mtable>
            <mtr>
                <mtd> <mn style="color: var(--color2-bg);">x</mn> </mtd>
                <mtd> <mn>1</mn> </mtd>
            </mtr>
            <mtr>
                <mtd> <mn>2</mn> </mtd>
                <mtd> <mn>3</mn> </mtd>
            </mtr>
        </mtable>
        <mo>]</mo>
    </mrow>
</math>

Resultado

Ejemplo de integrales

<math>
    <munderover>
        <mo>∫</mo>
        <mi>a</mi>
        <mi>b</mi>
    </munderover>
    <mrow>
        <mo>(</mo>
        <mn>5</mn>
        <mi>x</mi>
        <mo>+</mo>
        <mn>2</mn>
        <mi>cos</mi>
        <mrow>
            <mo>(</mo>
            <mi>x</mi>
            <mo>)</mo>
        </mrow>
        <mo>)</mo>
    </mrow>
    <mi>dx</mi>
</math>

Resultado

El elemento PRE especifica que el contenido que se va a representar es un texto preformateado. En general, este elemento se suele representar con una fuente Courier o Monospace y conserva todos los espacios y saltos de línea.

Ejemplo

<pre>
    <p>
        Los  espacios repetidos y 
        Saltos de línea de    este   elemento se muestran tal cuál!
    </p>
</pre>

Resultado

                            

                                Los  espacios repetidos y 
                                Saltos de línea de    este   elemento se muestran tal cuál!
                            
                        

Los elementos SUB y SUP especifican que el contenido que se va a representar debe aparecer como subíndice o superíndice, es decir, por debajo de la línea normal y en una fuente de menor tamaño o por encima de la línea normal y en una fuente de menor tamaño.

Ejemplo con SUB

<p>La fórmula del agua es H<sub>2</sub>O</p>

Resultado

Ejemplo con SUP

<p>E = MC<sup>2</sup></p>

Resultado

El elemento VAR especifica que el contenido que se va a representar es el nombre de una variable.

Ejemplo

<var>x</var> = Millones de personas;

Resultado

Los elementos UL y OL especifican que el contenido que se va a representar es una lista desordenada u ordenada, respectivamente.

Es importante destacar que, dentro de un UL o un OL, nunca puede haber otra cosa que no sea un LI. De lo contrario, estaríamos destruyendo la estructura y el significado que nos aporta la web semántica.

Ejemplo con UL

<ul>
    <li>Opción 1</li>
    <li>Opción 2</li>
    <li>...</li>
</ul>

Ejemplo con OL

<ol>
    <li>Opción 1</li>
    <li>Opción 2</li>
    <li>...</li>
</ol>

El elemento DL especifica que el contenido que se va a representar es una lista de definición, también conocidas como descriptiva o dinámica.

Ejemplo

<h4>Términos de astronomía</h4>
<dl>
    <dt>Planeta</dt>
    <dd>Es aquel cuerpo celeste que orbita alrededor del Sol, posee una masa como para que su propia gravedad domine las fuerzas presentes como cuerpo rígido, lo que implica una forma eférica determinada por el equilibrio hidrostático y es claramente dominante en su vecindad, habiendo limpiado su órbita de cuerpos similares a él.</dd>

    <dt>Planeta enano</dt>
    <dd> Es aquel cuerpo celeste que orbita alrededor del Sol, posee una masa como para que su propia gravedad domine las fuerzas presentes como cuerpo rígido, lo que implica una forma eférica determinada por el equilibrio hidrostático y no es dominante en su vecindad y no es un satélite de otro planeta o cuerpo estelar.</dd>
</dl>

Resultado