Descubre en nuestro cheatsheet definitivo de HTML una guía completa para dominar los elementos y atributos esenciales de HTML. Ideal para desarrolladores que buscan una referencia rápida y efectiva para crear páginas web dinámicas y accesibles.

<hr>Este cheat sheet te proporciona una base sólida para trabajar con una amplia variedad de elementos y atributos HTML. Utiliza estos recursos según las necesidades específicas de tu proyecto para crear contenido web dinámico, accesible y atractivo.<hr><h3>Estructura Básica</h3><ul><li>Documento HTML básico:<ul><li><code>&lt;!DOCTYPE html&gt;</code>: Declara el tipo de documento como HTML5.</li><li><code>&lt;html lang="es"&gt;</code>: Define el idioma principal del documento.</li><li><code>&lt;head&gt;</code>: Contiene metadatos, enlaces a estilos y scripts.<ul><li><code>&lt;meta charset="UTF-8"&gt;</code>: Especifica la codificación de caracteres (UTF-8 es común).</li><li><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</code>: Controla la escala y el ancho en dispositivos móviles.</li><li><code>&lt;title&gt;Título de la página&lt;/title&gt;</code>: Define el título del documento.</li><li><code>&lt;link rel="stylesheet" href="estilos.css"&gt;</code>: Enlaza una hoja de estilos externa.</li><li><code>&lt;script src="script.js" defer&gt;&lt;/script&gt;</code>: Enlaza un archivo de script JavaScript diferido.</li></ul></li><li><code>&lt;body&gt;</code>: Contiene el contenido visible de la página.</li></ul></li></ul><hr><h3>Atributos Globales</h3>Los atributos globales son aquellos que pueden ser utilizados con la mayoría de los elementos HTML. Son muy útiles para aplicar estilos, identificar elementos para scripts, o añadir metadata útil para accesibilidad.<ul><li>Ejemplo de <code>class</code> y <code>style</code>:<pre><code class="language-xml">&lt;p class="destacado" style="color: red; font-size: 18px;"&gt;Este es un texto destacado.&lt;/p&gt;</code></pre>En este ejemplo, la clase <code>destacado</code> y el estilo CSS inline se aplican al párrafo para cambiar el color y el tamaño del texto.</li><li>Ejemplo de <code>id</code>:<pre><code class="language-xml">&lt;div id="contenedor-principal"&gt;
 &lt;!-- Contenido del contenedor principal --&gt;
&lt;/div&gt;
</code></pre>El <code>id</code> "contenedor-principal" se utiliza para identificar de forma única este elemento, lo que permite referenciarlo fácilmente desde CSS o JavaScript.</li><li>Atributos de datos personalizados (<code>data-*</code>):<pre><code class="language-xml">&lt;button id="btn-accion" data-accion="guardar"&gt;Guardar&lt;/button&gt;</code></pre>El atributo <code>data-accion</code> permite almacenar datos personalizados que pueden ser utilizados por scripts para realizar acciones específicas.</li></ul><h3>Comentarios en HTML</h3>Los comentarios en HTML son útiles para documentar partes del código, hacer notas para ti mismo o para otros desarrolladores, o desactivar temporalmente partes del código sin eliminarlas por completo.<ul><li>Ejemplo de comentario simple:<pre><code class="language-xml">&lt;!-- Este es un comentario que describe el propósito de esta sección --&gt;
&lt;section&gt;
 &lt;!-- Contenido de la sección --&gt;
&lt;/section&gt;
</code></pre></li><li>Comentario multilínea:</li></ul><pre><code class="language-xml">&lt;!--
 Este es un comentario
 que ocupa varias líneas
 para explicar un bloque de código más extenso.
--&gt;
&lt;div&gt;
 &lt;!-- Contenido del div --&gt;
