HTML-Components

Declara el tipo de documento y la versión de HTML que se está utilizando.

Sintaxis:

<!DOCTYPE html>

Atributos:

No tiene atributos

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Título</title>
</head>
<body>
    Contenido
</body>
</html>

Nota: Es obligatorio en todos los documentos HTML5 y debe ser lo primero en el documento.

Representa la raíz de un documento HTML. Todos los demás elementos deben ser descendientes de este elemento.

Sintaxis:

<html>...</html>

Atributos:

lang: Especifica el idioma del documento (ej. "es", "en")
xmlns: Define el namespace XML (solo para XHTML)

Ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Título</title>
</head>
<body>
    Contenido
</body>
</html>

Nota: Es el elemento raíz de todo documento HTML y debe incluir los elementos <head> y <body>.

Contiene metadatos/información sobre el documento, como título, enlaces a hojas de estilo, scripts, etc.

Sintaxis:

<head>...</head>

Atributos:

No tiene atributos específicos, pero puede contener varios elementos hijos

Ejemplo:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página</title>
    <link rel="stylesheet" href="estilos.css">
    <script src="script.js"></script>
</head>

Nota: El contenido del <head> no se muestra directamente en la página, pero es esencial para su funcionamiento y SEO.

Representa el contenido principal del documento HTML que se muestra en el navegador.

Sintaxis:

<body>...</body>

Atributos:

onload: Script que se ejecuta cuando la página se carga.
onunload: Script que se ejecuta cuando la página se descarga.

Ejemplo:

<body>
        <h1>Bienvenido</h1>
        <p>Este es el contenido principal de la página.</p>
    </body>

Nota: Solo puede haber un elemento <body> en cada documento HTML.

Define el título del documento que se muestra en la barra de título del navegador o en la pestaña.

Sintaxis:

<title>...</title>

Atributos:

No tiene atributos específicos.

Ejemplo:

<head>
        <title>Mi Página Web</title>
    </head>

Nota: Es obligatorio en todos los documentos HTML y debe ser único dentro del elemento <head>.

El elemento <meta> define metadatos sobre el documento HTML, como el conjunto de caracteres, la descripción, palabras clave, autor, y más.

Sintaxis:

<meta name="nombre" content="valor">

Atributos:

charset: Especifica el conjunto de caracteres del documento (ej. "UTF-8").
name: Define el tipo de metadatos (ej. "description", "keywords").
content: Proporciona el valor de los metadatos.
http-equiv: Proporciona información del encabezado HTTP (ej. "refresh", "content-type").

Ejemplo:

<head>
        <meta charset="UTF-8">
        <meta name="description" content="Esta es una página de ejemplo">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Tu Nombre">
    </head>

Nota: Los elementos <meta> son esenciales para SEO y para proporcionar información al navegador y motores de búsqueda.

El elemento <link> define la relación entre el documento actual y un recurso externo, como una hoja de estilo.

Sintaxis:

<link rel="stylesheet" href="estilos.css">

Atributos:

rel: Especifica la relación entre el documento y el recurso enlazado (ej. "stylesheet").
href: Especifica la URL del recurso enlazado.
type: Especifica el tipo MIME del recurso enlazado.
media: Especifica el medio para el que está diseñado el recurso enlazado (ej. "screen").

Ejemplo:

<head>
        <link rel="stylesheet" href="estilos.css">
    </head>

Nota: Es comúnmente utilizado para enlazar hojas de estilo CSS externas.

El elemento <style> se utiliza para definir estilos CSS internos en un documento HTML.

Sintaxis:

<style>
        body {
            background-color: lightblue;
        }
    </style>

Atributos:

Type: Especifica el tipo MIME del contenido (por defecto "text/css").
Media: Especifica el medio para el que están diseñados los estilos (ej. "screen").

Ejemplo:

<head>
        <style>
            h1 {
                color: red;
            }
        </style>
    </head>

Nota: Se recomienda usar hojas de estilo externas para mantener el código más limpio.

El elemento <script> se utiliza para definir o enlazar scripts de JavaScript en un documento HTML.

Sintaxis:

<script src="script.js"></script>

Atributos:

src: Especifica la URL del archivo de script externo.
type: Especifica el tipo MIME del script (por defecto "text/javascript").
async: Indica que el script debe ejecutarse de forma asíncrona.
defer: Indica que el script debe ejecutarse después de que el documento haya sido analizado.

Ejemplo:

<head>
        <script src="script.js" defer></script>
    </head>

Nota: Los scripts pueden colocarse en el <head> o al final del <body> para optimizar el rendimiento.

El elemento <base> especifica la URL base para todos los enlaces relativos en un documento HTML.

Sintaxis:

<base href="https://www.ejemplo.com/">

Atributos:

href: Especifica la URL base para los enlaces relativos.
target: Especifica el destino predeterminado para los enlaces (ej. "_blank", "_self").

Ejemplo:

<head>
        <base href="https://www.ejemplo.com/" target="_blank">
    </head>

Nota: Solo puede haber un elemento <base> en el documento y debe estar dentro del <head>.

El elemento <header> representa un contenedor para contenido introductorio o enlaces de navegación.

Sintaxis:

<header>...</header>

Atributos:

No tiene atributos específicos.

Ejemplo:

<header>
        <h1>Bienvenido</h1>
        <nav>
            <a href="#">Inicio</a>
            <a href="#">Contacto</a>
        </nav>
    </header>

Nota: Puede contener encabezados, logotipos, menús de navegación, etc.

El elemento <footer> representa un pie de página para su sección más cercana o para todo el documento.

Sintaxis:

<footer>...</footer>

Atributos:

No tiene atributos específicos.

Ejemplo:

<footer>
        <p>Copyright &copy; 2025 Mi Sitio Web</p>
    </footer>

Nota: Generalmente contiene información de derechos de autor, enlaces de contacto, etc.

El elemento <section> representa una sección genérica de un documento, que generalmente tiene un encabezado.

Sintaxis:

<section>...</section>

Atributos:

No tiene atributos específicos.

Ejemplo:

<section>
        <h2>Acerca de Nosotros</h2>
        <p>Somos una empresa dedicada a...</p>
    </section>

