Los Mejores Ejemplos HTML y HTML5: Guía Completa de Código
Este artículo te guiará a través de una colección completa de ejemplos de código HTML y HTML5, explorando la sintaxis y los atributos de diferentes etiquetas. Desde enlaces y estilos hasta elementos semánticos y multimedia, este recurso te ayudará a comprender las bases de la creación de páginas web.
Enlaces y Atributos Esenciales
Comenzaremos con los elementos básicos para conectar diferentes partes de una página web:
1. Enlaces (<a>
): Los enlaces son la columna vertebral de la navegación web. El atributo href
se utiliza para especificar la URL a la que se dirige el enlace:
html
<a href="https://www.google.com">Ir a Google</a>
2. Anclas dentro de la Página (<a name>
y #
): Puedes crear enlaces que te lleven a diferentes secciones de la misma página web:
«`html
Sección 1
…Contenido de la Sección 1…
3. Enlaces de Imagen (<img>
): El atributo src
especifica la fuente de la imagen, mientras que alt
proporciona texto alternativo para usuarios de lectores de pantalla:
html
<img src="imagen.jpg" alt="Imagen descriptiva">
4. Atributo target
: Este atributo te permite controlar cómo se abre un enlace: _blank
para abrirlo en una nueva pestaña, _self
para abrirlo en la misma pestaña.
html
<a href="https://www.example.com" target="_blank">Ejemplo de sitio web</a>
Estilos Básicos de Fondo y Texto
El código HTML también te permite personalizar el aspecto de tu página web. Exploremos algunos atributos esenciales:
5. Establecer un Fondo de Imagen (body background
): Este atributo te permite usar una imagen como fondo de tu página:
html
<body background="fondo.jpg">
6. Establecer un Color de Fondo (body bgcolor
): Para un fondo de color sólido, utiliza el atributo bgcolor
:
html
<body bgcolor="#f0f0f0">
7. Alinear Texto con div align
: El atributo align
dentro de un elemento div
te permite alinear el texto:
«`html
«`
8. Color de Fuente (font color
): Con el atributo color
, puedes cambiar el color del texto:
html
<font color="blue">Este texto será azul</font>
9. Tamaño de Fuente (font size
): El atributo size
te permite ajustar el tamaño de la fuente:
html
<font size="4">Este texto será más grande</font>
10. Alinear Imágenes (img align
): El atributo align
de la etiqueta img
te permite alinear imágenes con el texto que las rodea:
html
<img src="imagen.jpg" align="left">
11. Establecer Ancho de Imagen (img width
): Utiliza el atributo width
para controlar el ancho de una imagen:
html
<img src="imagen.jpg" width="200">
12. Imágenes y Atributos (img src
): El atributo src
especifica la fuente de la imagen, mientras que alt
proporciona texto alternativo para usuarios de lectores de pantalla:
html
<img src="imagen.jpg" alt="Imagen descriptiva">
Entidades HTML: Caracteres Especiales
13. Entidades HTML: Para representar caracteres especiales como comillas, signos de menor que o mayor que, se utilizan entidades HTML:
html
(Espacio en blanco)
< (Signo de menor que)
> (Signo de mayor que)
" (Comillas)
& (Ampersand)
Formularios HTML para Recopilar Información
14. Formularios HTML (<form>
): Los formularios te permiten recopilar datos del usuario. El atributo action
define la página a la que se enviarán los datos, y method
especifica el método de envío (POST o GET):
«`html
«`
15. Tipos de Entrada (<input>
): Los formularios usan diferentes tipos de entrada, como text
para campos de texto, password
para contraseñas, email
para direcciones de correo electrónico, radio
para botones de opción, checkbox
para casillas de verificación, submit
para botones de envío, reset
para botones de reinicio, file
para seleccionar archivos, etc.
Reproducir Audio y Vídeo con HTML5
16. Elemento audio
: El elemento audio
se utiliza para reproducir archivos de audio. Los atributos src
y controls
son esenciales:
html
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no admite la etiqueta de audio.
</audio>
17. Elemento video
: El elemento video
te permite incorporar vídeos en tu página web. Los atributos src
, controls
, width
, y height
son comunes:
html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no admite la etiqueta de vídeo.
</video>
Elementos Semánticos HTML5: Estructura y Significado
HTML5 introduce elementos semánticos que mejoran la estructura y la accesibilidad de tus páginas web. Estos elementos ayudan a los navegadores y a los motores de búsqueda a entender mejor el contenido:
18. Elemento section
: Divide el contenido de la página en secciones temáticas:
«`html
Sección de Productos
…Descripción de los productos…
«`
19. Elemento article
: Define un artículo independiente dentro de la página web, como una entrada de blog o una noticia:
«`html
Título del Artículo
…Contenido del artículo…
«`
20. Elemento header
: Define el encabezado de una sección o del documento completo:
«`html
Título de la Página
«`
21. Elemento hgroup
: Agrupa varios títulos <h1>
a <h6>
para un mayor control de la jerarquía de títulos:
«`html
Título Principal
Subtítulo
«`
22. Elemento aside
: Define contenido lateral que complementa el contenido principal de la página:
«`html
«`
23. Elemento nav
: Representa una sección de navegación en la página:
«`html
«`
24. Elemento footer
: Define la información al final del documento, como derechos de autor o información de contacto:
«`html
«`
25. Elemento small
: Define texto que se muestra en un tamaño de fuente más pequeño:
html
<small>Este texto será más pequeño.</small>
26. Elemento time
: Especifica la fecha y hora de un contenido:
html
<time datetime="2023-10-26T12:00:00">26 de octubre de 2023</time>
27. Elementos figure
y figcaption
: Define una figura (imagen) y su leyenda:
«`html

«`
28. Elemento video
: El elemento video
te permite incorporar vídeos en tu página web. Los atributos src
, controls
, width
, y height
son comunes:
html
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Tu navegador no admite la etiqueta de vídeo.
</video>
Almacenamiento Web con HTML5
29. Almacenamiento Web: HTML5 introduce almacenamiento local y almacenamiento de sesión para guardar datos en el navegador del usuario:
«`javascript
// Almacenamiento local
localStorage.setItem(‘nombre’, ‘Juan’);
let nombre = localStorage.getItem(‘nombre’);
// Almacenamiento de sesión
sessionStorage.setItem(‘color’, ‘rojo’);
let color = sessionStorage.getItem(‘color’);
«`
Enlaces mailto
para Enviar Correos Electrónicos
30. Enlaces mailto
: Estos enlaces te permiten enviar correos electrónicos directamente desde tu navegador:
html
<a href="mailto:info@tuempresa.com">Enviar un correo</a>
Consideraciones de Compatibilidad con HTML5
Recuerda que los navegadores más modernos son compatibles con HTML5. Sin embargo, es crucial validar tu código para detectar errores y garantizar que tu página web se muestre correctamente en todos los navegadores.
Conclusión: Convirtiéndote en un Maestro del HTML
Ahora tienes una base sólida para crear páginas web con HTML y HTML5. Puedes construir estructuras complejas, agregar estilos, incluir multimedia y utilizar las últimas funciones de HTML5. Recuerda que este artículo solo cubre una selección de ejemplos, pero te animamos a explorar la amplia gama de posibilidades que ofrece HTML. ¡Comienza a crear tus propios proyectos web y experimenta con el código HTML!