Platzi
Platzi

LA EDUCACIÓN ES UN REGALO ¡ACCEDE AL PRECIO ESPECIAL!

Antes:$249
$149
Currency
Antes:$249
Ahorras:$100
COMIENZA AHORA
200

44 etiquetas HTML que debes conocer

41051Puntos

hace 9 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

41051Puntos

hace 9 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
9
37719Puntos

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 🤯😂

5
5205Puntos

genial, sería bueno una de CSS 😄

3
135Puntos

Gran Aporte! podrian hacer yn cheat sheet de JS.

2
5338Puntos

Amo sus infografías me ayudan mucho a entender

2
14029Puntos

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
1966Puntos

Muchas gracias por este post, me sirve bastante para mi base de HTML! 😃

2
4669Puntos

Gracias por el aporte

2
19194Puntos

Gracias, muy buen post. 👦🏻

2
4403Puntos

No puedo creer que en un par de días me pude aprender 44 etiquetas! Cuando estudiaba html en el bachillerato siempre se me hizo aburrido y tedioso, pero en realidad es muy fácil 👏🏼👏🏼👏🏼

2
169Puntos

Hola Juan!
Gracias por este gran resumen práctico, así me encanta tener claros mis apuntes 😃
Una cheat sheet para JS, por favor!

2
912Puntos

falto la etiqueta <section><section/>

1
41051Puntos
8 meses

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

2
3524Puntos

Esta bueno el aporte, muchas gracias

2
10304Puntos

Gracias, es un gran aporte para quienes estamos iniciando en el mundo de html 👍

2
6734Puntos

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

2
12004Puntos
9 meses

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

2
41051Puntos
8 meses

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

2
19165Puntos

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
41051Puntos
8 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
332Puntos

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

2
967Puntos

Buenisimo aporte, gracias!

2
466Puntos

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

2
18276Puntos

Excelente material, con lo visual se complementa mejor el eprendisaje. “Visualizacización” 💚👏 🙌

2
4340Puntos

Super útil este articulo.
Guardada la tabla de etiquetas

2
6783Puntos

Muchas gracias por este gran aporte habian etiquetas que yo las usaba de manera erronea

2
5627Puntos

Gracias Platzi! Lo mas importante es ponerlas en practica y no tratar de memorizarlas.

2
1381Puntos

Muchisimas gracias

1
18852Puntos

Que gran blogpost, al leerlo me permitio recordar muchas de las etiquetas que he usado y aprender algunas que no conocia, el realizar estas lecturas entre cursos me permiten avanzar mas, ahora estoy viendo el curso de Curso de Frontend Developer y complementa muy bien para seguir aprendiendo.

1
11197Puntos

No se mucho aún de esto pero creo que faltó una etiqueta que creo que se llama <span> 😅 de hecho no sé para qué es jajaja

1
11197Puntos

No se mucho aún de esto pero creo que faltó una etiqueta que creo que se llama <span> 😅 de hecho no sé para qué es jajaja

1
8533Puntos

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

1

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

1

Hola buenas noches saludos desde Venezuela soy principiante del curso ,acabó de aprender esto 3 día de platzi day🚀👩‍💻 🤓 fue excelente su metodología de aprendizaje para cada uno de nosotros👍💻 yo no pude tener mi certificado del curso 😭😩ya por motivos Del internet no me ayudó … Hasta cuándo sería platzi day y para cuándo lo estaría de nuevo con los cursos de platzi qué de asoció para tener mi certificado de apredimiento 👍🤓 gracias … Platzi saludos Sebastián Simancas