Lenguaje HTML5

Lenguaje de marcado HTML5 utilizado en el desarrollo web para crear el contenido y la estructura de una página web.

← VolverGuía rápidaMás sobre ManzDev

Introducción a HTML5

¿Qué es HTML? HTML, el código y las etiquetas
fácil
Estructura de etiqueta HTML Partes y características de una etiqueta HTML
fácil
Atributos comunes en HTML Atributos comunes en la mayoría de las etiquetas
fácil
Estructura del documento HTML Partes de una página o documento HTML
fácil
Validación de errores HTML Proceso de revisión de errores en el código HTML
medio
Etiquetas HTML obsoletas Etiquetas HTML que no deben ser utilizadas hoy en día
fácil
Tabla periódica de HTML5 Tabla periódica interactiva con los elementos HTML5

Etiquetas de cabecera

¿Qué son las etiquetas head? Bases de las etiquetas de cabecera de un documento HTML
fácil
La etiqueta HTML <meta> Metadatos e información del documento HTML
fácil
La etiqueta HTML <link> Establecer relaciones con otros documentos
fácil
Etiquetas para redes sociales Previsualizaciones en enlaces en redes sociales
fácil
Etiquetas HTML de precarga Resource Hints: Precarga anticipada de enlaces
difícil

Etiquetas de agrupación

Las etiquetas de agrupación Etiquetas con finalidad de organización y agrupación
fácil
La etiqueta HTML <div> Agrupaciones y divisiones de elementos
fácil
Las etiquetas HTML <ul> y <ol> Etiquetas HTML para crear listas de elementos
fácil
La etiqueta HTML <blockquote> Bloques de citas o referencias
fácil
La etiqueta HTML <pre> Escribir texto preformateado
medio
La etiqueta HTML <dl> Etiquetas HTML para crear listas de descripciones
fácil
La etiqueta HTML <figure> Contenedor de ilustraciones o figuras
2011 fácil

Etiquetas multimedia

La etiqueta HTML <img> Etiqueta HTML para mostrar imágenes en una web
fácil
La etiqueta HTML <picture> Etiqueta HTML de nueva generación para mostrar imágenes
2015 medio
La etiqueta HTML <video> Etiqueta HTML para indicar archivos de video en nuestra web
medio
La etiqueta HTML <audio> Etiqueta HTML para indicar archivos de audio en nuestra web
fácil
La etiqueta HTML <track> Etiqueta HTML para añadir subtítulos a nuestros videos o audios
2014 medio
La etiqueta HTML <iframe> Etiqueta HTML para colocar contenido externo en nuestra web.
fácil

Etiquetas de texto

Etiquetas semánticas de texto Etiquetas para separar la semántica de un texto
fácil
Enlaces o hipervínculos Etiqueta para referenciar otros documentos o recursos
medio
La etiqueta HTML <a> Etiqueta para crear enlaces a otras páginas
fácil
La etiqueta HTML <strong> Etiqueta para marcar un texto como importante o prioritario
fácil
La etiqueta HTML <em> Etiqueta para enfatizar un fragmento de texto
fácil
La etiqueta HTML <mark> Etiqueta para destacar textos y dirigir la atención
fácil
La etiqueta HTML <s> Etiqueta utilizada para marcar contenidos imprecisos o irrelevantes
fácil
La etiqueta HTML <span> Etiqueta para delimitar o agrupar fragmentos de texto
fácil
La etiqueta HTML <q> y <cite> Etiquetas para citar mensajes, frases o títulos de obras
fácil
La etiqueta HTML <sup> y <sub> Etiqueta para establecer superíndices y subíndices
fácil
La etiqueta HTML <small> Etiqueta para hacer pequeñas aclaraciones o advertencias
fácil
La etiqueta HTML <abbr> y <dfn> Etiqueta para mostrar abreviaturas o definiciones
fácil
La etiqueta HTML <br> y <wbr> Etiquetas para definir los diferentes saltos de línea
fácil
La etiqueta HTML <kbd> y <samp> Etiquetas para representar entrada o salida de información
fácil
La etiqueta HTML <time> y <data> Etiqueta para representar fechas o datos para máquinas
fácil
La etiqueta HTML <code> Etiqueta para establecer fragmentos de código en línea
fácil
La etiqueta HTML <ins> y <del> Etiqueta para indicar información añadida o eliminada
fácil

