94

44 etiquetas HTML que debes conocer

35482Puntos

hace 2 meses

Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Ahora que ya tienes todos los conocimientos de HTML y CSS, estás listo para este curso práctico en el cual tendrás un reto: clonar la página de Google. Reforzarás conceptos como posicionamiento, modelo de cajas, tipos de Display, selectores como clases, IDS, Flexbox y Grid.

Aprender qué es HTML y cómo usarlo es clave cuando quieres entrar al mundo del desarrollo web. Es duro al inicio, pero el esfuerzo vale la pena una vez que llegas a la meta de convertirte en desarrollador o desarrolladora web.

En HTML la gran mayoría del tiempo te la pasarás usando etiquetas. Tú y yo sabemos que son DEMASIADAS las que existen, y es casi imposible aprendernos todas de memoria, así que te preparamos un regalo que te va a gustar. 💚

Guía definitiva: etiquetas HTML esenciales

Hemos creado una guía completa con las 44 etiquetas HTML que debes conocer. Además, al final del blogpost encontrarás una imagen descargable que contiene todas las etiquetas.

La estructura

Antes de empezar, debes entender cuál es la estructura de una etiqueta HTML. La gran mayoría están compuestas por:

  1. Apertura
  2. Atributo
  3. Valor
  4. Contenido
  5. Cierre
estructura etiqueta HTML

Apertura y cierre

La apertura y el cierre siempre llevan el nombre de la etiqueta HTML que usarás, y son las que sirven para delimitar el contenido de la misma.

Atributo y valor

El atributo son distintos ingredientes o modificaciones que puedes hacer a la etiqueta. Como por ejemplo colocarle un ID, especificar algún evento (como los casos de onsubmit y onclick), o modificar el aspecto visual (como cambiarle el color a un texto).

El valor es la especificación de estas modificaciones. ¿Qué debe suceder después del onsubmit? ¿Qué color debe tener el texto? ¿Qué ID tendrá la etiqueta?

Contenido

Es la información que queremos que sea afectada por la etiqueta con sus modificaciones (atributos).

Ahora que entendemos esto, 👇 vamos con las etiquetas.

Etiquetas base

Son las primeras etiquetas que usas al crear tu archivo HTML. Necesarias para casi cualquier proyecto.

etiquetas HTML base

Etiquetas de texto

Esenciales para cuando deseas darle funciones, jerarquías y estilos diferentes a tu texto. Desde las etiquetas “h” que sirven para jerarquizar el texto de una página, hasta las famosas negrillas o cursivas.

etiquetas HTML de texto

Etiquetas multimedia

¿Deseas insertar un video, una imagen, un audio o un video de YouTube? Estas son tus etiquetas HTML. La más versátil de ellas es iframe, te permite insertar contenidos de otras páginas web.

etiquetas HTML multimedia

Etiquetas para estructurar el contenido

Si quieres darle orden al texto, las imágenes y todo lo que coloques en tu página web, usa estas etiquetas. Desde crear listas ordenadas de texto, hasta el <div> por el que en algún momento sufrimos intentando centrarlo.

etiquetas HTML para estructurar contenido

Etiquetas para crear tablas

Las tablas son MUY útiles, especialmente cuando traemos información de una base de datos y queremos darle orden y formato a los datos.

etiquetas HTML para crear tablas

Etiquetas para crear formularios

Y por último, las de creación de formularios. ¿Quieres crear la sección de contacto? ¿O el paso de registro o login de un usuario? Estas son tus etiquetas.

etiquetas HTML para crear formularios

Descarga la tabla con todas las etiquetas HTML

Y aquí va el regalo que te prometimos al inicio del post. Una imagen descargable con todas las etiquetas que mencionamos aquí.

Úsala como fondo de pantalla en tu computador, o como una imagen de apoyo para cuando estudies o programes.

👉 Descargar la tabla de etiquetas HTML en formato PNG.

👉 Descargar la tabla de etiquetas HTML en formato PDF.

Sheet-html.png

Si quieres poner en práctica tus conocimientos y usar la tabla de etiquetas HTML por primera vez, puedes mirar el Curso Práctico de HTML, donde aprenderás a hacer tu propia versión de Google usando solo HTML y CSS.

👀 ¿Te gustaría que hiciéramos otra tabla (cheat sheet) de otro tema? Cuéntanos en los comentarios.

Curso Práctico de HTML y CSS
Curso Práctico de HTML y CSS

Curso Práctico de HTML y CSS

Ahora que ya tienes todos los conocimientos de HTML y CSS, estás listo para este curso práctico en el cual tendrás un reto: clonar la página de Google. Reforzarás conceptos como posicionamiento, modelo de cajas, tipos de Display, selectores como clases, IDS, Flexbox y Grid.
Juan Felipe
Juan Felipe
vistoporjuan

35482Puntos

hace 2 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
21776Puntos

Jamas me habia quedado tan claro la etiqueta <label> como en estas imagenes jajaja
Leer que el label es el titulo del input fue tipo 🤯😂

2
313Puntos

¡Excelente! Para los que estamos camino a convertirnos en Web Developers esto es esencial, muchas gracias por el valioso aporte, saludos!

2
8793Puntos

Excelente articulo, lo ideal es hacer muchos proyectos para aprenderte las estructuras de cada etiqueta HTML, pero unas notas como estas son de ayuda por si algo se nos llega a olvidar.
Estaría genial que en la infografía se encuentren algunos atributos de las etiquetas como el href, el placeholder, el type, class, id, etc. Pero si está muy genial el resumen 😃

2
12072Puntos

Gracias, muy buen post. 👦🏻

2
5352Puntos

Wooow…! no solo es información valiosa, sino también se ve hermoso!

2
6841Puntos
2 meses

Muy buena combinación, por eso deberían de hacer una por cada módulo de CSS

2
35482Puntos
2 meses

La idea de hacer una tabla de CSS suena genial. ✍

2

Gran trabajo Juan, siempre me ha encantado como las infografías pueden condensar información valiosa de una forma visual y sencilla de entender. Ojalá pudiera poner este blog en favoritos y poderlo consultar a diario.

1
35482Puntos
2 meses

Gracias, Bryan. Aún no se puede poner blogs en favorito. Pero podrías descargar el archivo de la tabla para que lo guardes en tu computadora 😃

2
435Puntos

Buenisimo aporte, gracias!

2
3037Puntos

Amo sus infografías me ayudan mucho a entender

1
911Puntos

falto la etiqueta <section><section/>

1
35482Puntos
2 meses

Dentro de poco haremos una tabla que será la continuación de esta, con etiquetas nuevas 😀

1

Debi haber visto esto hace algunos ** años**, se ve perfecto

1
4759Puntos

Esta buenisma para los que estamos iniciando en este mundo del HTML

1
465Puntos

Gran aporte Bro, como dicen “Una imagen vale mas que mil palabras”

0
1568Puntos

genial, sería bueno una de CSS 😄