Estructura de un Documento HTML
La estructura básica de un documento HTML (HyperText Markup Language) se compone de una serie de etiquetas anidadas que definen el tipo de documento, los metadatos y el contenido visible.
<html>
<head>
<meta charset=»UTF-8″>
<title>Título de la Página</title>
</head>
<body>
<h1>Encabezado Principal</h1>
<p>Este es un párrafo de texto.</p>
</body>
</html>
1. Declaración del Tipo de Documento
La primera línea es la declaración de tipo de documento:
<!DOCTYPE html>: Define que el documento es un documento HTML5. Es crucial para que el navegador sepa cómo interpretar el código.
2. Elemento Raíz
El elemento raíz que envuelve todo el contenido de la página:
<html>: Es el elemento contenedor de todos los demás elementos HTML.- Suele incluir un atributo
lang(por ejemplo,lang="es") para especificar el idioma principal del contenido, lo cual es útil para motores de búsqueda y herramientas de accesibilidad.
- Suele incluir un atributo
3. La Cabecera del Documento (<head>)
Contiene metadatos (información sobre el documento) que no son visibles directamente en la página.
<head>: Contenedor para metainformación.<meta charset="UTF-8">: Especifica la codificación de caracteres (casi siempre UTF-8 para soporte de la mayoría de los caracteres).<meta name="viewport" content="width=device-width, initial-scale=1.0">: Esencial para el diseño responsivo, controla la vista de la página en dispositivos móviles.<title>Título de la Página</title>: Define el título que aparece en la pestaña del navegador o en los resultados de búsqueda.- Otras etiquetas comunes aquí son
<link>para enlazar hojas de estilo CSS, o<script>para código JavaScript.
4. El Cuerpo del Documento (<body>)
Contiene todo el contenido visible que el usuario verá en el navegador.
<body>: Contenedor de todo el contenido de la página web (texto, imágenes, enlaces, videos, etc.).<h1>a<h6>: Etiquetas de encabezado para estructurar el contenido (siendo<h1>el más importante).<p>: Etiquetas de párrafo.- Otros elementos de contenido (como
<div>,<span>,<img>,<a>,<ul>, etc.) se colocan dentro del<body>.