El lenguaje de marcado de hipertexto (HTML) es la base fundamental de cualquier página web. Para crear una página web correctamente estructurada, es importante comprender la estructura básica de un documento HTML. En este artículo, exploraremos los elementos principales que conforman la estructura de un documento HTML.
Son etiquetas principales de la estructura de un documento HTML
Elemento <html>
El elemento raíz de un documento HTML es <html>. Contiene todos los demás elementos del documento y establece el contexto principal del contenido.
Ejemplo:
htmlCopy code <html> <!-- Contenido del documento --> </html>
Elemento <head>
El elemento <head> se utiliza para incluir metadatos y enlaces a archivos externos, como hojas de estilo CSS y scripts JavaScript. No se muestra visualmente en la página, pero proporciona información importante sobre el documento.
Ejemplo:
htmlCopy code <head> <title>Título de la página</title> <link rel="stylesheet" href="estilos.css"> <script src="script.js"></script> </head>
Elemento <body>
El elemento <body> contiene todo el contenido visible de la página web, como texto, imágenes, enlaces, etc. Es dentro de este elemento donde se crea la estructura visual de la página.
Ejemplo:
htmlCopy code <body> <h1>Título de la página</h1> <p>Contenido de la página</p> <img src="imagen.jpg" alt="Descripción de la imagen"> </body>
Elemento <header>
El elemento <header> se utiliza para representar el encabezado de una página web. Contiene elementos como el logotipo, el título principal y la navegación.
Ejemplo:
htmlCopy code <header> <h1>Nombre del sitio web</h1> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Acerca de</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header>
Elemento <main>
El elemento <main> define el contenido principal de la página. Debe contener la información más relevante y distintiva de la página.
Ejemplo:
htmlCopy code <main> <h2>Contenido principal</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </main>
Elemento <footer>
El elemento <footer> se utiliza para representar el pie de página de una página web. Contiene información de derechos de autor, enlaces adicionales y otros elementos relevantes.
Ejemplo:
htmlCopy code <footer> <p>© 2023 Nombre del sitio web. Todos los derechos reservados.</p> <nav> <ul> <li><a href="#">Términos y condiciones</a></li> <li><a href="#">Política de privacidad</a></li> </ul> </nav> </footer>
Conclusiones
La estructura de un documento HTML es esencial para crear páginas web bien organizadas y estructuradas. Comprender los elementos principales, como <html>, <head>, <body>, <header>, <main> y <footer>, le permitirá crear páginas web con una estructura clara y coherente. Recuerde que la estructura adecuada es fundamental tanto para la usabilidad de los usuarios como para la optimización del SEO de su sitio web.