Platzi
Platzi

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

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

10 trucos en HTML que te volarán la cabeza 🤯

36790Puntos

hace 19 días

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar en el desarrollo web online y a construir sitios para internet de manera eficiente.

Hablemos de HTML, sí, leiste bien de HTML.

HTML ha ido creciendo y evolucionando junto con nosotros. ¿Alguna vez te ha pasado que ves a una persona que nació allá por los lejanos 2000 y no puedes creer lo mucho que creció y que ya en realidad es mayor de edad?

Bueno, algo así pasa con HTML, era de una forma muy diferente allá en los 2000, pero ahora cuando le volvemos a dar un vistazo a ver qué paso con el viejo y conocido HTML, seguimos viendo esa cara conocida pero con nuevas etiquetas destinadas a hacer quizá nuestra maquetación un poco más sencilla.

Y te estarás preguntando ahora ¿cuáles son esas etiquetas de las que me hablas Alex? Bueno empecemos a revisarlas una por una.

1. Color picker

En HTML la etiqueta input nos ofrece gran variedad de elementos de entrada, entre ellos tenemos un selector de color, el cual muestra una interfaz que permite al usuario seleccionar un color.

El valor del este input del tipo color es una cadena de siete caracteres en la cual se especifica un color RGB en su forma hexadecimal, por lo que los valores de color seleccionados por el usuario son compatibles con CSS.

<inputtype="color">

Este input puede contener otros atributos como el value para definir un color predeterminado en el selector de color.

<inputtype="color"value="#00FF00">
color-picker.png

2. Progress bar

¿Quieres indicar en tu página el progreso de una tarea? Bueno, HTML ya tiene una etiqueta que te muestra una barra de progreso sin mucha complicación.

Su sintaxis básica es la siguiente, pero se puede jugar con sus atributos para sacarle todo el jugo.

<progress></progress>

Los atributos de la etiqueta progress son value y max, los cuales se usan para definir el valor actual de la barra de progreso y el valor máximo de la misma.

<progressid="progress-bar"max="100"value="30"></progress>
progress-bar.png

3. Optgroup

Esta etiqueta permite agrupar diferentes opciones de un select, esto permite hacer agrupaciones por temáticas. El nombre de cada grupo se define con el atributo label, esto es lo que usarán los navegadores para mostrar como nombre del grupo.

<select><optgrouplabel="Comida mexicana"><option>Tacos</option><option>Enchiladas</option></optgroup><optgrouplabel="Comida colombiana"><option>Bandeja Paisa</option><option>Arepas</option></optgroup></select>
optgroup.png

4. Acronym

La etiqueta acronym sirve para definir un acrónimo, es decir, las siglas de una palabra. Tiene un funcionamiento similar a la etiqueta abbr con la diferencia de que acronym es exclusivamente para acrónimos la anterior es para abreviaciones.

<acronymtitle="World Wide Web">WWW</acronym>
acronym.png

5. Figure

Figure es una etiqueta que permite agregar una imagen, ilustración o diagrama y a su vez asociarle una descripción o título.

La clave de esta etiqueta es que nos permite asociar cualquier cosa con una descripción, de tal forma que quedan asociados semánticamente, para lograr esto se utiliza en conjunto con figcaption para la descripción.

<figure><imgsrc="https://images.unsplash.com/photo-1481349518771-20055b2a7b24"><figcaption>Banana con fondo rosa.</figcaption></figure>
figure.png

6.Map

Esta etiqueta como su nombre lo indica es un mapa, pero no es cualquier mapa, es un mapa de imagen que se puede utilizar para generar uno o más hipervínculos en una imagen.

En otras palabras, map es una imagen con área en la que se puede hacer clic y trabaja en conjunto con la etiqueta area la cual es la encargada de definir los espacios interactivos de la imagen.

<imgclass="map"src="https://medplus.co.nz/media/thumbnails/blog/entry/2020/05/15/Green_and_red_800__600_horizontal.png.0x300_q90_crop-smart_upscale.png"alt="Workplace"usemap="#workmap"><mapname="workmap"><areashape="rect"coords="0,0,350,110"href="https://en.wikipedia.org/wiki/Green"><areashape="rect"coords="0,110,350,220"href="https://en.wikipedia.org/wiki/Red"></map>
map.png

7. Párrafo editable

La etiqueta de párrafo, mejor conocida como p tiene un atributo llamado contenteditable que permite a cualquier párrafo volverse editable en el navegador.

<pcontenteditable="true">Este es un parrafo editable.</p>
editable.png

8. Tooltip