&lt;/div&gt;</code></pre>Los comentarios en HTML no afectan la visualización ni el comportamiento de la página web, por lo que son seguros para incluir notas útiles sin alterar la funcionalidad del sitio.<hr><h3>Texto y Encabezados</h3><ul><li>Texto y estilos:<ul><li><code>&lt;h1&gt;</code>, <code>&lt;h2&gt;</code>, <code>&lt;h3&gt;</code>, <code>&lt;h4&gt;</code>, <code>&lt;h5&gt;</code>, <code>&lt;h6&gt;</code>: Encabezados de nivel 1 a 6.</li><li><code>&lt;p&gt;</code>: Párrafo de texto.</li><li><code>&lt;strong&gt;</code>: Texto en negrita.</li><li><code>&lt;em&gt;</code>: Texto en cursiva.</li><li><code>&lt;mark&gt;</code>: Texto resaltado.</li><li><code>&lt;del&gt;</code>: Texto tachado.</li></ul></li></ul><hr><h3>Enlaces e Imágenes</h3><ul><li>Enlaces:<ul><li><code>&lt;a href="https://www.ejemplo.com"&gt;Enlace a otra página&lt;/a&gt;</code>: Enlace a una URL externa.</li><li><code>&lt;a href="#seccion1"&gt;Enlace interno&lt;/a&gt;</code>: Enlace a una sección dentro del mismo documento.</li></ul></li><li>Imágenes:<ul><li><code>&lt;img src="ruta_de_la_imagen.jpg" alt="Texto alternativo"&gt;</code>: Inserta una imagen con texto alternativo.</li></ul></li></ul><hr><h3>Listas y Tablas</h3><ul><li>Listas:<ul><li><code>&lt;ul&gt;</code>: Lista desordenada.<ul><li><code>&lt;li&gt;</code>: Elemento de lista desordenada.</li></ul></li><li><code>&lt;ol&gt;</code>: Lista ordenada.<ul><li><code>&lt;li&gt;</code>: Elemento de lista ordenada.</li></ul></li><li><code>&lt;dl&gt;</code>: Lista de definición.<ul><li><code>&lt;dt&gt;</code>: Término.</li><li><code>&lt;dd&gt;</code>: Definición del término.</li></ul></li></ul></li><li>Tablas:<ul><li><code>&lt;table&gt;</code>: Tabla.<ul><li><code>&lt;caption&gt;</code>: Título de la tabla.</li><li><code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code>: Encabezado, cuerpo y pie de la tabla.</li><li><code>&lt;tr&gt;</code>: Fila de la tabla.</li><li><code>&lt;th&gt;</code>: Celda de encabezado.</li><li><code>&lt;td&gt;</code>: Celda de datos.</li></ul></li></ul></li></ul><hr><h3>Formularios y Elementos Semánticos</h3><ul><li>Formularios:<ul><li><code>&lt;form action="/submit-datos" method="post"&gt;</code>: Formulario con método de envío.<ul><li><code>&lt;label for="nombre"&gt;Nombre:&lt;/label&gt;</code>: Etiqueta para un campo de entrada.</li><li><code>&lt;input type="text" id="nombre" name="nombre" required&gt;</code>: Campo de entrada de texto obligatorio.</li><li><code>&lt;input type="email" id="email" name="email" autocomplete="email"&gt;</code>: Campo de entrada de email con autocompletado.</li><li><code>&lt;input type="submit" value="Enviar"&gt;</code>: Botón de envío.</li><li><code>&lt;input type="reset" value="Limpiar"&gt;</code>: Botón para limpiar el formulario.</li></ul></li></ul></li><li>Elementos semánticos:<ul><li><code>&lt;article&gt;</code>: Contenido autónomo, como un artículo.</li><li><code>&lt;section&gt;</code>: Sección de contenido.</li><li><code>&lt;aside&gt;</code>: Contenido relacionado.</li><li><code>&lt;header&gt;</code>: Encabezado de una sección o de toda la página.</li><li><code>&lt;footer&gt;</code>: Pie de página.</li><li><code>&lt;nav&gt;</code>: Navegación principal.</li><li><code>&lt;main&gt;</code>: Contenido principal de la página.</li></ul></li></ul><hr><h3>Multimedia:</h3><ul><li>Elementos multimedia:<ul><li><code>&lt;audio controls&gt;</code>: Reproductor de audio.<ul><li><code>&lt;source src="audio.mp3" type="audio/mpeg"&gt;</code>: Fuente de audio con formato y tipo MIME.</li></ul></li><li><code>&lt;video controls width="400"&gt;</code>: Reproductor de video.<ul><li><code>&lt;source src="video.mp4" type="video/mp4"&gt;</code>: Fuente de video con formato y tipo MIME.</li></ul></li></ul></li></ul><hr><h3>Elementos de Texto y Estilos</h3><ul><li>Estilos de texto avanzados:<ul><li><code>&lt;abbr title="Texto completo"&gt;ABBR&lt;/abbr&gt;</code>: Abreviatura con título.</li><li><code>&lt;cite&gt;Título de una obra citada&lt;/cite&gt;</code>: Cita de un título de trabajo.</li><li><code>&lt;code&gt;Código fuente&lt;/code&gt;</code>: Texto formateado para código.</li><li><code>&lt;kbd&gt;Ctrl&lt;/kbd&gt;</code>: Tecla o entrada de teclado.</li><li><code>&lt;sup&gt;2&lt;/sup&gt;</code>: Texto sobrescrito (por ejemplo, para exponentes).</li><li><code>&lt;sub&gt;H&lt;sub&gt;2&lt;/sub&gt;O&lt;/sub&gt;</code>: Texto subíndice (por ejemplo, para fórmulas químicas).</li><li><code>&lt;pre&gt;Código preformateado&lt;/pre&gt;</code>: Bloque de texto preformateado.</li></ul></li></ul><hr><h3>Formularios Avanzados y Atributos</h3><ul><li>Campos de formulario avanzados:<ul><li><code>&lt;textarea rows="4" cols="50"&gt;Texto largo aquí&lt;/textarea&gt;</code>: Área de texto multilínea.</li><li><code>&lt;select&gt;</code> y <code>&lt;option&gt;</code>: Listas desplegables.<pre><code class="language-xml">&lt;select name="opciones"&gt;
 &lt;option value="opcion1"&gt;Opción 1&lt;/option&gt;
 &lt;option value="opcion2"&gt;Opción 2&lt;/option&gt;
 &lt;option value="opcion3"&gt;Opción 3&lt;/option&gt;
