Atributos - parte 2

Introducción

Mientras los atributos globales se aplican a cualquier elemento, cada etiqueta HTML dispone además de atributos propios adaptados a su función. En esta segunda parte conocerás los atributos específicos de los elementos más habituales y aprenderás a elegir correctamente entre comillas simples y dobles al escribir los valores.

Atributos específicos de elementos

Mientras que los atributos globales pueden aplicarse a casi cualquier elemento HTML, los atributos específicos están diseñados para funcionar exclusivamente con ciertos elementos. Estos atributos proporcionan funcionalidades especializadas que tienen sentido solo en el contexto de elementos particulares.

Atributos para enlaces (elemento <a>)

El elemento <a> (anchor) utiliza atributos específicos para controlar el comportamiento de los enlaces:

• href: Define la dirección a la que apunta el enlace.

<a href="https://www.ejemplo.com">Visitar ejemplo.com</a>

• target: Específica dónde se abrirá el documento enlazado.

<a href="pagina.html" target="_blank">Abrir en nueva pestaña</a>
<a href="pagina.html" target="_self">Abrir en la misma pestaña</a>

• download: Indica que el enlace es para descargar un archivo.

<a href="documento.pdf" download>Descargar PDF</a>
<a href="imagen.jpg" download="foto.jpg">Descargar con nombre personalizado</a>

• rel: Define la relación entre la página actual y la página enlazada.

<a href="https://otra-web.com" rel="nofollow">Enlace sin seguimiento</a>
<a href="terminos.html" rel="noopener noreferrer" target="_blank">Términos de uso</a>

Atributos para imágenes (elemento <img>)

Las imágenes requieren atributos específicos para funcionar correctamente:

• src: Específica la ruta de la imagen (obligatorio).

<img src="imagen.jpg">
<img src="https://ejemplo.com/imagen.png">

• alt: Proporciona un texto alternativo para la imagen (obligatorio para accesibilidad).

<img src="logo.png" alt="Logo de la empresa XYZ">
<img src="decorativa.jpg" alt="">  <!-- Imagen decorativa sin valor semántico -->

• width y height: Establecen las dimensiones de la imagen.

<img src="foto.jpg" alt="Fotografía" width="300" height="200">

• loading: Controla cómo se carga la imagen.

<img src="imagen-grande.jpg" alt="Paisaje" loading="lazy">

Atributos para formularios

Los elementos de formulario tienen numerosos atributos específicos que controlan su comportamiento.

Atributos del elemento <form>:

• action: Define la URL donde se enviarán los datos del formulario.

<form action="/procesar-datos">
  <!-- Campos del formulario -->
</form>

• method: Específica el método HTTP para enviar los datos.

<form action="/buscar" method="get">
  <!-- Para búsquedas -->
</form>

<form action="/registrar" method="post">
  <!-- Para envío de datos sensibles -->
</form>

• enctype: Define cómo se codificarán los datos al enviarlos.

<form action="/subir-archivo" method="post" enctype="multipart/form-data">
  <!-- Necesario para subir archivos -->
</form>

Atributos de entrada (<input>, <textarea>, <select>):

• type: Define el tipo de campo de entrada (solo para <input>).

<input type="text" name="nombre">
<input type="email" name="correo">
<input type="password" name="clave">
<input type="number" name="edad">
<input type="date" name="fecha">
<input type="checkbox" name="acepto">
<input type="radio" name="opcion">
<input type="file" name="documento">

• name: Asigna un nombre al campo para identificar los datos enviados.

<input type="text" name="usuario">
<textarea name="comentario"></textarea>
<select name="pais"></select>

• placeholder: Muestra un texto de ejemplo en el campo.

<input type="text" name="busqueda" placeholder="Buscar productos...">
<textarea name="mensaje" placeholder="Escribe tu mensaje aquí"></textarea>

• value: Establece el valor inicial del campo.

<input type="text" name="ciudad" value="Madrid">
<input type="checkbox" name="newsletter" value="suscrito" checked>

• min, max y step: Controlan los valores numéricos permitidos.

<input type="number" name="cantidad" min="1" max="10" step="1">
<input type="range" name="volumen" min="0" max="100" step="5" value="50">

