En este momento hay un total de 142 elementos HTML estandarizados por el W3C excluyendo los que se encuentran en las fases iniciales de estandarización y los que quedaron obsoletos. Dicho esto, es posible pasar por alto u olvidar algunos de ellos que pueden ser útiles cuando sea necesario.
Anteriormente hicimos un resumen de algunos de los mejores trucos de CSS que podrías 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
En este momento hay un total de 142 elementos HTML estandarizados por W3C excluyendo los que se encuentran en las fases iniciales de estandarización y los que fueron Leer más
1. Imágenes del mapa
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 el <area> elementos anidados dentro <map>.
Nota: Las áreas en las que se puede hacer clic no se pueden diseñar a través de CSS, por lo que, si desea que se apliquen estilos a esos marcadores, 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 un software de edición de imágenes y mueva el cursor a ese punto, debería poder ver las 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 escribir un valor de entrada.
3. Resaltar texto
El texto resaltado generalmente tiene un color de texto oscuro con un fondo claro. Puede lograr ese efecto de texto resaltado solo con el marcado. Cualquier texto encerrado dentro del <mark> tendrá ese efecto.
Puedes personalizar el resaltar color con el background-color Propiedad CSS de <mark> y el color de texto con el color propiedad.
4. Definir plantillas
Junto con HTML5 llegó el nuevo <template> elemento. El <template> El elemento contiene un marcado en su interior que no es representado por los navegadores, el marcado encerrado por él se utilizará para generar contenidos dinámicos en la pagina usando JavaScript.
Por ejemplo, suponga que tiene un <table> donde las filas se agregarán dinámicamente, simplemente puede colocar el marcado de una fila vacía de esa tabla dentro del <template> etiqueta y, cuando sea necesario, llame a una función de JavaScript que contenga un script para copiar el marcado desde el interior de las etiquetas de la plantilla y agregarlo al marcado de la tabla. Esto no es compatible con IE.
5. Letra pequeña
La letra pequeña se refiere al texto del documento que generalmente se imprime en un tamaño muy pequeño que contiene información como condiciones, términos, restricciones, citas, derechos legales, etc. <small> La etiqueta en HTML se puede usar para mostrar letras pequeñas. A partir de HTML5 en adelante, el <small> La etiqueta no solo muestra un texto con estilo en letra pequeña, sino que también definirá semánticamente lo mismo que advertencias y descargos de responsabilidad legales.
6. Asigne una URL base
El <base>El elemento HTML es bastante útil cuando tiene múltiples enlaces en su documento con las mismas URL de dominio, le permite agregar una URL base al documento que a su vez le permite agregar solo URL relativas a otros enlaces en la página según sea necesario.
Nota: Todas las URL relativas en la página se referirán en función de la URL base, si tiene algún enlace con un dominio diferente, no olvide 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 alternar para diferentes tamaños de pantalla con marcado. El <picture> El elemento HTML5 le permite agregar varias fuentes de imágenes para diferentes medios para la imagen que contiene.
Nota: Actualmente, esto solo funciona en Chrome. tendrás que configurar dom.image.picture.enable a true en about:config en Firefox.
8. Selector de color
HTML5 introdujo muchos elementos nuevos 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 desea mostrarlas agrupadas, la <optgroup> elemento hará el trabajo. También puede diseñar los grupos con CSS.
10. El <noscript> elemento
El marcado dentro <noscript> es representado por el navegador solo cuando el script está deshabilitado. Esta etiqueta es útil para informar a los usuarios cuando la secuencia de comandos está deshabilitada en su navegador y para proporcionar cualquier mecanismo de respaldo alternativo para los componentes de las páginas web que dejarán de funcionar 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>
Ahora lea: 15 trucos útiles de CSS que podría haber pasado por alto
