Partes importantes de un documento HTML
Capítulo 2: Estructura básica de un documento HTML
En este capítulo te voy a mostrar la estructura básica que tiene un documento html.
La estructura básica de un documento HTML se compone de cuatro partes principales: <!doctype>, <html>, <head>, <body>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Declaración del tipo de documento (doctype):
La etiqueta !doctype html, también conocida como "Declaración del tipo de documento", es una etiqueta imprescindible que se coloca al inicio de todo documento HTML. Su función principal es informar al navegador web sobre la versión específica de HTML que se está utilizando en la página. Esto permite al navegador interpretar el código correctamente y mostrar la página de manera consistente en diferentes dispositivos y navegadores.
Entonces, la colocaremos en cada página html. Al principio.
Verás en HTML antiguo que tiene un aspecto diferente. Si ves una etiqueta como esta, representa la versión de HTML5:
<!doctype html>Etiqueta <html>
La etiqueta <html> es la etiqueta raíz de un documento HTML. Es la primera etiqueta que se abre en un documento HTML y la última que se cierra. Define el documento como un documento HTML y contiene todos los demás elementos del documento, incluido el encabezado (<head>) y el cuerpo (<body>).
Función de la etiqueta <html>
- Identificar el tipo de documento: Informa al navegador que el documento es un documento HTML y que debe interpretarse de acuerdo con las reglas de HTML.
- Estructura básica: Proporciona una estructura básica para el documento, definiendo el encabezado (
<head>) y el cuerpo del contenido (<body>). - Contenedor raíz: Contiene todos los demás elementos del documento, organizándolos en una jerarquía anidada.
Lenguaje del documento html
Añadiendo un atributo a la etiqueta <html>, puedes especificar el idioma en el que estará hecha la página. Me refiero a si el contenido estará en español, inglés, etc.
Se trata del atributo lang:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>Etiqueta <head>
La etiqueta <head> contiene información de funcionamiento sobre la página. Gran parte de esta información no se muestra en el navegador al usuario.
En esta sección añadiremos cosas como el título, la codificación de caracteres, las hojas de estilo y los metadatos para los motores de búsqueda.
Etiqueta <body>
La etiqueta <body> contiene casi todo el contenido visible de la página que se muestra en el navegador, como texto, imágenes, enlaces y otros elementos HTML.
Página html de ejemplo
A continuación, te voy a dejar una página de ejemplo. Todavía muy básica, pero te servirá para que vayas observando un poco por encima el funcionamiento de HTML.
<!DOCTYPE html>
<html>
<head>
<title>Página web de ejemplo</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Título de ejemplo</h1>
<p>Párrafo de ejemplo.</p>
<img src="imagen.png" alt="Imagen de ejemplo">
<br>
<a href="https://www.example.com">Enlace de ejemplo</a>
</body>
</html>
En los próximos capítulos aprenderás a manejar todas estas etiquetas, y mucho más. No obstante, de momento te dejo una explicación básica de cada cosa:
<!DOCTYPE html>: Define el tipo de documento como HTML5.<html>: Inicia el documento HTML.<head>: Contiene metadatos del documento.<title>: Define el título de la página.<meta charset="UTF-8">: Especifica la codificación de caracteres UTF-8 para el documento.</head>: Cierra la sección de encabezado.<body>: Contiene el contenido visible de la página.<h1>: Define un encabezado de nivel 1.<p>: Define un párrafo de texto.<img>: Inserta una imagen en la página.<br>: Inserta un salto de línea.<a>: Define un enlace a otra página.
Comentarios
Si te quedan dudas sobre el temario, sobre HTML, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.
