El desarrollo web es un campo en constante evolución y, si bien las tecnologías que utilizamos pueden cambiar, algunos elementos fundamentales siguen siendo consistentes. Una de estas bases es HTML.
Ya sea que sea un desarrollador experimentado o esté comenzando, tener una biblioteca de fragmentos de código HTML esenciales a su alcance puede ahorrarle tiempo y esfuerzo. En esta guía completa, profundizaremos en los fragmentos de código HTML más utilizados que todo desarrollador debería conocer.
1. Metaetiqueta responsiva
En una era en la que domina la navegación móvil, es fundamental garantizar que su página web se adapte correctamente a todos los dispositivos.
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Este fragmento informa al navegador que represente el ancho de la página según el ancho de la pantalla del dispositivo y establezca el nivel de zoom inicial en 1,0. Más información sobre diseños responsivos en nuestra Guía definitiva de HTML .
2. Incrustar vídeos
Los vídeos pueden mejorar la experiencia del usuario y plataformas como YouTube han hecho que insertarlos sea muy sencillo.
< iframe width = "560" height = "315" src = "https://www.youtube.com/embed/VIDEO_ID" frameborder = "0" allowfullscreen > </ iframe >
Reemplace VIDEO_ID con la identificación del video específico de YouTube. ¿Quiere más información sobre la incorporación de multimedia? Consulta nuestra sección sobre multimedia en la guía definitiva.
3. Enlace de favicon
La marca es vital. Favicon es ese pequeño ícono que ves en la pestaña del navegador y es parte de la identidad de tu marca.
< link rel = "icon" href = "path_to_favicon.ico" type = "image/x-icon" >
Para conocer varios formatos de favicon y su compatibilidad con el navegador, consulte nuestra Guía definitiva .
4. Abrir enlace en una nueva pestaña
Al vincular a recursos externos, abrir en una nueva pestaña puede mejorar la experiencia del usuario.
< a href = "https://www.example.com" target = "_blank" rel = "noopener noreferrer" > Visit Example </ a >
El rel="noopener noreferrer" es crucial por razones de seguridad. Profundice en los atributos de hipervínculo aquí .
5. Reproductor de vídeo HTML5
Insertar vídeos de forma nativa sin plataformas de terceros nunca ha sido tan fácil.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
¿Quieres personalizar el reproductor o agregar títulos? Descubre más en la sección de vídeos de nuestra guía.
6. Reproductor de audio HTML5
De manera similar, para audio:
< audio controls >
< source src = "audio.ogg" type = "audio/ogg" >
< source src = "audio.mp3" type = "audio/mpeg" >
Your browser does not support the audio tag.
</audio>
Desde podcasts hasta música de fondo, obtenga más información sobre cómo insertar audio aquí .
7. Formulario de contacto sencillo
Interactuar con los usuarios suele ser el objetivo principal de un sitio web. Un formulario de contacto es una puerta de entrada para esta interacción.
< form action = "/submit.php" method = "post" >
Nombre: < tipo de entrada = "texto" nombre = "nombre" > < br >
Correo electrónico: < tipo de entrada = "texto" nombre = "correo electrónico" > < br >
Mensaje: < textarea nombre = "mensaje" > </ textarea > < br >
< tipo de entrada = "enviar" valor = "Enviar" >
</ formulario >
Para formularios más avanzados y validación, consulte la sección de formularios de nuestra guía.
8. Cargando CSS y JavaScript externos
El estilo y la interactividad son pilares del desarrollo web moderno.
< link rel = "stylesheet" type = "text/css" href = "styles.css" >
< script src = "script.js" > </ script >
Sumérjase en la relación entre HTML, CSS y JavaScript en nuestra Guía definitiva .
9. Configuración del juego de caracteres
Garantizar que el texto se muestre correctamente en todos los navegadores:
< meta charset = "UTF-8" >
El juego de caracteres, la codificación y su importancia se explican con más detalle aquí .
10. Metaetiqueta sin índice ni seguimiento
El SEO es crucial, pero a veces necesitamos que los motores de búsqueda ignoren páginas específicas.
< meta name = "robots" content = "noindex, nofollow" >
Para comprender cuándo y por qué utilizar esto, consulte nuestra sección de SEO .
11. Comentarios HTML
A veces, es necesario dejar una nota para usted o para otros desarrolladores sin que se muestre en la página.
<!-- This is an HTML comment -->
Obtenga más información sobre los comentarios y sus mejores prácticas en nuestra guía .
12. Entidades HTML
Los caracteres especiales pueden ser complicados. Las entidades HTML los hacen muy sencillos.
© 2023 CoderChampEste código se presenta como © 2023 CoderChamp. Más sobre entidades aquí .
13. Definición de URL base
Cuando tiene URL relativas en un documento, el elemento base puede establecer la URL base para toda la página.
< base href = "https://www.example.com/" >
Descubra cómo esto puede simplificar su flujo de trabajo de desarrollo en la guía HTML .
14. Cita en bloque
¿Citando a alguien? Dales crédito con el atributo cite .
< blockquote cite = "https://www.sourceurl.com" >
"A relevant quote here."
</ blockquote >
Profundice en las prácticas adecuadas de citación aquí .
15. Botón que activa JavaScript
Ejecute fácilmente una función de JavaScript con solo hacer clic en un botón.
< button onclick = "myFunction()" > Click Me! </ button >
Comprenda la sinergia entre HTML y JavaScript en nuestra sección de integración .
16. Carga diferida de imágenes
Mejore los tiempos de carga de la página mediante la carga diferida de imágenes.
< img src = "image.jpg" alt = "Description" loading = "lazy" >
Optimiza el rendimiento de tu web con los consejos de nuestra sección de imágenes .
17. Texto preformateado con <pre>
Muestra texto con espacios y saltos de línea.
< pre >
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and line breaks.
</ pre >
Domina las técnicas de formato de texto en nuestra guía .
18. Resaltar texto con <mark>
Significa visualmente fragmentos de texto importantes.
< p > This is a < mark > highlighted </ mark > text. </ p >
Vea más sobre cómo enfatizar el contenido en nuestra guía HTML .
19. Abreviaturas con información sobre herramientas
Proporcione claridad sobre las abreviaturas con la etiqueta <abbr> .
< abbr title = "Hypertext Markup Language" > HTML </ abbr >
Profundice en información sobre herramientas fácil de usar y más en nuestra guía .
20. Barra de progreso
Indicar el progreso de una tarea.
< progress value = "70" max = "100" > </ progress >
Aquí se exploran más a fondo los elementos visuales y su importancia.
21. Listas desplegables
Ofrece una lista de opciones a través de las etiquetas <select> y <option> .
< select >
< valor de opción = "volvo" > Volvo </ opción >
< valor de opción = "saab" > Saab </ opción >
</seleccionar>
Obtenga más información sobre los elementos del formulario y las opciones del usuario en nuestra sección de formularios .
22. Entradas de teclado
Marque el texto como entrada del teclado del usuario usando la etiqueta <kbd> .
< p > Press < kbd > Ctrl </ kbd > + < kbd > C </ kbd > to copy. </ p >
Aquí se detallan más semánticas y su importancia.
23. Configuración del idioma
Informe al navegador del idioma de su documento para una mejor accesibilidad.
< html lang = "en" >
Domina el arte de crear sitios web inclusivos en nuestra sección de accesibilidad .
24. Incrustar SVG en línea
Incruste gráficos escalables directamente en su documento.
< svg width = "100" height = "100" >
< círculo cx = "50" cy = "50" r = "40" trazo = "negro" ancho de trazo = "3" relleno = "rojo" />
</svg>
Descubra el potencial de SVG y los gráficos en nuestra guía multimedia .
25. Índice de pestañas
Establezca el orden de tabulación de los elementos enfocables.
< input type = "text" tabindex = "1" >
Profundice en las interacciones de los usuarios y el manejo de formularios aquí .
26. Entrada de fecha
Un tipo de entrada ingenioso para la selección de fechas.
< input type = "date" name = "birthdate" >
Explore un mundo de tipos de entrada HTML en nuestra guía completa .
27. Resumen y detalles
Cree un widget interactivo para ocultar y mostrar contenido.
< details >
< resumen > Detalles épicos </ resumen >
¡Este es el contenido que estaba oculto!
</ detalles >
Libere elementos HTML interactivos y más en nuestra sección interactiva .
28. Enfoque automático en el campo del formulario
Dirija la atención del usuario a un campo de formulario específico cuando se carga la página.
< input type = "text" autofocus >
Mejore la experiencia del usuario con nuestra guía detallada sobre mejoras de formularios aquí .
29. Elemento de salida
Mostrar el resultado de un cálculo.
< form oninput = "result.value=parseInt(a.value)+parseInt(b.value)" >
< input type = "range" id = "a" value = "50" > +
< tipo de entrada = "número" id = "b" valor = "25" >
= < nombre de salida = "resultado" para = "ab" > 75 </ salida >
</ formulario >
Descubra formas de mejorar la interactividad del usuario en nuestra sección de formularios .
30. Marcos en línea (iFrames)
Incrustar otro documento dentro del documento HTML actual.
< iframe src = "https://www.example.com" title = "Description" > </ iframe >
Comprenda el poder de los marcos y sus aplicaciones aquí .
Armarse con estos fragmentos de código puede acelerar drásticamente su flujo de trabajo y mejorar sus proyectos de desarrollo web . Siempre que necesite más conocimientos, explicaciones más profundas o simplemente repasar sus conocimientos, nuestra Guía definitiva de HTML se presenta como una referencia confiable y completa. ¡Feliz codificación!
