217

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

52070Puntos

hace 2 años

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

52070Puntos

hace 2 años

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

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

Aprovecho a compartirla y dar un extra 😂. 🌟.

2
46925Puntos
2 años

Muy buen aporte Darkus! Que vaya bien el trabajo 😎

2
52070Puntos
2 años

Buenísimo, gracias por compartirla 😄

6
19014Puntos

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

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

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

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

3
40887Puntos
2 años

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

La encontré en Twitter de George Moller

2
46925Puntos

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

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

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

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

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

2
13297Puntos

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

2
23048Puntos

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

2
25923Puntos

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

1
11758Puntos

Excelente artículo como siempre Alex.

1
1440Puntos

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

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

1
52070Puntos
2 años

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

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

1
4860Puntos

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

1
6129Puntos

Muy bueno!!! Visitaré el curso …

1
2506Puntos

es algo que no conocía

1
6762Puntos

Muy buenos para utilizar en proyectos Web.

1
20861Puntos

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

1
69207Puntos

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

1
8142Puntos

Muy interesante el aporte gracias

1
20325Puntos

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