Lo que no sabes sobre HTML: 40 trucos poco conocidos pero útiles

En el desarrollo de HTML, hay algunos trucos muy útiles pero poco conocidos. En este artículo, compartiré 40 trucos de HTML que la mayoría de la gente no conoce. Estos trucos cubren el uso de varias etiquetas y atributos de HTML y pueden ayudarte a mejorar la eficiencia en el desarrollo web y la experiencia del usuario.

1. Crear enlaces de contacto

Utiliza las etiquetas <a> combinadas con mailto:, tel: y sms: para crear enlaces que permiten contactar con un clic.

1
<a href="mailto:name@example.com">Enviar correo</a>
2
<a href="tel:+1234567890">Llamar</a>
3
<a href="sms:+1234567890">Enviar SMS</a>

2. Crear enlaces de descarga

El atributo download de la etiqueta <a> permite a los usuarios descargar un archivo directamente en lugar de abrirlo.

1
<a href="file.pdf" download>Descargar PDF</a>

3. Controlar la forma en que se abren los enlaces

El atributo target controla la forma en que se abre el enlace, como en una nueva pestaña, en la misma ventana o en un marco especificado. Sus valores son _blank, _self, _parent, _top.

1
<a href="https://example.com" target="_blank">Abrir en una nueva pestaña</a>

4. Crear contenido plegable

Utiliza las etiquetas <details> y <summary> para crear áreas de contenido plegable simples.

1
<details>
2
  <summary>Haga clic para expandir</summary>
3
  <p>Este es un contenido plegable.</p>
4
</details>

5. Usar etiquetas semánticas

Usa etiquetas semánticas como <article>, <section>, <header>, <footer>, etc., para mejorar la legibilidad y accesibilidad del código, además de ser beneficioso para SEO.

6. Mejorar menús desplegables con <optgroup>

La etiqueta <optgroup> se utiliza para agrupar opciones en un menú desplegable, haciendo que el menú sea más organizado.

1
<select>
2
  <optgroup label="Frutas">
3
    <option>Manzana</option>
4
    <option>Banana</option>
5
  </optgroup>
6
  <optgroup label="Verduras">
7
    <option>Tomate</option>
8
    <option>Zanahoria</option>
9
  </optgroup>
10
</select>

7. Mejorar la visualización de videos

El atributo poster de la etiqueta <video> puede mostrar una miniatura antes de que el video se cargue.

1
<video controls poster="thumbnail.jpg">
2
  <source src="movie.mp4" type="video/mp4" />
3
</video>

8. Optimizar la carga de videos

El atributo preload puede configurar el comportamiento de precarga del video para optimizar la velocidad de carga.

1
<video src="movie.mp4" preload="auto">
2
  El navegador no soporta la etiqueta de video.
3
</video>

9. Soportar selección múltiple

Usa el atributo multiple para soportar la selección de varios archivos o opciones en un menú desplegable.

1
<input type="file" multiple />
2
<select multiple>
3
  <option value="java">Java</option>
4
  <option value="javascript">JavaScript</option>
5
</select>

10. Controlar la forma en que se cargan las imágenes

El atributo loading puede establecer el modo de carga de las imágenes en perezoso (lazy) o inmediato (eager).

1
<img src="image.jpg" loading="lazy" />

11. Asegurar la accesibilidad

El atributo alt proporciona una descripción de la imagen, mejorando la accesibilidad y SEO.

1
<img src="image.jpg" alt="Descripción de la imagen" />

12. Usar el elemento <picture> para imágenes responsivas

El elemento <picture> permite cargar diferentes imágenes según las condiciones de visualización del dispositivo.

1
<picture>
2
  <source media="(min-width: 650px)" srcset="img_large.jpg" />
3
  <source media="(min-width: 465px)" srcset="img_medium.jpg" />
4
  <img src="img_small.jpg" alt="Descripción de la imagen" />
5
</picture>

13. Establecer la longitud máxima de entrada

El atributo maxlength limita el número máximo de caracteres que el usuario puede ingresar en un campo de texto.

1
<input type="text" maxlength="4" />

14. Establecer la longitud mínima de entrada

El atributo minlength limita el número mínimo de caracteres que el usuario debe ingresar en un campo de texto.

1
<input type="text" minlength="3" />

15. Controlar la corrección ortográfica

El atributo spellcheck habilita o deshabilita la función de corrección ortográfica del navegador.

1
<input type="text" spellcheck="true" />

16. Aceptar tipos de archivos específicos

El atributo accept especifica los tipos de archivos que se pueden seleccionar en un campo de entrada de archivos.

1
<input type="file" accept="image/png, image/jpeg" />

17. Personalizar controles deslizantes

Usa el type="range" en <input> para crear controles deslizantes que permiten al usuario seleccionar un valor dentro de un rango.

1
<input type="range" min="1" max="100" value="50" />

18. Organizar formularios con <form> y <fieldset>

La etiqueta <fieldset> agrupa elementos del formulario y <legend> define un título para el grupo.

1
<form>
2
  <fieldset>
3
    <legend>Información personal</legend>
4
    <label for="name">Nombre:</label>
5
    <input type="text" id="name" name="name" />
6
  </fieldset>
7
</form>

19. Mejorar la accesibilidad de los formularios con <label>

La etiqueta <label> proporciona una descripción para los controles del formulario, facilitando su uso.

1
<label for="username">Nombre de usuario:</label>
2
<input type="text" id="username" name="username" />

20. Ofrecer sugerencias con <datalist>

