Un documento HTML tiene una estructura definida que incluye elementos esenciales para que el navegador pueda interpretar y mostrar el contenido correctamente. Aquí está la estructura básica:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
<!-- Vinculación de hojas de estilo CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Encabezado principal -->
<header>
<h1>Bienvenidos a mi sitio web</h1>
</header>
<!-- Sección principal de contenido -->
<main>
<section>
<h2>Introducción</h2>
<p>Este es un párrafo de ejemplo en la sección de introducción.</p>
</section>
<section>
<h2>Contenido principal</h2>
<p>Este es un párrafo de ejemplo en la sección de contenido principal.</p>
</section>
</main>
<!-- Pie de página -->
<footer>
<p>© 2024 Mi Sitio Web</p>
</footer>
<!-- Vinculación de archivos JavaScript -->
<script src="script.js"></script>
</body>
</html>
Descripción de cada sección:
<!DOCTYPE html>: Define el tipo de documento y la versión de HTML (HTML5 en este caso).<html lang="es">: Elemento raíz que envuelve todo el contenido del documento. El atributolang="es"especifica el idioma del contenido.<head>: Contiene metadatos y enlaces a recursos externos.<meta charset="UTF-8">: Define la codificación de caracteres del documento como UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configura la ventana gráfica para mejorar la visualización en dispositivos móviles.<title>: Define el título de la página que aparece en la pestaña del navegador.<link rel="stylesheet" href="styles.css">: Enlaza una hoja de estilo externa para definir la apariencia del documento.
<body>: Contiene el contenido visible del documento.<header>: Sección de encabezado que generalmente contiene títulos y logotipos.<main>: Sección principal que contiene el contenido más importante.<section>: Secciones individuales dentro del contenido principal.<h2>: Subtítulos dentro de las secciones.<p>: Párrafos de texto.
<footer>: Sección de pie de página que contiene información adicional como derechos de autor.
<script src="script.js"></script>: Enlaza un archivo JavaScript externo para añadir interactividad y funcionalidad dinámica.
Esta estructura básica asegura que el documento HTML esté bien formado y sea fácil de mantener y ampliar.