Nota: Se utiliza para dividir el contenido en bloques temáticos.

El elemento <article> representa contenido independiente que puede ser distribuido o reutilizado.

Sintaxis:

<article>...</article>

Atributos:

No tiene atributos específicos.

Ejemplo:

<article>
        <h2>Título del Artículo</h2>
        <p>Este es el contenido del artículo.</p>
    </article>

Nota: Ideal para publicaciones de blogs, noticias, etc.

El elemento <aside> representa contenido relacionado con el contenido principal, como barras laterales.

Sintaxis:

<aside>...</aside>

Atributos:

No tiene atributos específicos.

Ejemplo:

<aside>
        <h3>Noticias Relacionadas</h3>
        <ul>
            <li>Noticia 1</li>
            <li>Noticia 2</li>
        </ul>
    </aside>

Nota: Se utiliza para contenido complementario o relacionado.

El elemento <nav> representa un conjunto de enlaces de navegación.

Sintaxis:

<nav>...</nav>

Atributos:

No tiene atributos específicos.

Ejemplo:

<nav>
        <a href="#">Inicio</a>
        <a href="#">Servicios</a>
        <a href="#">Contacto</a>
    </nav>

Nota: Se utiliza para menús de navegación principales o secundarios.

El elemento <main> representa el contenido principal del documento.

Sintaxis:

<main>...</main>

Atributos:

No tiene atributos específicos.

Ejemplo:

<main>
        <h1>Bienvenido a Mi Sitio</h1>
        <p>Este es el contenido principal.</p>
    </main>

Nota: Solo debe haber un elemento <main> por documento.

El elemento <span> es un contenedor en línea genérico que no tiene un significado semántico específico.

Sintaxis:

<span>...</span>

Atributos:

class: Especifica una o más clases CSS para el elemento.
id: Especifica un identificador único para el elemento.
style: Permite aplicar estilos CSS en línea.

Ejemplo:

<p>Este es un <span style="color: red;">texto destacado</span> en una oración.</p>

Nota: Se utiliza principalmente para aplicar estilos o manipular partes específicas de texto con JavaScript.

El elemento <div> es un contenedor genérico de bloque que no tiene un significado semántico específico.

Sintaxis:

<div>...</div>

Atributos:

class: Especifica una o más clases CSS para el elemento.
id: Especifica un identificador único para el elemento.
style: Permite aplicar estilos CSS en línea.

Ejemplo:

<div class="contenedor">
        <h2>Título</h2>
        <p>Este es un párrafo dentro de un div.</p>
    </div>

Nota: Es ampliamente utilizado para estructurar y agrupar contenido en un documento HTML.

El elemento <dialog> representa un cuadro de diálogo o una ventana interactiva.

Sintaxis:

<dialog>...</dialog>

Atributos:

open: Indica si el cuadro de diálogo está abierto.

Ejemplo:

<dialog open>
        <p>Este es un cuadro de diálogo.</p>
        <button>Cerrar</button>
    </dialog>

Nota: Se puede controlar con JavaScript para mostrar u ocultar el cuadro de diálogo.

Los elementos <h1> a <h6> representan encabezados, donde <h1> es el más importante y <h6> el menos importante.

Sintaxis:

<h1>...</h1>

Atributos:

No tienen atributos específicos.

Ejemplo:

<h1>Título Principal</h1>
    <h2>Subtítulo</h2>
    <h3>Encabezado Secundario</h3>

Nota: Los encabezados son importantes para la estructura del documento y el SEO.

El elemento <p> representa un párrafo de texto.

Sintaxis:

<p>...</p>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un párrafo de ejemplo.</p>

Nota: Es uno de los elementos más comunes para estructurar texto en HTML.

El elemento <br> inserta un salto de línea en el texto.

Sintaxis:

<br>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Línea 1<br>Línea 2</p>

Nota: Se utiliza para saltos de línea dentro de un párrafo o texto.

El elemento <hr> representa una separación temática entre elementos de contenido.

Sintaxis:

<hr>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Texto antes de la línea horizontal.</p>
    <hr>
    <p>Texto después de la línea horizontal.</p>

Nota: Se utiliza para dividir contenido visualmente.

El elemento <pre> representa texto preformateado, donde los espacios en blanco y saltos de línea se respetan.

Sintaxis:

<pre>...</pre>

Atributos:

No tiene atributos específicos.

Ejemplo:

<pre>
    Texto preformateado
        con espacios y saltos
    de línea.
    </pre>

Nota: Es útil para mostrar código o texto con formato específico.

El elemento <blockquote> representa una cita en bloque.

Sintaxis:

<blockquote>...</blockquote>

Atributos:

cite: Especifica la fuente de la cita.

Ejemplo:

<blockquote cite="https://www.ejemplo.com">
        Esta es una cita en bloque.
    </blockquote>

Nota: Se utiliza para citas largas que necesitan un formato especial.

El elemento <ol> representa una lista ordenada.

Sintaxis:

<ol>...</ol>

Atributos:

type: Define el tipo de numeración (ej. "1", "a", "i").
start: Especifica el número inicial de la lista.
reversed: Invierte el orden de la lista.

Ejemplo:

<ol type="a" start="3">
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ol>

Nota: Se utiliza para listas que requieren un orden específico.

El elemento <ul> representa una lista desordenada.

Sintaxis:

<ul>...</ul>

Atributos:

No tiene atributos específicos.

Ejemplo:

<ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>

Nota: Se utiliza para listas sin un orden específico.

El elemento <li> representa un elemento de una lista.

Sintaxis:

<li>...</li>

Atributos:

No tiene atributos específicos.

Ejemplo:

<ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>

Nota: Se utiliza dentro de <ul> o <ol> para definir elementos de lista.

El elemento <dl> representa una lista de definiciones.

Sintaxis:

<dl>...</dl>

Atributos:

No tiene atributos específicos.

Ejemplo:

<dl>
        <dt>HTML</dt>
        <dd>Lenguaje de marcado para la web.</dd>
    </dl>

Nota: Se utiliza para listas de términos y sus definiciones.

El elemento <dt> representa un término en una lista de definiciones.

Sintaxis:

<dt>...</dt>

Atributos:

No tiene atributos específicos.

Ejemplo:

<dl>
        <dt>HTML</dt>
        <dd>Lenguaje de marcado para la web.</dd>
    </dl>

Nota: Se utiliza dentro de <dl> para definir un término.

El elemento <dd> representa la descripción o definición de un término en una lista de definiciones.

Sintaxis:

<dd>...</dd>

Atributos:

No tiene atributos específicos.

Ejemplo:

<dl>
        <dt>HTML</dt>
        <dd>Lenguaje de marcado para la web.</dd>
    </dl>

Nota: Se utiliza dentro de <dl> para definir la descripción de un término.

El elemento <figure> representa contenido independiente, como una imagen con su descripción.

Sintaxis:

<figure>...</figure>

Atributos:

No tiene atributos específicos.

Ejemplo:

<figure>
        <img src="imagen.jpg" alt="Descripción de la imagen">
        <figcaption>Descripción de la imagen.</figcaption>
    </figure>

Nota: Se utiliza para agrupar contenido visual con su descripción.

El elemento <figcaption> representa una leyenda o descripción para el contenido de un <figure>.

Sintaxis:

<figcaption>...</figcaption>

Atributos:

No tiene atributos específicos.

Ejemplo:

<figure>
        <img src="imagen.jpg" alt="Descripción de la imagen">
        <figcaption>Descripción de la imagen.</figcaption>
    </figure>

Nota: Debe ser utilizado dentro de un <figure> para describir su contenido.

El elemento <a> define un hipervínculo que enlaza a otra página o recurso.

Sintaxis:

<a href="URL">Texto del enlace</a>

Atributos:

href: Especifica la URL del enlace.
target: Define dónde abrir el enlace (ej. "_blank", "_self").
rel: Especifica la relación entre el documento actual y el enlace.

Ejemplo:

<a href="https://www.ejemplo.com" target="_blank">Visitar Ejemplo</a>

Nota: Es uno de los elementos más importantes para la navegación en la web.

El elemento <strong> indica que el texto tiene una importancia fuerte.

Sintaxis:

<strong>Texto importante</strong>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <strong>texto importante</strong>.</p>

Nota: Se utiliza para resaltar texto con semántica de importancia.

El elemento <em> indica que el texto tiene énfasis.

Sintaxis:

<em>Texto con énfasis</em>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <em>texto con énfasis</em>.</p>

Nota: Se utiliza para resaltar texto con semántica de énfasis.

El elemento <mark> representa texto resaltado o marcado.

Sintaxis:

<mark>Texto resaltado</mark>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <mark>texto resaltado</mark>.</p>

Nota: Se utiliza para resaltar texto relevante.

El elemento <small> representa texto de menor importancia.

Sintaxis:

<small>Texto pequeño</small>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <small>texto pequeño</small>.</p>

Nota: Se utiliza para mostrar texto con menor relevancia.

El elemento <del> representa texto que ha sido eliminado.

Sintaxis:

<del>Texto eliminado</del>

Atributos:

cite: URL que explica el motivo de la eliminación.
datetime: Fecha y hora de la eliminación.

Ejemplo:

<p>Este es un <del>texto eliminado</del>.</p>

Nota: Se utiliza para mostrar texto que ya no es válido.

El elemento <ins> representa texto que ha sido añadido.

Sintaxis:

<ins>Texto añadido</ins>

Atributos:

cite: URL que explica el motivo de la adición.
datetime: Fecha y hora de la adición.

Ejemplo:

<p>Este es un <ins>texto añadido</ins>.</p>

Nota: Se utiliza para mostrar texto que ha sido agregado recientemente.

El elemento <sub> representa texto en subíndice.

Sintaxis:

<sub>Texto en subíndice</sub>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>H<sub>2</sub>O</p>

Nota: Se utiliza para fórmulas químicas o matemáticas.

El elemento <sup> representa texto en superíndice.

Sintaxis:

<sup>Texto en superíndice</sup>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>x<sup>2</sup></p>

Nota: Se utiliza para exponentes o referencias.

El elemento <code> representa un fragmento de código.

Sintaxis:

<code>...</code>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Usa el elemento <code><strong></code> para resaltar código.</p>

Nota: Se utiliza para mostrar código en línea.

El elemento <kbd> representa texto que el usuario debe ingresar desde el teclado.

Sintaxis:

<kbd>...</kbd>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.</p>

Nota: Se utiliza para mostrar combinaciones de teclas.

El elemento <samp> representa la salida de un programa o sistema.

Sintaxis:

<samp>...</samp>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>El sistema devolvió: <samp>Error 404</samp>.</p>

Nota: Se utiliza para mostrar mensajes de error o resultados de programas.

El elemento <var> representa una variable en programación o matemáticas.

Sintaxis:

<var>...</var>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>La variable <var>x</var> representa un número.</p>

Nota: Se utiliza para mostrar variables en texto.

El elemento <cite> representa el título de una obra creativa, como un libro, película o artículo.

Sintaxis:

<cite>...</cite>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Mi libro favorito es <cite>El Quijote</cite>.</p>

Nota: Se utiliza para citar títulos de obras creativas.

El elemento <q> representa una cita corta en línea.

Sintaxis:

<q>...</q>

Atributos:

cite: Especifica la fuente de la cita.

Ejemplo:

<p>Ella dijo: <q>La práctica hace al maestro</q>.</p>

Nota: Se utiliza para citas breves que no requieren un bloque separado.

El elemento <abbr> representa una abreviatura o acrónimo.

Sintaxis:

<abbr title="HyperText Markup Language">HTML</abbr>

Atributos:

title: Proporciona la descripción completa de la abreviatura.

Ejemplo:

<p>El estándar <abbr title="HyperText Markup Language">HTML</abbr> es esencial para la web.</p>

Nota: Mejora la accesibilidad al proporcionar información adicional sobre abreviaturas.

El elemento <time> representa una fecha, hora o ambos.

Sintaxis:

<time datetime="2025-04-08">8 de abril de 2025</time>

Atributos:

datetime: Especifica la fecha y hora en un formato legible por máquinas.

Ejemplo:

<p>La reunión será el <time datetime="2025-04-08">8 de abril de 2025</time>.</p>