La etiqueta <datalist> proporciona una lista de sugerencias desplegables para <input>.

1
<input list="browsers" />
2
<datalist id="browsers">
3
  <option value="Chrome"></option>
4
  <option value="Firefox"></option>
5
  <option value="Safari"></option>
6
  <option value="Edge"></option>
7
  <option value="Opera"></option>
8
</datalist>

21. Permitir edición de contenido

El atributo contenteditable hace que el contenido de un elemento sea editable, permitiendo que los usuarios modifiquen el texto directamente.

1
<div contenteditable="true">Este contenido es editable.</div>

22. Proporcionar información adicional

El atributo title muestra información adicional cuando el usuario pasa el cursor sobre el elemento.

1
<p title="Organización Mundial de la Salud">OMS</p>

23. Crear una línea divisoria

Usa la etiqueta <hr> para crear una línea horizontal que divida visualmente el contenido.

1
<hr />

24. Mostrar texto en subíndice y superíndice

Los elementos <sub> y <sup> se utilizan para mostrar texto en subíndice y superíndice.

1
<p>H<sub>2</sub>O</p>
2
<p>E=mc<sup>2</sup></p>

25. Usar <base> para definir una URL base

La etiqueta <base> define una URL base para todas las URL relativas en el documento.

1
<head>
2
  <base href="https://example.com" target="_blank" />
3
</head>
4
<body>
5
  <a href="/page">Página</a>
6
</body>

26. Usar la etiqueta <meta> para configurar el viewport

La etiqueta <meta> con el atributo viewport optimiza la visualización de la página en dispositivos móviles.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27. Usar <wbr> para controlar el salto de líneas en palabras largas

La etiqueta <wbr> agrega puntos de salto de línea opcionales en palabras largas.

1
<p>
2
  Esta es una palabra larga: su<wbr />per<wbr />ca<wbr />li<wbr />fra<wbr />gi<wbr />li<wbr />sti<wbr />cex<wbr />pi<wbr />ali<wbr />do<wbr />cious.
3
</p>

28. Usar <code> y <pre> para mostrar fragmentos de código

La etiqueta <code> se usa para código en línea, y <pre> combinada con <code> muestra fragmentos de código multilínea manteniendo el formato.

1
<pre><code>
2
function helloWorld() {
3
  console.log("Hello, World!");
4
}
5
</code></pre>

29. Utiliza <bdi> para asegurar la dirección correcta del texto

La etiqueta <bdi> (aislamiento bidireccional) asegura que la dirección del texto no afecte al contenido circundante, y se utiliza comúnmente en situaciones de idiomas mixtos.

1
<p>Nombre de usuario: <bdi>username123</bdi></p>

30. Utiliza <noscript> para proporcionar información a los usuarios que no soportan JavaScript

1
<noscript
2
  >Tu navegador no soporta JavaScript, algunas funciones pueden no estar
3
  disponibles.</noscript
4
>

La etiqueta <noscript> se usa para mostrar contenido cuando JavaScript está desactivado.

31. Utiliza <b> y <strong> para resaltar texto en negrita

<b> y <strong> se usan para resaltar texto en negrita, donde <strong> denota énfasis.

1
<p><b>Negrita</b> texto</p>
2
<p><strong>Importante</strong> texto</p>

32. Utiliza <i> y <em> para representar texto en cursiva y énfasis

<i> y <em> se usan para representar texto en cursiva y énfasis, donde <em> denota énfasis.

1
<p><i>Cursiva</i> texto</p>
2
<p><em>Énfasis</em> texto</p>

33. Utiliza <kbd> para representar entradas del usuario

La etiqueta <kbd> se usa para representar entradas del usuario.

1
<p>Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar el texto.</p>

34. Utiliza <time> para representar una hora o fecha específica

La etiqueta <time> se usa para representar una hora o fecha específica.

1
<p>
2
  La reunión será el <time datetime="2024-07-19">19 de julio de 2024</time>.
3
</p>

35. Utiliza <cite> para citar el título de una obra

La etiqueta <cite> se usa para citar el título de una obra.

1
<p>Mi novela favorita es <cite>Harry Potter</cite>.</p>

36. Utiliza <meter> para representar una medición en un rango conocido

La etiqueta <meter> se usa para representar una medición en un rango conocido, como una calificación.

1
<meter value="2" min="0" max="10">2 de 10</meter>

37. Utiliza <progress> para mostrar el progreso de una tarea

La etiqueta <progress> se usa para mostrar el progreso de una tarea.

1
<progress value="70" max="100">70%</progress>

38. Utiliza <abbr> para mostrar el significado completo de una abreviatura

Utiliza la etiqueta <abbr> para proporcionar una explicación completa de una abreviatura. El significado se muestra cuando el usuario pasa el cursor sobre la abreviatura.

1
<p>
2
  <abbr title="Hypertext Markup Language">HTML</abbr> es un lenguaje de marcado.
3
</p>

39. Utiliza <mark> para resaltar texto

La etiqueta <mark> se usa para resaltar texto.

1
<p>Este es un <mark>importante</mark> recordatorio.</p>

40. Utiliza <dialog> para abrir un cuadro de diálogo

Consulta este artículo: Cómo usar la nueva etiqueta <dialog> de HTML5

Conclusión

Este artículo compartió 40 trucos útiles de HTML. Al dominar estos trucos, puedes mejorar significativamente la eficiencia en el desarrollo web y la experiencia del usuario. Estos trucos cubren desde el uso básico de etiquetas hasta la aplicación de funciones avanzadas, esperamos que estos contenidos te sean útiles.