• pattern: Define un patrón que debe cumplir el valor (expresión regular).

<input type="text" name="codigo_postal" pattern="[0-9]{5}" placeholder="12345">

Atributos para elementos multimedia

Los elementos de audio y video tienen atributos específicos para controlar su reproducción:

• controls: Muestra los controles de reproducción.

<audio src="cancion.mp3" controls></audio>
<video src="video.mp4" controls></video>

• autoplay: Inicia la reproducción automática al cargar la página.

<video src="intro.mp4" autoplay muted></video>

• loop: Hace que el medio se repita continuamente.

<audio src="musica_fondo.mp3" loop></audio>

• muted: Silencia el audio inicialmente.

<video src="demo.mp4" autoplay muted></video>

• poster: Específica una imagen que se muestra antes de reproducir el video.

<video src="pelicula.mp4" controls poster="portada.jpg"></video>

Atributos para tablas

Los elementos de tabla utilizan atributos específicos para definir su estructura:

• colspan: Indica cuántas columnas debe abarcar una celda.

<table>
  <tr>
    <th colspan="2">Información de contacto</th>
  </tr>
  <tr>
    <td>Email</td>
    <td>Teléfono</td>
  </tr>
</table>

• rowspan: Indica cuántas filas debe abarcar una celda.

<table>
  <tr>
    <th>Categoría</th>
    <th>Productos</th>
  </tr>
  <tr>
    <td rowspan="2">Electrónica</td>
    <td>Teléfonos</td>
  </tr>
  <tr>
    <td>Computadoras</td>
  </tr>
</table>

Atributos para scripts y estilos

Los elementos <script> y <link> tienen atributos específicos para controlar cómo se cargan los recursos:

• defer y async: Controlan cuándo se ejecuta el script.

<script src="analytics.js" async></script>
<script src="main.js" defer></script>

• media: Define para qué dispositivos se aplica la hoja de estilos.

<link rel="stylesheet" href="movil.css" media="screen and (max-width: 768px)">
<link rel="stylesheet" href="impresion.css" media="print">

Atributos para iframes

El elemento <iframe> utiliza atributos específicos para controlar el contenido incrustado:

• src: Específica la URL del documento a mostrar.

<iframe src="https://www.ejemplo.com/mapa"></iframe>

• sandbox: Aplica restricciones al contenido del iframe.

<iframe src="widget.html" sandbox="allow-scripts allow-same-origin"></iframe>

• allow: Controla qué características puede usar el iframe.

<iframe src="video.html" allow="camera; microphone"></iframe>

Ejemplo práctico: Formulario de contacto

Veamos un ejemplo que combina varios elementos con sus atributos específicos:

<form action="/enviar-mensaje" method="post">
  <div>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre" required minlength="2" maxlength="50">
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required placeholder="tu@email.com">
  </div>
  
  <div>
    <label for="asunto">Asunto:</label>
    <select id="asunto" name="asunto" required>
      <option value="">Selecciona una opción</option>
      <option value="consulta">Consulta general</option>
      <option value="soporte">Soporte técnico</option>
      <option value="otro">Otro asunto</option>
    </select>
  </div>
  
  <div>
    <label for="mensaje">Mensaje:</label>
    <textarea id="mensaje" name="mensaje" rows="5" required></textarea>
  </div>
  
  <div>
    <input type="checkbox" id="terminos" name="terminos" required>
    <label for="terminos">Acepto los términos y condiciones</label>
  </div>
  
  <button type="submit">Enviar mensaje</button>
</form>

Buenas prácticas para atributos específicos

• Validación del lado del cliente: Usa atributos como required, pattern, min y max para validar datos antes de enviarlos.

<input type="tel" name="telefono" pattern="[0-9]{9}" required>

• Accesibilidad: Asocia siempre las etiquetas con sus campos correspondientes mediante el atributo for.

<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

• Seguridad: Utiliza el atributo rel="noopener" cuando abras enlaces en nuevas pestañas.

<a href="https://otra-web.com" target="_blank" rel="noopener">Enlace seguro</a>

• Rendimiento: Usa atributos como loading="lazy" para imágenes y defer para scripts.

