Marketing

10 cosas interesantes que pueden hacer las etiquetas HTML

Por el momento hay un total de 142 elementos HTML estandarizados por el W3C excluyendo aquellos que se encuentran en las etapas iniciales de estandarización y aquellos que se han vuelto obsoletos. Dicho esto, es posible perder u olvidar algunos de ellos que pueden ser útiles cuando se necesiten.

Anteriormente, revisamos algunos de los mejores trucos de CSS que puede haber pasado por alto. Esta publicación le recordará algunas de las etiquetas HTML que no sabía que podía usar para implementar funciones como:

15 hermosos efectos de texto creados con CSS

15 hermosos efectos de texto creados con CSS

Un texto o una tipografía hermosos harán que su diseño sea atractivo. En diseño web, CSS ayuda a estilizar … Lee mas

1. Imágenes de mapas

El HTML <map> Los elementos se pueden utilizar para crear mapas de imágenes. Mapas de imágenes son básicamente imágenes con áreas en las que se puede hacer clic, que se pueden vincular a otra página web u otras partes del mismo documento. Puede definir en qué áreas de una imagen se puede hacer clic simplemente mencionando las coordenadas XY correspondientes de esos puntos en la <area> elementos anidados dentro <map>.

Observación: Las áreas en las que se puede hacer clic no se pueden diseñar con CSS, por lo que si desea que estos marcadores tengan estilo, use un software de edición de imágenes simple para dibujar los marcadores.

Consejo: Si desea conocer las coordenadas de un punto en una imagen, abra la imagen en el software de edición de imágenes y mueva el cursor a ese punto, debería poder ver sus coordenadas en el propio software. Para GIMP, se muestra en el lado izquierdo de la barra inferior.

2. Sugerencias de entrada

Usar <datalist> para proporcionar una lista de sugerencias relevantes que aparecen al ingresar un valor de entrada.

3. Resalta el texto

El texto resaltado suele ser de color oscuro con un fondo claro. Puede lograr este efecto de texto resaltado solo con marcado. Cualquier texto dentro del <mark> tendrá ese efecto.

Puede personalizar el acentuar el color como background-color Propiedad CSS de <mark> y el color de texto como color propiedad.

4. Definir plantillas

Junto con HTML5 llegó el nuevo <template> elemento. O <template> El elemento contiene marcado dentro de él que no es procesado por los navegadores, el marcado que implica debe usarse para generar contenido dinámico en la página usando JavaScript.

LEER  🔴 Análisis SEO de webs en directo 🔴 Aplicando machete a webs

Por ejemplo, suponga que tiene un <table> donde las filas deben agregarse dinámicamente, simplemente puede colocar el marcado para una fila vacía de esa tabla dentro de la <template> y, cuando sea necesario, llame a una función de JavaScript que contenga un script para copiar el marcado desde dentro de las etiquetas de la plantilla y agregarlo al marcado de la tabla. Esto no es compatible con IE.

5. Bellas letras

La letra pequeña se refiere al texto del documento, que generalmente se imprime en tamaño muy pequeño, que contiene información como condiciones, términos, restricciones, citas, derechos legales, etc. <small> La etiqueta HTML se puede utilizar para mostrar hermosas impresiones. Desde HTML5 en adelante, el <small> La etiqueta no solo muestra texto estilizado con letra pequeña, sino que también define semánticamente lo mismo que las exenciones de responsabilidad y las advertencias legales.

6. Asignar una URL base

O <base>El elemento HTML es muy útil cuando tiene varios enlaces en su documento con las mismas URL de dominio; le permite agregar una URL base al documento, lo que a su vez le permite agregar solo URL relativas a otros enlaces en la página, según sea necesario.

Observación: Se hará referencia a todas las URL relativas de la página en función de la URL base. Si tiene algún enlace con un dominio diferente, asegúrese de asignarle la URL completa.

7. Imágenes receptivas

El desarrollo web receptivo está de moda, con un acceso móvil cada vez mayor. Las imágenes se pueden cambiar a diferentes tamaños de pantalla con marcado. O <picture> El elemento HTML5 le permite agregar múltiples fuentes de imágenes para diferentes medios a la imagen que contiene.

Observación: Esto solo funciona para Chrome. Tendrás que definir dom.image.picture.enable por true adentro about:config en Firefox.

8. Selector de color

HTML5 introdujo muchos nuevos elementos de tipo de entrada; el elemento de entrada de color es uno de ellos. Le permite elegir un color en una página web con la ayuda de un selector de color.

9. Opciones de grupo

Si tiene muchas opciones en una lista desplegable y le gustaría mostrarlas agrupadas, la <optgroup> elemento hará el trabajo. También puede diseñar los grupos con CSS.

10. El <noscript> elemento

La marca en el interior <noscript> es representado por el navegador solo cuando el script está deshabilitado. Esta etiqueta es útil para que los usuarios sepan cuándo la secuencia de comandos está deshabilitada en sus navegadores y para proporcionar mecanismos alternativos de respaldo para los componentes de las páginas web que ya no funcionarán sin JavaScript.


 <head>
 <noscript><link rel="stylesheet" href="https://www.hongkiat.com/blog/cool-useful-html-tags/noscript_fallback.css"></noscript>
 </head>
 <body>
 <noscript><h2>Javascript is disabled in your browser.</h2></noscript>
 </body>
 

Lea ahora: 15 trucos útiles de CSS que puede haber pasado por alto

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.

¿Te gusta nuestro contenido?Recibe noticias y estrategias digitales a tu correo.

No pierda la oportunidad de recibir también descuentos de nuestros servicios.