TRUCOS HTML - ee3.es

📖 Trucos HTML para principiantes

🎯 Objetivo

Descubrir pequeños trucos y atajos que facilitan la escritura de código y mejoran la experiencia al crear páginas web.

1. Abrir enlaces en nueva pestaña

html

<a href="https://www.wikipedia.org" target="_blank">Visitar Wikipedia</a>

💡 El atributo target="_blank" hace que el enlace se abra en otra pestaña, sin cerrar tu página.

2. Usar caracteres especiales

html

<p>&copy; 2025 Mi sitio web</p>
<p>&euro; 10 - Precio especial</p>

💡 Los entidades HTML permiten mostrar símbolos como ©, €, ®, etc.

3. Insertar un correo electrónico como enlace

html

<a href="mailto:ejemplo@correo.com">Enviar correo</a>

💡 Al hacer clic, se abre el programa de correo del usuario con la dirección ya escrita.

4. Teléfonos clicables en móviles

html

<a href="tel:+34123456789">Llamar ahora</a>

💡 En móviles, este enlace abre directamente la aplicación de llamadas.

5. Imágenes con texto alternativo invisible

html

<img src="logo.png" alt="Logotipo de la empresa" hidden>

💡 El atributo hidden oculta la imagen visualmente, pero el texto alternativo sigue siendo útil para accesibilidad.

6. Campos de formulario con valores por defecto

html

<input type="text" value="Escribe aquí tu nombre">

💡 El atributo value muestra un texto inicial en el campo.

7. Saltos de sección con anclas internas

html

<a href="#contacto">Ir a la sección de contacto</a>

<section id="contacto">
  <h2>Contacto</h2>
  <p>Formulario aquí...</p>
</section>

💡 Los enlaces internos permiten navegar dentro de la misma página.

8. Reproducir audio o video directamente

html

<audio controls>
  <source src="musica.mp3" type="audio/mpeg">
</audio>

<video controls width="300">
  <source src="video.mp4" type="video/mp4">
</video>

💡 Con controls se añaden botones de reproducción, pausa y volumen.

9. Forzar descarga de un archivo

html

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

💡 El atributo download hace que el navegador descargue el archivo en lugar de abrirlo.

10. Comentarios para dividir secciones

html

<!-- Sección de proyectos -->
<h2>Proyectos</h2>
<p>Contenido aquí...</p>

💡 Los comentarios ayudan a mantener el código organizado y fácil de leer.

📌 Mini-reto: Crea una página llamada trucos.html que incluya al menos 5 de estos trucos, y enlázala desde tu proyecto final como “Página siguiente”.