Regálate acceso ilimitado a todos los cursos por 1 año a precio especial de Navidad 🎄

Antes:$199

Currency
$149/año
Regístrate

Termina en:

18D

06H

13M

05S

216

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

50625Puntos

hace un año

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.

Alex
Alex
alexcamachogz

50625Puntos

hace un año

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
13
34670Puntos

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>
3
34670Puntos
un año

Aprovecho a compartirla y dar un extra 😂. 🌟.

2
43475Puntos
un año

Muy buen aporte Darkus! Que vaya bien el trabajo 😎

2
50625Puntos
un año

Buenísimo, gracias por compartirla 😄

6
17656Puntos

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>
5
51203Puntos

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 👴🏻

4
34670Puntos
un año

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

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

3
34670Puntos
un año

<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
34670Puntos
un año

La encontré en Twitter de George Moller

2
43475Puntos

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 🙌🏻

2
50625Puntos
un año

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

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
50625Puntos
un año

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

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

2
13066Puntos

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

2
23564Puntos

Post directo a mi Notion. Muy bueno 😄

2
22761Puntos

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

2
22479Puntos

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

1
7175Puntos

Excelente artículo como siempre Alex.

1
1429Puntos

¿Alguien conoce de alguna web que te mantenga informado acerca de nuevas actualizaciones en torno a las etiquetas html y sus atributos y valores así como de hacks ingeniosos para sacarle el mejor provecho?

1

No me quedó muy claro el funcionamiento de Source

1
3860Puntos
un año

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

1
50625Puntos
un año

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
1635Puntos
un año

Tampoco lo había entendido y después de la explicación 🤯

1
4852Puntos

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

1
5584Puntos

Muy bueno!!! Visitaré el curso …

1
2363Puntos

es algo que no conocía

1
6111Puntos

Muy buenos para utilizar en proyectos Web.

1
15776Puntos

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

1
11378Puntos

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

1
4115Puntos

Muy interesante el aporte gracias

1
20051Puntos

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