¿Sabías que el párrafo no es la única etiqueta que tiene atributos que le dan ciertos superpoderes? El span los tiene, en este caso es el de title que crea un tooltip utilizando únicamente HTML.

<spantitle="Este es un tooltip.">¡Pasa el mouse sobre mí!</span>
tooltip.png

9. Noscript

Esta etiqueta permite definir un contenido alternativo que será mostrado en caso de que el usuario tenga deshabilitado los scripts en su navegador o que use un navegador que no admita scripts.

<noscript><h2>Sorry, your browser does not support JavaScript!</h2></noscript>

10. Source

La última etiqueta es source la cual permite definir diferentes versiones de un archivo multimedia, o sea, audio, video o imágenes. Un elemento multimedia puede contener uno o más elementos source, cada uno con una versión diferente, en el caso de las imágenes, cada source tendrá una imagen en formato diferente o en resolución diferente.

<picture><sourcemedia="(min-width:650px)"srcset="https://images.unsplash.com/photo-1514848567240-a81cb051807a"><sourcemedia="(min-width:465px)"srcset="https://images.unsplash.com/photo-1618252256389-7c0963af7b8a"><imgsrc="https://images.unsplash.com/photo-1585742943500-0162472c7bf9"alt="Flowers"></picture>
source.png

En este CodePen podrás encontrar todos los ejemplos mostrados, no dudes en ir a revisarlos y experimentar con ellos.


👋🏻 Concluyendo

HTML ha crecido muchísimo desde su primera aparición en los 80’s, ahora es ese lenguaje de marcado chévere que quiere hacernos la vida más fácil a los desarrolladores incluyendo más funcionalidades en sus etiquetas.

Si conoces más etiquetas que creas que deberían estar en esta lista déjalas en los comentarios y si quieres perfeccionar tus habilidades con HTML te invito a tomar el Curso Definitivo de HTML y CSS con nuestro excelente profesor Diego de Granda.

Curso Definitivo de HTML y CSS
Curso Definitivo de HTML y CSS

Curso Definitivo de HTML y CSS

Aprende HTML y CSS desde cero, sin conocimientos previos. Conoce todo sobre etiquetas HTML, semántica, CSS, como dar estilos a los elementos de tu sitio web, medidas EM/REM, modelo de caja y mucho más. Aprenderás todo lo que necesitas para empezar en el desarrollo web online y a construir sitios para internet de manera eficiente.
Alex
Alex
alexcamachogz

36790Puntos

hace 19 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
10
22864Puntos

Hoy aprendí una nueva etiqueta de HTML en el trabajo: small

¿De que trata?
El elemento HTML <small> hace el tamaño del texto una talla más pequeña (por ejemplo, de largo a mediano, o de pequeño a extra pequeño) que el tamaño mínimo de fuente del navegador.

<small>Soy un texto chiquito. Toy chiquito </small>
2
22864Puntos
19 días

Aprovecho a compartirla y dar un extra 😂. 🌟.

2
32352Puntos
18 días

Muy buen aporte Darkus! Que vaya bien el trabajo 😎

2
36790Puntos
18 días

Buenísimo, gracias por compartirla 😄

5
12943Puntos

Super interesante esos trucos. Hice un web page con todos los trucos funcionando.
Copia y pega este codigo en tu editor

😄:



<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>.image{
            width: 300px;
        }
        body{
            background-image: linear-gradient( 135deg, #FFDB01 10%, #0E197D 100%);
        }
    </style></head><body><center><h1>Selecciona un color:</h1><br><inputtype="color"value="#00FF00"><br><br><br><h1>Progress bar</h1><progressid="progress-bar"max="100"value="5"></progress><br><br><br><h1>Optgroup:</h1><select><optgrouplabel="Comida mexicana"><option>Tacos</option><option>Enchiladas</option></optgroup><optgrouplabel="Comida colombiana"><option>Bandeja Paisa</option><option>Arepas</option></optgroup></select><br><br><h1>Acronym</h1><br><acronymtitle="World Wide Web">WWW</acronym><br><br><br><figure><h1>Figure</h1><imgclass="image"src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24"><figcaption>Banana con fondo rosa.</figcaption></figure><br><br><br><h1>Map</h1><imgclass="map"src="https://medplus.co.nz/media/thumbnails/blog/entry/2020/05/15/Green_and_red_800__600_horizontal.png.0x300_q90_crop-smart_upscale.png"alt="Workplace"usemap="#workmap"><mapname="workmap"><areashape="rect"coords="0,0,350,110"href="https://en.wikipedia.org/wiki/Green"><areashape="rect"coords="0,110,350,220"href="https://en.wikipedia.org/wiki/Red"></map><br><br><br><h1>Parrafo editable</h1><pcontenteditable="true">Este es un parrafo editable.</p><br><br><br><h1>Tooltip</h1><spantitle="Este es un tooltip.">¡Pasa el mouse sobre mí!</span><br><br><br><noscript><h2>Sorry, your browser does not support JavaScript!</h2></noscript><br><br><br><h1>Source</h1><picture><sourcemedia="(min-width:650px)"class="image"srcset="https://images.unsplash.com/photo-1514848567240-a81cb051807a"><sourcemedia="(min-width:465px)"class="image"srcset="https://images.unsplash.com/photo-1618252256389-7c0963af7b8a"><imgclass="image"src="https://images.unsplash.com/photo-1585742943500-0162472c7bf9"alt="Flowers"></picture><br></center></body></html>
4
22860Puntos

Hehehe con cada ejercicio que veía quería hacerlo, que bien que al final está el CodePen 🤭

Algunos elementos los investigaré un poco más a fondo, me intriga saber como afectan al SEO de un sitio 😀

💪🏻 Super post, aunque me hace sentir más viejo haha 👴🏻

3
22864Puntos
18 días

Wat? Se puede escribir sin colocar nada??? XD
Basta de buggear las cosas Luiiiiiiiiis 😭😭😭😭.

Aja, la imagen que habia colocado:
photo_2021-11-17_08-36-34.jpg

3
4238Puntos

En qué casos usar <figure> y en qué casos usar <picture>?

2
22864Puntos
18 días

<Picture>
El elemento HTML <picture> es un contenedor usado para especificar múltiples elementos <source> y un elemento <img> contenido en él para proveer versiones de una imagen para diferentes escenarios de dispositivos.

<Figure>
S utiliza mas que todo para darle una descripcion con <figcaption> a la imagen y te ayuda en la semantica, mejorando asi el SEO

2
22864Puntos
18 días

La encontré en Twitter de George Moller

2
20848Puntos

Excelente!
Justo en la etapa que me estoy volviendo amigo de HTML!!
Saludos Alex!

2
18091Puntos

alla por el 2016 abrie este blog en el que hago dowland de mis pensamientos e inquietudes. https://viajesybibliotecas.blogspot.com/
le modifique el html lo hice con una platilla que me descargue y ni recuerdo como lo hice }, pero estuvo genila

1
36790Puntos
17 días

Hubo una época en la que todos creamos un blog hehe yo lo hice aunque nunca me animé a usar código hecho por mi 😅

2
16512Puntos

Wow no conocía muchas, excelente post! Queremos un curso de HTML actualizado de 2021 🤭

2
22440Puntos

Post directo a mi Notion. Muy bueno 😄

2
1986Puntos

Muy buenos tips, la mitad no los conocía!

2
32352Puntos

Excelentes etiquetas y atributos, había usado solo la de figure, pero de ahí en fuera ninguna más. El curso definitivo de HTML y CSS es un excelente curso para entender muy bien estas 2 tecnologías. Muy buen post 🙌🏻

1
36790Puntos
17 días

Lo más interesante de todo es que HTML sigue renovándose e incluyendo características en sus etiquetas que antes solo eran accesibles a través de JS y CSS.

2
8289Puntos

excelente apenas estoy aprendiendo pero este curso me sera de gran utilidad en mi desarrollo profesional

2
1742Puntos

Gracias, muy bueno tomare nota.
digitador_01.jpg

1
1424Puntos

Que bien, estoy por empezar el curso de HTML y CSS

1
4629Puntos

Más que genial que HTML se actualice contantemente, que siga creciendo y siempre sea ese soporte para el desarrollo web.

1
1420Puntos

Muy buenos para utilizar en proyectos Web.

1
2618Puntos

Muy bueno!!! Visitaré el curso …

1

No me quedó muy claro el funcionamiento de Source

1
796Puntos
19 días

La imagen a mostrar cambia según el width en el ejemplo

1
36790Puntos
18 días

En cada source hay una regla de cuando mostrar la imagen, en este caso según el width, puedes probar el codepen y cambiar el ancho del navegador y ver como las imágenes cambian 😄

1
15478Puntos

Guardado cada tip, hay opciones que uno da por sentadas pero hay mucha mas funcionalidad que chevere

1
1177Puntos

Muy interesante el aporte gracias

1
10555Puntos

La barra de progreso no también se puede hacer con Bootstrap.

1
988Puntos

es algo que no conocía