En el acelerado mundo de la web, mejorar sus habilidades de desarrollo web requiere adoptar un enfoque sostenible e innovador para garantizar que se mantenga actualizado con las últimas tecnologías y tendencias. Los elementos HTML son una de las bases más importantes de este desarrollo, ya que representan el lenguaje básico en el que se construye la estructura y el diseño de las páginas web. Sin embargo, no se trata solo de usar elementos básicos, sino también considerar el uso de elementos HTML inusuales e innovadores que agreguen atractivo y funcionalidad a la experiencia del usuario.
Como desarrollador web, debe estar bien versado en elementos HTML comunes como Y Y Que representa la estructura y contenido de las páginas web. Sin embargo, ¡HTML ofrece mucho más que eso!
Al explorar estos elementos únicos, puede mejorar la funcionalidad de las aplicaciones web que crea, haciéndolas destacar entre la competencia. Verificar Razones por las que aprender HTML es esencial para todo desarrollador.
Enlaces rápidos
1. Y
Imagina que tienes una gran cantidad de información o contenido con el que no quieres que el lector se sienta abrumado de inmediato. Los elementos te salvarán Y !
Estos funcionan juntos para crear una sección expandible de un título o resumen en el que los usuarios del sitio web pueden hacer clic para revelar más detalles. De forma predeterminada, el contenido dentro de un elemento no se mostrará , que mantiene su página ordenada y organizada.
El visitante puede hacer clic fácilmente en el resumen para acceder a la información oculta.
<details>
<summary>Click to reveal more information</summary>
<p>This content will be hidden by default but will appear when the user
clicks the summary.</p>
</details>
Con estos elementos, puede ocultar grandes secciones de texto, código u otra información, brindando una experiencia fácil de usar mientras mantiene un diseño limpio. Estos artículos también te pueden ayudar Mejora tus habilidades como diseñador front-end.
2.
El artículo se le da a usted Resalte partes específicas de su contenido, haciéndolas destacar visualmente. al usar un elemento Los navegadores suelen aplicar un color de fondo amarillo al texto que contiene, lo que llama la atención del lector.
Esta función es especialmente útil cuando desea enfatizar palabras clave, frases o resultados de búsqueda importantes en su página web.
<p>
You can use the <mark>mark</mark> tag to highlight important words or
phrases.
</p>
Por ejemplo, si su sitio web tiene una función de búsqueda, puede usar un elemento Para resaltar las coincidencias de consultas 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 ha vuelto obsoleto o ya no es relevante, pero aún desea verlo con fines históricos o para indicar cambios a lo largo del tiempo?
¡Conoce el elemento ! Representa texto tachado y muestra cualquier contenido dentro del elemento en una fuente tachada.
<p>
This product is <s>out-of-stock</s> currently available at a discounted
price!
</p>
En este ejemplo, fuera de stock se mostrará como texto tachado, lo que indica que el estado de stock del producto ha cambiado.
4.
Cuando desee agregar significado semántico a fechas y horas en su contenido, el Sera util.
Con el atributo de fecha y hora, 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
<time datetime="1776-07-04">July 4, 1776</time>.
</p>
usando un artículo , le da más estructura al contenido y lo hace accesible a una gama más amplia de usuarios, incluidas las personas con discapacidades que usan lectores de pantalla.
5.
Administrar texto en varios idiomas en una página web a veces puede ser un desafío, especialmente cuando cada parte requiere un formato diferente.
El artículo se le presentará Ayuda aislando un fragmento de texto que el navegador debe tratar de manera diferente debido a los diferentes requisitos de idioma.
<p>
<bdi>5,000</bdi> people attended the conference.
</p>
En este ejemplo, el elemento envuelve con el número 5000. Esto asegura que si el texto que lo rodea está en un idioma diferente o requiere un formato diferente, no se superpondrá con el número.
6. , ,
Para escribir en los países de Asia oriental, donde las pistas de pronunciación, furigana u otras anotaciones se usan comúnmente encima o debajo de las letras, los elementos juegan Y Y este papel
<p>
I'm learning
<ruby>漢<rt>かん</rt></ruby>字<rp>(</rp><rt>Kanji</rt><rp>)</rp>.
</p>
En este ejemplo, el elemento contiene el carácter 漢 (kanji), y contiene el elemento Sobre la pronunciación かん (era). Artículos provistos Llaves de respaldo para navegadores que no admiten anotaciones en rojo.
7.
Cuando tiene palabras largas que pueden romper el formato, Element está aquí para ayudarlo. Sugiere la posibilidad de un salto de línea (la posibilidad de dividir palabras) 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 que el navegador la divida en dos líneas si es necesario, mientras conserva el diseño del contenido circundante. Verificar Una guía para principiantes sobre imágenes HTML receptivas.
8. y
Para símbolos científicos o matemáticos, fórmulas químicas o notas al pie, puede usar los elementos y para subíndice y superíndice, respectivamente.
<p>
The chemical formula for water is H<sub>2</sub>O,
and the Pythagorean theorem is
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>.
</p>
Este ejemplo usa un elemento para mostrar el 2 en H2O como un subíndice, mientras muestra el elemento exponencial en el teorema de Pitágoras.
9.
¿Necesita representar métricas numéricas dentro de un rango conocido, como uso de disco, calificaciones o puntajes de exámenes? El elemento te ayudará .
Con los atributos de valor, mínimo y máximo, puede especificar el valor actual, el valor mínimo y el valor de medición máximo, respectivamente.
<meter value="75" min="0" max="100">75%</meter>
En este ejemplo, un elemento Puntuación de la prueba del 75%.
10
Cuando necesite crear un cuadro de diálogo, una ventana de superposición condicional o interacciones emergentes modales, el es el camino a seguir. Puedes usar el atributo abierto Muestra el cuadro de diálogo de forma predeterminada.
<dialog open>
<p>This is a dialog box!</p>
<button>Close</button>
</dialog>
En este ejemplo, aparece un cuadro de diálogo simple con un párrafo y un botón de cierre cuando se carga la página, gracias al tema abierto. Puede personalizar el contenido y el comportamiento del cuadro de diálogo mediante JavaScript para interacciones más avanzadas.
11
usar un artículo Agrupa opciones relacionadas dentro de un elemento desplegable . Lo que le permite organizar y clasificar las opciones para facilitar la navegación y la selección.
- Es un elemento contenedor que recopila etiquetas. relacionados dentro de un elemento .
- Ayuda a organizar las opciones mediante la creación de una agrupación o categorización visual dentro del menú desplegable.
- requerir firmar Un atributo de etiqueta que especifica el nombre o título del grupo de opciones.
- Puede contener un elemento uno o más subelementos, que representan elecciones individuales dentro del grupo.
por ejemplo:
<select>
<optgroup label="Asia">
<option value="kr">South Korea</option>
</optgroup>
<optgroup label="Europe">
<option value="de">Germany</option>
</optgroup>
</select>
Este ejemplo agrupa el menú desplegable de selección en dos partes: Asia y Europa. Cada grupo contiene artículos que representan diferentes países dentro de esa región.
Aumente su eficiencia en el desarrollo web
Aprender los elementos HTML menos conocidos puede mejorar en gran medida tus habilidades de desarrollo web. Aunque no se reconocen, ofrecen características valiosas para contextos específicos.
Agregar estos elementos a su conjunto de habilidades mejora la interactividad, la accesibilidad y agiliza el proceso de desarrollo web. Recuerde, si bien puede ser desconocido, tiene un gran impacto en su viaje como desarrollador web. Puedes ver ahora Code on the Go: las mejores aplicaciones de edición de HTML para Android.