Etiquetas semánticas

Etiquetas semánticas de sección Etiquetas semánticas que van más allá del <div>
fácil
La etiqueta HTML <article> Etiqueta semántica para definir entidades importantes
fácil
La etiqueta HTML <nav> Etiqueta semántica para secciones de navegación
fácil
La etiqueta <header> y <footer> Etiqueta semántica para cabeceras y pie de sección
fácil
La etiqueta HTML <search> Etiqueta semántica para zonas de búsqueda
2023 fácil
La etiqueta HTML <section> Etiqueta semántica para secciones concretas la página
fácil
La etiqueta HTML <h1> ... <h6> Etiqueta semántica para títulares o encabezados
fácil
La etiqueta HTML <address> Etiqueta semántica para información de contacto
fácil

Etiquetas de tablas

La etiqueta HTML <table> Etiquetas para mostrar datos tabulares
fácil
Tablas con celdas irregulares Combinar celdas de una tabla HTML
medio
Organización de tablas HTML Etiquetas semánticas para organizar partes de la tabla
fácil
Columnas en tablas HTML Modificar características de columnas en tablas
fácil

Etiquetas de formularios

La etiqueta <form> Creación de formularios HTML para su envío
fácil
La etiqueta HTML <input> Controles: Campos de entrada de texto
fácil
La etiqueta HTML <textarea> Controles: Campos de entrada de texto extensos
fácil
La etiqueta <input> con números Controles: Campos de entrada numéricos
2014 fácil
La etiqueta <input> con fechas Controles: Campos de entrada con fechas
2021 fácil
La etiqueta <input> con casillas Controles: Casillas de verificación y radio
fácil
La etiqueta <input> con colores Controles: Campos para elegir colores
2019 fácil
La etiqueta HTML <select> Listas de opciones desplegables
fácil
La etiqueta HTML <datalist> Listas de opciones autocompletables
2019 medio
La etiqueta <input> con ficheros Controles: Envío de archivos
medio
Organización de campos Etiquetas para ordenar y organizar campos
fácil
La etiqueta HTML <progress> Controles: Barras de progreso
2014 fácil
La etiqueta HTML <meter> Controles: Medidores, umbrales y valores óptimos
2017 fácil
La etiqueta HTML <input> submit Botones de envío de formularios
fácil

Validaciones de formularios

¿Qué son las validaciones? La importancia de validar correctamente los datos
medio
Validaciones básicas con HTML5 Atributos de validación de HTML
fácil
El artibuto pattern (RegExp) Validaciones avanzadas con patrones en HTML
difícil

Etiquetas de scripting

Etiqueta HTML <script> Etiqueta para ejecutar código Javascript en una página
medio
Atributos defer y async Modos de carga de las etiquetas <script>
difícil
Los módulos Javascript (ESM) Etiqueta <script> con el atributo type=module
difícil
Bloque de datos desconocido Etiqueta <script> con información desconocida
difícil

Etiquetas interactivas

Etiqueta HTML <details> Elementos desplegables (Acordeón HTML)
2019 fácil
Popovers: Elementos emergentes Contenido emergente con atributo popover
2023 fácil
La etiqueta <dialog> Ventanas de diálogo nativas y ventanas modales
2022 medio
Eventos en HTML Conectar una acción de usuario con Javascript
medio
El atributo contenteditable Convertir el texto de una etiqueta en editable
medio
El atributo hidden Un atributo para marcar secciones como ocultas
medio

Aprender más

Si lo prefieres, puedes aprender también sobre estas temáticas:

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev