125

44 etiquetas HTML que debes conocer

38571Puntos

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

38571Puntos

hace 5 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
5
27219Puntos

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

genial, sería bueno una de CSS 😄

2
4809Puntos

Amo sus infografías me ayudan mucho a entender

2
11468Puntos

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

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

2
2710Puntos

Gracias por el aporte

2
13721Puntos

Gracias, muy buen post. 👦🏻

2
912Puntos

falto la etiqueta <section><section/>

1
38571Puntos
4 meses

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

2
6696Puntos

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

2
7169Puntos
5 meses

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

2
38571Puntos
4 meses

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

2
10952Puntos

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
38571Puntos
4 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
466Puntos

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

2
6779Puntos

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

2
3173Puntos

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

1
5955Puntos

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

1

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