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.
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">
¿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>
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>
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>
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>
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>
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>
¿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>
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>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>
En este CodePen podrás encontrar todos los ejemplos mostrados, no dudes en ir a revisarlos y experimentar con ellos.
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.
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>Aprovecho a compartirla y dar un extra 😂. 🌟.
Muy buen aporte Darkus! Que vaya bien el trabajo 😎
Buenísimo, gracias por compartirla 😄
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>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 👴🏻
Wat? Se puede escribir sin colocar nada??? XD
Basta de buggear las cosas Luiiiiiiiiis 😭😭😭😭.
Aja, la imagen que habia colocado:
En qué casos usar <figure> y en qué casos usar <picture>?
<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
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 🙌🏻
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.
Gracias, muy bueno tomare nota.
Excelente!
Justo en la etapa que me estoy volviendo amigo de HTML!!
Saludos Alex!
excelente apenas estoy aprendiendo pero este curso me sera de gran utilidad en mi desarrollo profesional
Muy buenos tips, la mitad no los conocía!
muuy buena informacion!!
Wow no conocía muchas, excelente post! Queremos un curso de HTML actualizado de 2021 🤭
Más que genial que HTML se actualice contantemente, que siga creciendo y siempre sea ese soporte para el desarrollo web.
es algo que no conocía
No me quedó muy claro el funcionamiento de Source
La imagen a mostrar cambia según el width en el ejemplo
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 😄
Tampoco lo había entendido y después de la explicación 🤯
Muy interesante el aporte gracias
La barra de progreso no también se puede hacer con Bootstrap.
Si se puede
Brutal
Excelente artículo como siempre Alex.
Gracias
Muy bueno!!! Visitaré el curso …
Muy buenos para utilizar en proyectos Web.
Que bien, estoy por empezar el curso de HTML y CSS
Guardado cada tip, hay opciones que uno da por sentadas pero hay mucha mas funcionalidad que chevere
Estás geniales!