El código de una página HTML sigue un esquema jerárquico, en el que cada sección tiene una función específica. Una estructura básica se ve así:
<!DOCTYPE html>
<html>
<head>
<title>Mi Página Web</title>
</head>
<body>
<header>
<h1>Bienvenido a Mi Página</h1>
</header>
<main>
<p>Este es el contenido principal.</p>
</main>
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
</body>
</html>Explicación de las Secciones Principales
1. <head>: La Información para el Navegador
El <head> contiene metadatos, que no se muestran directamente en la página pero son
esenciales para el navegador y los motores de búsqueda.
Incluye:
- Título de la página: Lo que aparece en la pestaña del navegador.
- Hojas de estilo y scripts: Archivos externos de diseño (CSS) o interactividad (JavaScript).
- Metadatos: Información como la codificación del texto o descripciones para SEO.
Ejemplo:
<head> <title>Mi Página Web</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilos.css">
</head>
2. <body>: El Contenido Visible
El <body> contiene todo lo que los usuarios ven e interactúan en la página, como:
- Texto, encabezados, imágenes, videos y enlaces.
- Botones, formularios y cualquier elemento interactivo.
Ejemplo:
<body> <h1>Bienvenido</h1>
<p>Este es el contenido principal de mi página.</p>
</body>
3. <footer>: El Pie de Página
El <footer> es una sección especial que se ubica al final del documento. Contiene:
- Información adicional como derechos de autor o enlaces legales.
- Enlaces a redes sociales, contacto o créditos.
Ejemplo:
<footer> <p>© 2024 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>
Relación Entre las Secciones
El <head> prepara la página para el navegador, el <body> muestra el contenido principal
y el <footer> cierra con información adicional. Juntas, forman un documento HTML completo
y funcional.
Conclusión
Con una estructura básica y el uso de <head>, <body> y <footer>, puedes empezar a construir
páginas web bien organizadas. Este es solo el primer paso para adentrarte en el desarrollo
web. ¡Manos a la obra!
No hay comentarios:
Publicar un comentario