470

44 etiquetas HTML que debes conocer

50711Puntos

hace 2 años

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.

Juan
Juan
vistoporjuan

50711Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
26
56304Puntos

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
8 meses

literalmente, que buena publicación haciendo la aclaración de cada una de las etiquetas

12
664Puntos

Gran Aporte! podrian hacer yn cheat sheet de JS.

7
934Puntos

Woww!!! 44 etiquetas, y yo apenas conozco un par =(
Pero no importa, vamos con toda por este largo y prometedor camino!! 😄

4
8975Puntos

Super útil este articulo.
Guardada la tabla de etiquetas

3
914Puntos

falto la etiqueta <section><section/>

2
50711Puntos
2 años

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

3
6817Puntos

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

3
19997Puntos
2 años

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

2
50711Puntos
2 años

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

1
3 meses

Que tal la tabla de CSS ya se encuentra disponible??

3
25879Puntos

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
50711Puntos
2 años

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 😃

3
22663Puntos

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

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

2
3008Puntos

Excelente material, bien explicado y esteticamente agradable

2
5285Puntos

gracias por el aporte, muy buena ayuda memoria 😄

2
1429Puntos

Me gusta la forma en la que presentan el contenido ¿Con qué aplicación crean esas herramientas visuales?

1
50711Puntos
8 meses

El equipo de diseño de Platzi las hace con Adobe Illustrator 😃

2
2732Puntos

Clarísima información! Y la tabla de regalo se va a impresión, la amé ❤️ Muchisimas gracias!

2
16896Puntos

Me encanta ❤️ Sería genial que hicieran otra tabla (cheat sheet) de Css, Python y Javascript.

2
5839Puntos

Uff tremendo aporte, muchas gracias.

2
4219Puntos

Excelente articulo, ahora entiendo que es una etiquet, para que sirve y cuando deben de ir, gracias y sigamos aprendiendo

2
4724Puntos

Me encantó esta forma de aprender las etiquetas, se hace muy fácil aprenderlas. me gustaría que también las pudieran hacer con JavaScript😊

2
2325Puntos

wow me encanta, es un gran aporte!

2
1002Puntos

Muy genial, les recomiendo probar abrir el código del navegador (Para chrome es ctrl+shift+i o F12) mientras van leyendo sobre las etiquetas y busquen dentro del mismo cada una, para que así vayan conociendo a grandes rasgos como funciona este.

2
6401Puntos

Uff gracias, esta muy bueno tener ese pdf a la mano cuando se esta comenzando en el diseño web.

2
17094Puntos

Gracias,. solo queda mucho por estudiar,. NUNCA PARES DE APREDNER! ✅

2
24174Puntos

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.

2
6064Puntos

Esta información y en especial las infografías como recursos adicionales de los cursos son muy muy muy buenas!! Permite resumir visualmente el contenido para consultarlo y fijar el conocimiento
Así da gusto nunca dejar de aprender!

2

gracias, en lo personal no uso apuntes en cuaderno, pues sé q nunca los veré, pero si veo ocasionalmente la galería, por ende e tomado la decision de guardar imagenes con apuntes o datos interesantes en mi galleria de google en un albun especifico y ya gracias a la inteligencia artificial de google puedo buscar rapidamente con palabras claves cualquier imagen ya guardada con mis apuntes

2

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

2

¡¡Genial!!
Un super Post muy buena explicación.

2
4828Puntos

Muchas gracias esta genial

2
5319Puntos

Me encantó, es muy útil.
¡Muchas gracias Juan Felipe!.

2
2356Puntos

Genial, gran resumen de las principales eqtiquetas para empezar en HTML

2
13875Puntos

Genial aporte Juan, me cae como anillo al dedo con el curso que estoy haciendo ahorita de frontend; Gracias!

2
1772Puntos

Excelente aporte. Facilita mucho el proceso de desarrollo cuando uno recien está aprendiendo 😁

2
421Puntos

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

2
5995Puntos

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

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

2
1982Puntos

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

2
3744Puntos

Esta bueno el aporte, muchas gracias

2
6522Puntos

Gracias por el aporte

2
7965Puntos

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

2
9446Puntos

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

2
25198Puntos

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

2
1383Puntos

Muchisimas gracias

2
4389Puntos

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

2
1378Puntos

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

2
26253Puntos

Gracias, muy buen post. 👦🏻

2
5560Puntos

Amo sus infografías me ayudan mucho a entender

1
1668Puntos

Muy buena infografía 👌

1
2834Puntos

Maravilloso ahora se por que los comentarios son etiquetas <textarea>

1
5345Puntos

Muchas gracias, excelente articulo, muy útiles esas infografías.

1
461Puntos

Cuando decís que Platzi no te puede simplificar la vida…va y PUM LO HACE MÁS TODAVÍA ♥

1
4394Puntos

Excelente aporte este contenido complementa bastante lo que he ido aprendiendo en el nuevo Curso de Programación Básica. 😄 :compu

1
1191Puntos

Ufff no se imaginan el gran aporte que hacen con estas etiquetas, estaba tan cerrado que me dije: “Ahora voy a tener que repetir las clases de Freddy”, pero podré seguir adelante.

1
12330Puntos

Veo por ejemplo algunas que faltan para que sea perfecta la plantilla. Por ejemplo:
<main></main>
<section></section>
<article></article>
Que semánticamente son mejores al organizar el contenido interno del body, reemplazan al div como organizador de contenido.

También dentro de las etiquetas de texto faltaría el <em></em> para dar énfasis a cierta parte del texto.

1
106Puntos

Buena la recomendacion en las etiquetas html algunas me la sabian otras no esta muy bueno el aporte a toda la comunidad que estamos en Platzi.

1

Excelente aporte. Muchas veces parece obvio pero este tipo de apuntes permite realizar consultas puntuales. ¡Éxitos!

1
6411Puntos

Excelente Post!

1
2561Puntos

super importante la informacion, tener claras las etiquetas en la documentacion es mas claro que en los videos en los que los profes van a toda velocidad y es mas dificil entender una etiqueta trantando de entender el tema como tal

1
4936Puntos

Excelente material. Concreto y fácil de entender. Felicidades al creador.

1
1246Puntos

Muchas gracias, con esto me quedo mas claro la estructura HTML ❤️

1
10Puntos

AMIGOS COMO HAGO CON QUE PROGRAMA EMPIEZO HACER LA PAGINA??

1

Gracias de verdad por la aclaración en varias etiquetas, hoy por fin pude salir de dudas de una manera muy ilustrativa

1
14005Puntos

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

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

1
12575Puntos

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