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 HTML para redes sociales Previsualizaciones en enlaces en redes sociales
fácil
Etiquetas HTML de precarga Resource Hints: Precarga anticipada de enlaces
avanzado

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
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
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
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>, <data> y <var> 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 HTML <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
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

Creación de un formulario
fácil
Controles: Campos de texto
fácil
Controles: Campos numéricos
fácil
Controles: Campos de fecha/hora
fácil
Controles: Casillas o botones
fácil
Controles: Listas de selección
fácil
Controles: Selección de color
fácil
Controles: Selección de archivos
fácil
Organización de campos
fácil
Botones de envío de formularios
fácil
Medidores y barras de progreso
fácil
Validaciones HTML5
fácil

Etiquetas de scripting

Etiqueta HTML <details> Elementos desplegables (Acordeón HTML)
fácil
La etiqueta <dialog> Ventanas de diálogo nativas y ventanas modales
medio
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>
avanzado
Los módulos Javascript (ESM) Etiqueta <script> con el atributo type=module
avanzado
Bloque de datos desconocido Etiqueta <script> con información desconocida
avanzado
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