<img src="imagen-grande.jpg" alt="Paisaje" loading="lazy">
<script src="no-critico.js" defer></script>

Valores de atributos: comillas simples y dobles

En HTML, los valores de los atributos pueden escribirse de diferentes maneras, siendo las comillas simples y dobles las opciones principales para delimitar estos valores.

Uso básico de comillas

La sintaxis estándar para los atributos HTML incluye el nombre del atributo, seguido del signo igual y el valor entre comillas:

<elemento atributo="valor">Contenido</elemento>

HTML permite utilizar tanto comillas dobles como comillas simples para delimitar los valores:

<!-- Con comillas dobles -->
<a href="https://www.ejemplo.com">Enlace con comillas dobles</a>

<!-- Con comillas simples -->
<a href='https://www.ejemplo.com'>Enlace con comillas simples</a>

Ambas formas son completamente válidas según la especificación HTML5.

Cuándo usar cada tipo de comillas

La elección entre comillas simples y dobles suele depender de estas consideraciones:

• Comillas dentro del valor: Cuando necesitas incluir comillas dentro del valor del atributo.

<!-- Usando comillas simples para contener comillas dobles -->
<button title='Haz clic en "Aceptar" para continuar'>Aceptar</button>

<!-- Usando comillas dobles para contener comillas simples -->
<input type="text" placeholder="Escribe tu nombre y 'apellido'">

• Anidación de comillas: Una de las ventajas principales de tener dos tipos de comillas es la posibilidad de anidarlas sin necesidad de usar caracteres de escape.

<!-- Anidando comillas dobles dentro de comillas simples -->
<a href='javascript:alert("Hola mundo")'>Ejecutar JavaScript</a>

<!-- Anidando comillas simples dentro de comillas dobles -->
<button onclick="alert('Has hecho clic')">Haz clic</button>

Caracteres de escape

Cuando necesitas incluir el mismo tipo de comillas dentro del valor de un atributo, puedes usar caracteres de escape:

<!-- Usando el carácter de escape &quot; para comillas dobles -->
<input type="text" placeholder="Escribe &quot;texto&quot; entre comillas">

<!-- Usando el carácter de escape &#39; para comillas simples -->
<button title='No olvides marcar la opción &#39;Recordarme&#39;'>Iniciar sesión</button>

Los caracteres de escape más comunes para comillas son:

• " para comillas dobles (")
• ' para comillas simples (')

Omisión de comillas

En HTML5, técnicamente es posible omitir las comillas en ciertos casos específicos:

<input type=text name=usuario>

Sin embargo, esta práctica no es recomendable porque solo funciona para valores sin espacios ni caracteres especiales, reduce la legibilidad y puede causar errores difíciles de detectar:

<!-- Esto NO funcionará correctamente sin comillas -->
<input type=text placeholder=Escribe tu nombre completo>

Buenas prácticas

• Sé consistente: Elige un estilo (comillas simples o dobles) y úsalo de manera consistente en todo tu proyecto.

<!-- Consistencia con comillas dobles -->
<img src="imagen.jpg" alt="Descripción" title="Título de la imagen">

<!-- Consistencia con comillas simples -->
<img src='imagen.jpg' alt='Descripción' title='Título de la imagen'>

• Usa comillas siempre: Aunque HTML5 permite omitirlas en ciertos casos, incluir comillas siempre mejora la legibilidad y previene errores.

• Adapta según el contexto: Elige el tipo de comillas que minimice la necesidad de caracteres de escape.

<!-- Mejor usar comillas simples aquí -->
<button title='Haz clic en "Aceptar"'>Aceptar</button>

<!-- Mejor usar comillas dobles aquí -->
<input placeholder="Escribe tu 'nickname'">

Conclusión

Los atributos específicos de los elementos y el uso correcto de las comillas son conocimientos fundamentales para escribir HTML funcional, accesible y seguro. Cada elemento tiene sus atributos propios que potencian su comportamiento: href y target en los enlaces, src y alt en las imágenes, action y method en los formularios, o sandbox en los iframes. Combinar estos atributos con las buenas prácticas de comillas y validación te permitirá crear páginas web sólidas y bien estructuradas.