Nota: Mejora la semántica y accesibilidad al representar fechas y horas.

El elemento <data> vincula un contenido legible por humanos con un valor legible por máquinas.

Sintaxis:

<data value="12345">Producto #12345</data>

Atributos:

value: Especifica el valor legible por máquinas.

Ejemplo:

<p>ID del producto: <data value="12345">12345</data>.</p>

Nota: Útil para representar datos estructurados en HTML.

El elemento <dfn> representa un término que está siendo definido.

Sintaxis:

<dfn>...</dfn>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>El término <dfn>HTML</dfn> significa HyperText Markup Language.</p>

Nota: Mejora la semántica al definir términos en un documento.

El elemento <b> representa texto que debe destacarse sin transmitir importancia adicional.

Sintaxis:

<b>Texto destacado</b>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <b>texto destacado</b>.</p>

Nota: Se utiliza para resaltar texto visualmente sin semántica adicional.

El elemento <i> representa texto que debe destacarse de forma estilística, como términos técnicos o nombres.

Sintaxis:

<i>Texto en cursiva</i>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <i>texto en cursiva</i>.</p>

Nota: Se utiliza para resaltar texto estilísticamente sin semántica adicional.

El elemento <u> representa texto subrayado que no tiene un significado semántico adicional.

Sintaxis:

<u>Texto subrayado</u>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <u>texto subrayado</u>.</p>

Nota: Se utiliza para subrayar texto sin semántica adicional.

El elemento <s> representa texto que ya no es relevante o que debe considerarse como incorrecto.

Sintaxis:

<s>Texto tachado</s>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un <s>texto tachado</s>.</p>

Nota: Se utiliza para mostrar texto que ha sido eliminado o reemplazado.

El elemento <ruby> representa anotaciones de texto, comúnmente utilizadas en idiomas como el japonés o chino.

Sintaxis:

<ruby>Texto<rt>Anotación</rt></ruby>

Atributos:

No tiene atributos específicos.

Ejemplo:

<ruby>漢字<rt>kanji</rt></ruby>

Nota: Se utiliza para mostrar anotaciones de pronunciación o significado.

El elemento <rt> representa el texto de anotación dentro de un elemento <ruby>.

Sintaxis:

<rt>Texto de anotación</rt>

Atributos:

No tiene atributos específicos.

Ejemplo:

<ruby>漢字<rt>kanji</rt></ruby>

Nota: Se utiliza para mostrar la anotación de un carácter o palabra.

El elemento <rp> proporciona texto de respaldo para navegadores que no soportan <ruby>.

Sintaxis:

<rp>Texto de respaldo</rp>

Atributos:

No tiene atributos específicos.

Ejemplo:

<ruby>漢字<rp>(</rp><rt>kanji</rt><rp>)</rp></ruby>

Nota: Mejora la accesibilidad para navegadores que no soportan <ruby>.

El elemento <bdi> aísla una porción de texto que podría tener una dirección diferente al resto del texto.

Sintaxis:

<bdi>Texto aislado</bdi>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Usuario: <bdi>اسم</bdi></p>

Nota: Se utiliza para manejar texto con direcciones mixtas (LTR y RTL).

El elemento <bdo> anula la dirección del texto especificada en el documento.

Sintaxis:

<bdo dir="rtl">Texto</bdo>

Atributos:

dir: Especifica la dirección del texto ("ltr" o "rtl").

Ejemplo:

<p><bdo dir="rtl">Texto en dirección inversa</bdo></p>

Nota: Se utiliza para manejar texto con direcciones específicas.

El elemento <wbr> representa una posible posición de salto de línea en el texto.

Sintaxis:

<wbr>

Atributos:

No tiene atributos específicos.

Ejemplo:

<p>Este es un texto<wbr>con una posible ruptura de línea.</p>

Nota: Mejora la legibilidad al permitir saltos de línea en palabras largas.

El elemento <img> se utiliza para incrustar imágenes en un documento HTML.

Sintaxis:

<img src="URL" alt="Texto alternativo">

Atributos:

src: Especifica la URL de la imagen.
alt: Proporciona texto alternativo para la imagen.
width: Especifica el ancho de la imagen.
height: Especifica la altura de la imagen.

Ejemplo:

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">

Nota: Es importante incluir el atributo alt para mejorar la accesibilidad.

El elemento <iframe> se utiliza para incrustar otro documento HTML dentro del documento actual.

Sintaxis:

<iframe src="URL" width="600" height="400"></iframe>

Atributos:

src: Especifica la URL del documento incrustado.
width: Especifica el ancho del iframe.
height: Especifica la altura del iframe.
allow: Define permisos para el contenido incrustado.

Ejemplo:

<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>

Nota: Se utiliza comúnmente para incrustar videos, mapas o contenido externo.

El elemento <embed> se utiliza para incrustar contenido externo, como videos o aplicaciones.

Sintaxis:

<embed src="URL" width="600" height="400">

Atributos:

src: Especifica la URL del contenido incrustado.
width: Especifica el ancho del contenido incrustado.
height: Especifica la altura del contenido incrustado.
type: Especifica el tipo MIME del contenido.

Ejemplo:

<embed src="video.mp4" width="600" height="400" type="video/mp4">

Nota: Es una alternativa a <iframe> para contenido multimedia.

El elemento <object> se utiliza para incrustar contenido externo, como imágenes, videos o aplicaciones.

Sintaxis:

<object data="URL" width="600" height="400"></object>

Atributos:

data: Especifica la URL del recurso incrustado.
type: Especifica el tipo MIME del recurso.
width: Especifica el ancho del contenido incrustado.
height: Especifica la altura del contenido incrustado.

Ejemplo:

<object data="documento.pdf" type="application/pdf" width="600" height="400"></object>

Nota: Es una alternativa a <embed> para contenido incrustado.

El elemento <video> se utiliza para incrustar videos en un documento HTML.

Sintaxis:

<video src="URL" controls width="600" height="400"></video>

Atributos:

src: Especifica la URL del video.
controls: Muestra controles de reproducción.
autoplay: Reproduce el video automáticamente.
loop: Reproduce el video en bucle.

Ejemplo:

<video src="video.mp4" controls width="600" height="400"></video>