&lt;/select&gt;
</code></pre></li><li><code>&lt;fieldset&gt;</code> y <code>&lt;legend&gt;</code>: Agrupación de campos con leyenda.<pre><code class="language-xml">&lt;fieldset&gt;
 &lt;legend&gt;Datos personales&lt;/legend&gt;
 &lt;!-- Campos de formulario aquí --&gt;
&lt;/fieldset&gt;</code></pre></li></ul></li><li>Atributos de formulario adicionales:<ul><li><code>disabled</code>: Deshabilita un elemento de formulario.</li><li><code>readonly</code>: Hace que un campo de texto sea de solo lectura.</li><li><code>placeholder="Texto de ejemplo"</code>: Muestra un texto de ejemplo en un campo de entrada.</li><li><code>autofocus</code>: Establece el foco automáticamente en un campo al cargar la página.</li></ul></li></ul><hr><h3>Multimedia y Elementos Interactivos</h3><ul><li>Elementos multimedia avanzados:<ul><li><code>&lt;iframe src="https://www.youtube.com/embed/VIDEO_ID"&gt;&lt;/iframe&gt;</code>: Inserta contenido embebido como videos.</li><li><code>&lt;canvas width="200" height="100"&gt;&lt;/canvas&gt;</code>: Área para gráficos y dibujos generados con JavaScript.</li><li><code>&lt;svg width="100" height="100"&gt;...&lt;/svg&gt;</code>: Gráficos vectoriales escalables.</li></ul></li><li>Elementos interactivos:<ul><li><code>&lt;details&gt;</code> y <code>&lt;summary&gt;</code>: Elementos de detalles y su resumen.<pre><code class="language-xml">&lt;details&gt;
 &lt;summary&gt;Detalles&lt;/summary&gt;
 &lt;p&gt;Contenido de los detalles.&lt;/p&gt;
&lt;/details&gt;</code></pre></li><li><code>&lt;progress value="70" max="100"&gt;70%&lt;/progress&gt;</code>: Barra de progreso.</li><li><code>&lt;meter value="3" min="1" max="5"&gt;3 de 5&lt;/meter&gt;</code>: Medidor para valores dentro de un rango.</li></ul></li></ul><hr><h3>Elementos de Sección y Navegación</h3><ul><li>Elementos de sección avanzados:<ul><li><code>&lt;figure&gt;</code> y <code>&lt;figcaption&gt;</code>: Figura con leyenda.</li><li><code>&lt;address&gt;Dirección de contacto&lt;/address&gt;</code>: Información de contacto.</li></ul></li><li>Elementos de navegación:<ul><li><code>&lt;nav&gt;</code> con listas de navegación:<pre><code class="language-xml">&lt;nav&gt;
 &lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;Inicio&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Servicios&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/nav&gt;</code></pre></li></ul></li></ul><hr><h3>Elementos Semánticos y Accesibilidad</h3><ul><li>Elementos semánticos avanzados:<ul><li><code>&lt;main&gt;</code>: Contenido principal de la página.</li><li><code>&lt;article&gt;</code> y <code>&lt;section&gt;</code>: Partes específicas de un documento.</li><li><code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code> y <code>&lt;aside&gt;</code>: Para encabezado, pie de página y contenido relacionado respectivamente.</li></ul></li><li>Mejoras de accesibilidad:<ul><li><code>aria-*</code> atributos: Mejoran la accesibilidad para usuarios con discapacidades.<pre><code class="language-xml">&lt;button aria-expanded="false" aria-controls="menu"&gt;Menú&lt;/button&gt;</code></pre></li></ul></li></ul><hr><h3>Otros Elementos y Atributos Útiles</h3><ul><li>Otros elementos útiles:<ul><li><code>&lt;time datetime="2024-06-25"&gt;25 de junio de 2024&lt;/time&gt;</code>: Fecha y hora.</li><li><code>&lt;mark&gt;Texto resaltado&lt;/mark&gt;</code>: Texto destacado.</li><li><code>&lt;br&gt;</code>: Oportunidad de salto de palabra.</li></ul></li></ul>

Contenido

Cheatsheet definitivo de HTML: Domina elementos y atributos esenciales

@codechappie