HTML es un lenguaje simple, pero su vocabulario es más grande de lo que crees. Aprenda todo sobre algunas de las etiquetas más inusuales que puede usar.
Conclusiones clave
- Utilice y etiquetas para crear secciones expandibles, brindando una experiencia fácil de usar y manteniendo un diseño limpio.
- Resalte contenido importante con la etiqueta, llamando la atención sobre palabras clave, frases o resultados de búsqueda en su página web.
- Agregue significado semántico a las fechas y horas usando la etiqueta, mejorando la accesibilidad para los usuarios con discapacidades que usan lectores de pantalla.
Como desarrollador web, debe estar bien versado en etiquetas HTML comunes como, , y que representan la estructura y el contenido de sus páginas web. Sin embargo, el lenguaje HTML ofrece mucho más.
Al explorar estas etiquetas únicas, puede mejorar la funcionalidad de sus aplicaciones web, haciéndolas destacar entre la multitud.
1. y
Imagina que tienes mucha información o contenido con el que no quieres abrumar a un lector de inmediato. El y ¡Las etiquetas vienen al rescate!
Estas etiquetas funcionan juntas para crear una sección expandible con un título o resumen que los usuarios de su sitio web pueden hacer clic para revelar. De forma predeterminada, el contenido dentro del elemento de detalles no se mostrará, manteniendo su página ordenada y organizada.
Sus visitantes pueden hacer clic fácilmente en el resumen para acceder a la información oculta.
<details>
<summary>Click to reveal more informationsummary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.p>
details>
Con estas etiquetas, puede ocultar grandes secciones de texto, código u otra información, proporcionando una experiencia fácil de usar y manteniendo un diseño limpio. Incluso pueden ayudarlo a refinar su habilidades como diseñador de interfaz.
2.
El La etiqueta le permite resaltar partes específicas de su contenido, haciéndolas resaltar visualmente. Cuando usas el elemento, los navegadores suelen aplicar un color de fondo amarillo al texto del interior, atrayendo la atención del lector hacia él.
Esta función es particularmente útil cuando desea enfatizar palabras clave, frases importantes o resultados de búsqueda en su página web.
<p>
You can use the <mark>markmark> tag to highlight important words or
phrases.
p>Por ejemplo, si su sitio web tiene una función de búsqueda, puede utilizar el etiqueta para resaltar las coincidencias de la consulta de búsqueda en los resultados, lo que facilita a los usuarios encontrar información relevante.
3.
¿Alguna vez se ha encontrado con situaciones en las que el contenido se vuelve obsoleto o ya no es relevante, pero aún desea mostrarlo con fines históricos o para indicar cambios a lo largo del tiempo?
Introducir el ¡etiqueta! Lo que representa tachado y representa cualquier contenido dentro del elemento con una línea en el medio.
<p>
This product is <s>out-of-stocks> currently available at a discounted
price!
p>En este ejemplo, el Agotado se mostrará el texto con una línea que lo atraviesa, lo que indica que el estado de existencias del producto ha cambiado.
4.
Cuando desee agregar significado semántico a fechas y horas en su contenido, el la etiqueta es útil.
Utilizando el fecha y hora atributo, puede especificar una versión legible por máquina de la fecha o la hora, lo que ayuda a los navegadores, motores de búsqueda y lectores de pantalla a comprender el contexto.
<p>
The Declaration of Independence was signed on
<timedatetime="1776-07-04">July 4, 1776time>.
p>Al usar el etiqueta, le da más estructura a su contenido y lo hace accesible a una gama más amplia de usuarios, incluidos aquellos con discapacidades que usan lectores de pantalla.
5.
Administrar texto en varios idiomas en su página web a veces puede ser un desafío, especialmente cuando cada parte requiere un formato diferente.
El La etiqueta viene al rescate al aislar una parte del texto que el navegador debe tratar de manera diferente debido a los diferentes requisitos de idioma.
<p>
<bdi>5,000bdi> people attended the conference.
p>En este ejemplo, el elemento envuelve el número 5,000. Esto asegura que, si el texto que lo rodea está en un idioma diferente o requiere un formato diferente, no interferirá con el número.
6. ,
Para la tipografía de Asia oriental, donde las guías de pronunciación, furigana u otras anotaciones se usan comúnmente encima o debajo de los caracteres, el, , y Las etiquetas entran en juego.
<p>
I'm learning
<ruby>漢<rt>かんrt>ruby>字<rp>(rp><rt>Kanjirt><rp>)rp>.
p>En este ejemplo, el elemento contiene el caracter 漢 (Kanji), y el elemento contiene la pronunciación かん (kan). El Los elementos proporcionan paréntesis alternativos para navegadores que no admiten anotaciones Ruby.
7.
Cuando tiene palabras largas que pueden romper su diseño, el etiqueta está aquí para ayudar. Sugiere una oportunidad para un salto de línea (oportunidad de salto de palabra) en una palabra larga, donde el navegador puede optar por ajustar el texto.
<p>
This is an example of a long url: https://www.example.org/<wbr>with/a/long/path/and/a? query=string.
p>En el ejemplo anterior, la URL larga incluye un elemento que permite al navegador dividirlo en dos líneas si es necesario, conservando el diseño del contenido circundante.
8. y
Para notaciones científicas o matemáticas, fórmulas químicas o notas al pie, puede utilizar el y etiquetas para texto de subíndice y superíndice, respectivamente.
<p>
The chemical formula for water is H<sub>2sub>O,
and the Pythagorean theorem is
a<sup>2sup> + b<sup>2sup> = c<sup>2sup>.
p>Este ejemplo utiliza el etiqueta para mostrar la 2 en H2O como un subíndice, mientras que el Las etiquetas muestran los exponentes en el teorema de Pitágoras.
9.
¿Necesita representar medidas escalares dentro de un rango conocido, como el uso del disco, calificaciones o puntajes de exámenes? El la etiqueta lo tiene cubierto.
Utilizando el valor, min, y máximo atributos, puede definir el valor actual, el valor mínimo y el valor máximo de la medición, respectivamente.
<metervalue="75"min="0"max="100">75%meter>En este ejemplo, el elemento representa una puntuación de examen de 75%.
10.
cuando lo necesites crear un cuadro de diálogo o una superposición de ventana para modales o interacciones emergentes modales de buen comportamiento, el la etiqueta es el camino a seguir. Puedes usar el abierto atributo para mostrar el cuadro de diálogo de forma predeterminada.
<dialogopen>
<p>This is a dialog box!p>
<button>Closebutton>
dialog>En este ejemplo, se muestra un cuadro de diálogo simple que contiene un párrafo y un botón de cierre cuando se carga la página, gracias a la abierto atributo. Puede personalizar el contenido y el comportamiento del cuadro de diálogo mediante JavaScript para interacciones más avanzadas.
11.
Utilizar el etiqueta para agrupar opciones relacionadas dentro de un elemento desplegable. Le permite organizar y categorizar las opciones para facilitar la navegación y la selección.
- Eletiqueta es un elemento contenedor que agrupa relacionados etiquetas dentro de un elemento.
- Ayuda a organizar las opciones mediante la creación de agrupaciones o categorizaciones visuales dentro del menú desplegable.
- El etiqueta requiere un atributo de etiqueta, que especifica el nombre o título del grupo de opciones.
- Puede contener uno o más etiquetas como sus elementos secundarios, que representan las opciones individuales dentro del grupo.
Por ejemplo:
<select>
<optgrouplabel="Asia">
<optionvalue="kr">South Koreaoption>
optgroup>
<optgrouplabel="Europe">
<optionvalue="de">Germanyoption>
optgroup>
select>
Este ejemplo agrupa el menú desplegable de selección en dos secciones: Asia, y Europa. Cada grupo contiene etiquetas que representan diferentes países dentro de esa región.
Mejore su competencia en desarrollo web
Aprender estas etiquetas HTML menos conocidas puede mejorar enormemente sus habilidades de desarrollo web. A pesar de su falta de reconocimiento, ofrecen características valiosas para contextos específicos.
Agregar estas etiquetas a su conjunto de habilidades mejora la interactividad, la accesibilidad y agiliza el proceso de desarrollo web. Recuerde, aunque no le resulten familiares, tienen un impacto significativo en su viaje como desarrollador web.