Nota: Es compatible con múltiples formatos de video, como MP4, WebM y Ogg.

El elemento <audio> se utiliza para incrustar archivos de audio en un documento HTML.

Sintaxis:

<audio src="URL" controls></audio>

Atributos:

src: Especifica la URL del archivo de audio.
controls: Muestra controles de reproducción.
autoplay: Reproduce el audio automáticamente.
loop: Reproduce el audio en bucle.

Ejemplo:

<audio src="audio.mp3" controls></audio>

Nota: Es compatible con múltiples formatos de audio, como MP3, Ogg y WAV.

El elemento <source> especifica múltiples recursos multimedia para elementos <video> o <audio>.

Sintaxis:

<source src="URL" type="tipo/mime">

Atributos:

src: Especifica la URL del recurso multimedia.
type: Especifica el tipo MIME del recurso.
media: Define una consulta de medios para el recurso.

Ejemplo:

<video controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
        Tu navegador no soporta el elemento video.
    </video>

Nota: Se utiliza para proporcionar alternativas de formato para contenido multimedia.

El elemento <track> se utiliza para especificar subtítulos, descripciones o capítulos para elementos <video> o <audio>.

Sintaxis:

<track src="URL" kind="tipo" srclang="idioma" label="etiqueta">

Atributos:

src: Especifica la URL del archivo de texto.
kind: Define el tipo de pista (ej. "subtitles", "captions").
srclang: Especifica el idioma de la pista (ej. "es", "en").
label: Proporciona una etiqueta para la pista.
default: Indica que esta pista es la predeterminada.

Ejemplo:

<video controls>
        <source src="video.mp4" type="video/mp4">
        <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español" default>
    </video>

Nota: Mejora la accesibilidad al proporcionar subtítulos o descripciones.

El elemento <picture> permite definir múltiples versiones de una imagen para diferentes dispositivos o resoluciones.

Sintaxis:

<picture>
        <source srcset="imagen-grande.jpg" media="(min-width: 800px)">
        <source srcset="imagen-pequeña.jpg" media="(max-width: 799px)">
        <img src="imagen-predeterminada.jpg" alt="Descripción de la imagen">
    </picture>

Atributos:

No tiene atributos específicos, pero utiliza elementos <source> e <img> como hijos.

Ejemplo:

<picture>
        <source srcset="imagen-hd.jpg" media="(min-width: 1200px)">
        <img src="imagen.jpg" alt="Descripción de la imagen">
    </picture>

Nota: Mejora el rendimiento al cargar imágenes optimizadas para diferentes dispositivos.

El elemento <map> define un mapa de imagen, que es una imagen con áreas clicables.

Sintaxis:

<map name="nombre">
        <area shape="rect" coords="34,44,270,350" href="enlace.html" alt="Descripción">
    </map>

Atributos:

name: Especifica el nombre del mapa de imagen.

Ejemplo:

<img src="imagen.jpg" usemap="#mapa" alt="Mapa de ejemplo">
    <map name="mapa">
        <area shape="rect" coords="34,44,270,350" href="enlace.html" alt="Descripción">
    </map>

Nota: Se utiliza junto con el elemento <area> para definir áreas clicables.

El elemento <area> define una región clicable dentro de un mapa de imagen.

Sintaxis:

<area shape="tipo" coords="coordenadas" href="URL" alt="Descripción">

Atributos:

shape: Define la forma del área (ej. "rect", "circle", "poly").
coords: Especifica las coordenadas del área.
href: Especifica el enlace asociado al área.
alt: Proporciona una descripción del área.

Ejemplo:

<map name="mapa">
        <area shape="circle" coords="75,75,50" href="enlace.html" alt="Círculo">
    </map>

Nota: Se utiliza dentro de un elemento <map> para definir áreas específicas.

El elemento <svg> se utiliza para definir gráficos vectoriales escalables en HTML.

Sintaxis:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg>

Atributos:

xmlns: Define el espacio de nombres XML para SVG.
width: Especifica el ancho del gráfico.
height: Especifica la altura del gráfico.

Ejemplo:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <rect width="100" height="100" fill="blue" />
    </svg>

Nota: SVG es ideal para gráficos que necesitan escalarse sin perder calidad.

El elemento <math> se utiliza para representar notación matemática en HTML.

Sintaxis:

<math xmlns="http://www.w3.org/1998/Math/MathML">
        <msup>
            <mi>x</mi>
            <mn>2</mn>
        </msup>
    </math>

Atributos:

xmlns: Define el espacio de nombres XML para MathML.

Ejemplo:

<math xmlns="http://www.w3.org/1998/Math/MathML">
        <mfrac>
            <mn>1</mn>
            <mn>2</mn>
        </mfrac>
    </math>

Nota: MathML es compatible con navegadores modernos para mostrar fórmulas matemáticas.

El elemento <canvas> se utiliza para dibujar gráficos dinámicos mediante JavaScript.

Sintaxis:

<canvas id="miCanvas" width="200" height="100">
        Tu navegador no soporta el elemento canvas.
    </canvas>

Atributos:

width: Especifica el ancho del lienzo.
height: Especifica la altura del lienzo.

Ejemplo:

<canvas id="miCanvas" width="200" height="100"></canvas>
    <script>
        const canvas = document.getElementById('miCanvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'green';
        ctx.fillRect(10, 10, 150, 75);
    </script>

Nota: Canvas es ideal para gráficos dinámicos y animaciones en la web.

El elemento <form> se utiliza para crear un formulario HTML que permite la entrada de datos del usuario.

Sintaxis:

<form action="URL" method="POST">...</form>

Atributos:

action: Especifica la URL a la que se enviarán los datos del formulario.
method: Define el método HTTP para enviar los datos (ej. "GET", "POST").
enctype: Especifica cómo se codificarán los datos (ej. "multipart/form-data").

Ejemplo:

<form action="/submit" method="POST">
        <input type="text" name="nombre" placeholder="Nombre">
        <button type="submit">Enviar</button>
    </form>

Nota: Los formularios son esenciales para la interacción entre el usuario y el servidor.

El elemento <input> se utiliza para crear campos de entrada de datos en un formulario.

Sintaxis:

<input type="text" name="nombre" placeholder="Nombre">

Atributos:

type: Especifica el tipo de entrada (ej. "text", "password", "email").
name: Define el nombre del campo para identificarlo en el servidor.
placeholder: Muestra un texto de ayuda dentro del campo.
required: Indica que el campo es obligatorio.

Ejemplo:

<input type="email" name="correo" placeholder="Correo electrónico" required>

Nota: Los campos de entrada son fundamentales para recopilar datos del usuario.

El elemento <textarea> se utiliza para crear un campo de entrada de texto de varias líneas.

Sintaxis:

<textarea name="comentarios" rows="4" cols="50"></textarea>

Atributos:

name: Define el nombre del campo para identificarlo en el servidor.
rows: Especifica el número de filas visibles.
cols: Especifica el número de columnas visibles.
placeholder: Muestra un texto de ayuda dentro del campo.

Ejemplo:

<textarea name="mensaje" rows="5" cols="40" placeholder="Escribe tu mensaje aquí"></textarea>

Nota: Es ideal para recopilar comentarios o mensajes largos.

El elemento <button> se utiliza para crear un botón interactivo en un formulario.

Sintaxis:

<button type="submit">Enviar</button>

Atributos:

type: Especifica el tipo de botón (ej. "submit", "reset", "button").
disabled: Desactiva el botón.

Ejemplo:

<button type="reset">Restablecer</button>

Nota: Los botones son esenciales para enviar o restablecer formularios.

El elemento <select> se utiliza para crear un menú desplegable en un formulario.

Sintaxis:

<select name="opciones">
        <option value="1">Opción 1</option>
        <option value="2">Opción 2</option>
    </select>

Atributos:

name: Define el nombre del campo para identificarlo en el servidor.
multiple: Permite seleccionar múltiples opciones.

Ejemplo:

<select name="colores" multiple>
        <option value="rojo">Rojo</option>
        <option value="azul">Azul</option>
    </select>

Nota: Es útil para seleccionar una o varias opciones de una lista.

El elemento <label> se utiliza para asociar una etiqueta descriptiva a un campo de formulario.

Sintaxis:

<label for="campo">Nombre</label>
    <input type="text" id="campo" name="nombre">

Atributos:

for: Especifica el id del campo al que está asociado el label.

Ejemplo:

<label for="correo">Correo Electrónico</label>
    <input type="email" id="correo" name="correo">

Nota: Mejora la accesibilidad al asociar etiquetas con campos de formulario.

El elemento <optgroup> se utiliza para agrupar opciones dentro de un menú desplegable (<select>).

Sintaxis:

<optgroup label="Grupo">
        <option value="1">Opción 1</option>
        <option value="2">Opción 2</option>
    </optgroup>

Atributos:

label: Especifica el nombre del grupo.
disabled: Desactiva el grupo de opciones.

Ejemplo:

<select>
        <optgroup label="Frutas">
            <option value="manzana">Manzana</option>
            <option value="naranja">Naranja</option>
        </optgroup>
    </select>

Nota: Mejora la organización de opciones en menús desplegables.

El elemento <option> define una opción dentro de un menú desplegable (<select>).

Sintaxis:

<option value="valor">Texto de la opción</option>

Atributos:

value: Especifica el valor que se enviará al servidor.
selected: Marca la opción como seleccionada por defecto.
disabled: Desactiva la opción.

Ejemplo:

<select>
        <option value="rojo" selected>Rojo</option>
        <option value="azul">Azul</option>
    </select>

Nota: Se utiliza dentro de <select> o <datalist> para definir opciones.

El elemento <fieldset> se utiliza para agrupar elementos relacionados dentro de un formulario.

Sintaxis:

<fieldset>...</fieldset>

Atributos:

disabled: Desactiva todos los controles dentro del <fieldset>.

Ejemplo:

<fieldset>
        <legend>Información Personal</legend>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre">
    </fieldset>

Nota: Mejora la organización y accesibilidad de los formularios.

El elemento <legend> proporciona un título o descripción para un <fieldset>.

Sintaxis:

<legend>Texto descriptivo</legend>

Atributos:

No tiene atributos específicos.

Ejemplo:

<fieldset>
        <legend>Información Personal</legend>
        <label for="nombre">Nombre:</label>
        <input type="text" id="nombre" name="nombre">
    </fieldset>

Nota: Mejora la accesibilidad al describir el propósito de un grupo de controles.

El elemento <datalist> proporciona una lista de opciones predefinidas para un campo de entrada (<input>).

Sintaxis:

<input list="opciones">
    <datalist id="opciones">
        <option value="Opción 1">
        <option value="Opción 2">
    </datalist>

Atributos:

No tiene atributos específicos.

Ejemplo:

<input list="colores" name="color" placeholder="Selecciona un color">
    <datalist id="colores">
        <option value="Rojo">
        <option value="Azul">
        <option value="Verde">
    </datalist>

Nota: Mejora la experiencia del usuario al proporcionar sugerencias de entrada.

El elemento <output> representa el resultado de un cálculo o acción del usuario.

Sintaxis:

<output name="resultado">...</output>

Atributos:

name: Define el nombre del elemento para identificarlo en el formulario.
for: Especifica los IDs de los elementos relacionados.

Ejemplo:

<form oninput="resultado.value=parseInt(a.value)+parseInt(b.value)">
        <input type="number" id="a" name="a"> +
        <input type="number" id="b" name="b"> =
        <output name="resultado" for="a b"></output>
    </form>

Nota: Es útil para mostrar resultados dinámicos en formularios.

El elemento <progress> representa el progreso de una tarea en ejecución.

Sintaxis:

<progress value="progreso" max="máximo"></progress>

Atributos:

value: Especifica el progreso actual.
max: Especifica el valor máximo de la tarea.

Ejemplo:

<progress value="70" max="100">70%</progress>

Nota: Es ideal para mostrar el progreso de tareas como descargas o cargas.

El elemento <meter> representa un valor escalar dentro de un rango conocido.

Sintaxis:

<meter value="valor" min="mínimo" max="máximo"></meter>

Atributos:

value: Especifica el valor actual.
min: Especifica el valor mínimo.
max: Especifica el valor máximo.
low: Define el rango bajo.
high: Define el rango alto.
optimum: Especifica el valor óptimo.

Ejemplo:

<meter value="0.7" min="0" max="1">70%</meter>

Nota: Es útil para mostrar valores como calificaciones o niveles de batería.

El elemento <table> se utiliza para crear tablas en HTML.

Sintaxis:

<table>...</table>

Atributos:

border: Especifica el ancho del borde de la tabla (obsoleto, usa CSS).

Ejemplo:

<table>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
        </tr>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
        </tr>
    </table>

Nota: Usa CSS para estilizar tablas en lugar de atributos obsoletos como `border`.

El elemento <tr> define una fila en una tabla.

Sintaxis:

<tr>...</tr>

Ejemplo:

<table>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
        </tr>
    </table>

Nota: Cada fila puede contener celdas de datos (<td>) o encabezados (<th>).

El elemento <th> define una celda de encabezado en una tabla.

Sintaxis:

<th>Texto del encabezado</th>

Atributos:

scope: Define el alcance del encabezado (ej. "col", "row").

Ejemplo:

<table>
        <tr>
            <th scope="col">Encabezado 1</th>
            <th scope="col">Encabezado 2</th>
        </tr>
    </table>

Nota: Los encabezados mejoran la accesibilidad al describir el contenido de las columnas o filas.

El elemento <td> define una celda de datos en una tabla.

Sintaxis:

<td>Contenido de la celda</td>

Ejemplo:

<table>
        <tr>
            <td>Dato 1</td>
            <td>Dato 2</td>
        </tr>
    </table>

Nota: Las celdas de datos contienen el contenido principal de la tabla.

El elemento <caption> proporciona un título o descripción para una tabla.

Sintaxis:

<caption>Título de la tabla</caption>

Ejemplo:

<table>
        <caption>Tabla de ejemplo</caption>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
        </tr>
    </table>

Nota: Mejora la accesibilidad al proporcionar contexto adicional para la tabla.

El elemento <thead> agrupa las filas de encabezado de una tabla.

Sintaxis:

<thead>...</thead>

Ejemplo:

<table>
        <thead>
            <tr>
                <th>Encabezado 1</th>
                <th>Encabezado 2</th>
            </tr>
        </thead>
    </table>

Nota: Mejora la organización y accesibilidad de las tablas.

El elemento <tbody> agrupa las filas de datos de una tabla.

Sintaxis:

<tbody>...</tbody>

Ejemplo:

<table>
        <thead>
            <tr>
                <th>Encabezado 1</th>
                <th>Encabezado 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Dato 1</td>
                <td>Dato 2</td>
            </tr>
        </tbody>
    </table>

Nota: Mejora la estructura y organización de las tablas.

El elemento <tfoot> agrupa las filas de pie de una tabla.

Sintaxis:

<tfoot>...</tfoot>

Ejemplo:

<table>
        <tfoot>
            <tr>
                <td colspan="2">Pie de tabla</td>
            </tr>
        </tfoot>
    </table>

Nota: Se utiliza para mostrar información resumida o notas al final de la tabla.

El elemento <col> se utiliza para aplicar estilos o atributos a columnas específicas de una tabla.

Sintaxis:

<col span="n">

Atributos:

span: Especifica cuántas columnas abarcará el elemento <col>.

Ejemplo:

<table>
        <colgroup>
            <col span="2" style="background-color: lightblue;">
            <col style="background-color: lightgreen;">
        </colgroup>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
    </table>

Nota: El elemento <col> debe estar dentro de un <colgroup> y no contiene contenido visible.

El elemento <colgroup> se utiliza para agrupar columnas en una tabla y aplicarles estilos o atributos.

Sintaxis:

<colgroup>
        <col span="n">
    </colgroup>

Atributos:

span: Especifica cuántas columnas abarcará el grupo.

Ejemplo:

<table>
        <colgroup>
            <col span="2" style="background-color: lightblue;">
            <col style="background-color: lightgreen;">
        </colgroup>
        <tr>
            <th>Encabezado 1</th>
            <th>Encabezado 2</th>
            <th>Encabezado 3</th>
        </tr>
    </table>

Nota: El elemento <colgroup> se utiliza para definir estilos o atributos para un grupo de columnas en una tabla.

El elemento <noscript> se utiliza para proporcionar contenido alternativo para usuarios cuyos navegadores no soportan JavaScript o tienen JavaScript deshabilitado.

Sintaxis:

<noscript>Contenido alternativo</noscript>

Ejemplo:

<noscript>
        Tu navegador no soporta JavaScript. Por favor, habilítalo para una mejor experiencia.
    </noscript>

Nota: Es útil para mejorar la accesibilidad y proporcionar mensajes informativos a los usuarios.

El elemento <template> se utiliza para definir fragmentos de contenido HTML que no se renderizan directamente en la página, pero que pueden ser clonados e insertados dinámicamente mediante JavaScript.

Sintaxis:

<template>...</template>

Ejemplo:

<template id="miTemplate">
        <p>Este contenido será clonado.</p>
    </template>
    
    <script>
        const template = document.getElementById('miTemplate');
        const clone = template.content.cloneNode(true);
        document.body.appendChild(clone);
    </script>

Nota: Es ideal para crear contenido dinámico en aplicaciones web.

El elemento <slot> se utiliza en componentes web para definir puntos de inserción donde se puede colocar contenido personalizado.

Sintaxis:

<slot>...</slot>

Ejemplo:

<template id="miComponente">
        <div>
            <slot>Contenido predeterminado</slot>
        </div>
    </template>
    
    <script>
        class MiComponente extends HTMLElement {
            constructor() {
                super();
                const template = document.getElementById('miComponente').content;
                const shadowRoot = this.attachShadow({ mode: 'open' });
                shadowRoot.appendChild(template.cloneNode(true));
            }
        }
        customElements.define('mi-componente', MiComponente);
    </script>
    
    <mi-componente>Contenido personalizado</mi-componente>

Nota: Es una característica clave de los Web Components para crear interfaces reutilizables.

El elemento <center> se utilizaba para centrar contenido, pero está obsoleto y no debe usarse.

Sintaxis:

<center>Contenido centrado</center>

Alternativa:

<div style="text-align: center;">Contenido centrado</div>

Nota: Usa CSS para centrar contenido en lugar de <center>.

El elemento <font> se utilizaba para definir el estilo, tamaño y color del texto, pero está obsoleto.

Sintaxis:

<font color="red" size="4">Texto</font>

Alternativa:

<span style="color: red; font-size: 16px;">Texto</span>

Nota: Usa CSS para estilizar texto en lugar de <font>.

El elemento <marquee> se utilizaba para crear texto o contenido en movimiento, pero está obsoleto.

Sintaxis:

<marquee>Texto en movimiento</marquee>

Alternativa:

<div style="animation: marquee 5s linear infinite;">Texto en movimiento</div>
    
    <style>
    @keyframes marquee {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
    </style>

Nota: Usa CSS y animaciones modernas para lograr efectos similares.

El elemento <big> se utilizaba para aumentar el tamaño del texto, pero está obsoleto.

Sintaxis:

<big>Texto grande</big>

Alternativa:

<span style="font-size: larger;">Texto grande</span>

Nota: Usa CSS para cambiar el tamaño del texto en lugar de <big>.

El elemento <blink> se utilizaba para hacer que el texto parpadee, pero está obsoleto.

Sintaxis:

<blink>Texto parpadeante</blink>

Alternativa:

<span style="animation: blink 1s step-start infinite;">Texto parpadeante</span>
    
    <style>
    @keyframes blink {
        50% { opacity: 0; }
    }
    </style>

Nota: Usa CSS para lograr efectos de parpadeo en lugar de <blink>.

El elemento <acronym> se utilizaba para definir acrónimos, pero está obsoleto.

Sintaxis:

<acronym title="HyperText Markup Language">HTML</acronym>

Alternativa:

<abbr title="HyperText Markup Language">HTML</abbr>

Nota: Usa <abbr> en lugar de <acronym> para definir acrónimos.

El elemento <applet> se utilizaba para incrustar applets de Java, pero está obsoleto.

Sintaxis:

<applet code="MiApplet.class" width="300" height="300"></applet>

Alternativa:

Usa tecnologías modernas como <iframe> o <object> para contenido incrustado.

Nota: Los applets de Java ya no son compatibles con la mayoría de los navegadores modernos.

El elemento <basefont> se utilizaba para establecer la fuente base de un documento, pero está obsoleto.

Sintaxis:

<basefont face="Arial" size="3" color="red">

Alternativa:

Usa CSS para definir estilos de fuente:
    body {
        font-family: Arial;
        font-size: 16px;
        color: red;
    }

Nota: Usa CSS para definir estilos de texto en lugar de <basefont>.

El elemento <dir> se utilizaba para listas de directorios, pero está obsoleto.

Sintaxis:

<dir>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </dir>

Alternativa:

<ul>
        <li>Elemento 1</li>
        <li>Elemento 2</li>
    </ul>

Nota: Usa <ul> para listas desordenadas en lugar de <dir>.

El elemento <frame> se utilizaba para definir un marco en un conjunto de marcos (<frameset>), pero está obsoleto.

Sintaxis:

<frameset cols="50%,50%">
        <frame src="pagina1.html">
        <frame src="pagina2.html">
    </frameset>

Alternativa:

Usa <iframe> para incrustar contenido en lugar de marcos.

Nota: Los marcos ya no son compatibles con HTML5 y deben evitarse.

El elemento <frameset> se utilizaba para definir un conjunto de marcos, pero está obsoleto.

Sintaxis:

<frameset cols="50%,50%">
        <frame src="pagina1.html">
        <frame src="pagina2.html">
    </frameset>

Alternativa:

Usa <div> y CSS para dividir el contenido en secciones.

Nota: Los marcos ya no son compatibles con HTML5 y deben evitarse.

El elemento <noframes> se utilizaba para proporcionar contenido alternativo para navegadores que no soportaban marcos, pero está obsoleto.

Sintaxis:

<noframes>
        Tu navegador no soporta marcos.
    </noframes>

Alternativa:

Usa contenido accesible directamente en HTML5.

Nota: Los marcos y <noframes> ya no son compatibles con HTML5.

El elemento <strike> se utilizaba para representar texto tachado, pero está obsoleto.

Sintaxis:

<strike>Texto tachado</strike>

Alternativa:

<s>Texto tachado</s>

Nota: Usa <s> o CSS para representar texto tachado.

El elemento <tt> se utilizaba para representar texto en una fuente monoespaciada, pero está obsoleto.

Sintaxis:

<tt>Texto monoespaciado</tt>

Alternativa:

<code>Texto monoespaciado</code>

Nota: Usa <code> o CSS para representar texto en una fuente monoespaciada.

HTML Components

Estructura del Documento

Metadatos

Secciones

Contenido Textual

Semántica de Texto

Contenido Incrustado

Formularios

Tablas

Scripting

Elementos Obsoletos

Estructura del Documento

Metadatos

Secciones

Contenido Textual

Semántica de Texto

Contenido Incrustado

Formularios

Tablas

Scripting

Elementos Obsoletos

<!DOCTYPE>

Sintaxis:

Atributos:

Ejemplo:

<html>

Sintaxis:

Atributos:

Ejemplo:

<head>

Sintaxis:

Atributos:

Ejemplo:

<body>

Sintaxis:

Atributos:

Ejemplo:

<title>

Sintaxis:

Atributos:

Ejemplo:

<meta>

Sintaxis:

Atributos:

Ejemplo:

<link>

Sintaxis:

Atributos:

Ejemplo:

<style>

Sintaxis:

Atributos:

Ejemplo:

<script>

Sintaxis:

Atributos:

Ejemplo:

<base>

Sintaxis:

Atributos:

Ejemplo:

<header>

Sintaxis:

Atributos:

Ejemplo:

<footer>

Sintaxis:

Atributos:

Ejemplo:

<section>

Sintaxis:

Atributos:

Ejemplo:

<article>

Sintaxis:

Atributos:

Ejemplo:

<aside>

Sintaxis:

Atributos:

Ejemplo:

<nav>

Sintaxis:

Atributos:

Ejemplo:

<main>

Sintaxis:

Atributos:

Ejemplo:

<span>

Sintaxis: