1. Introducción al documento HTML
Vamos a entender cómo están hechos los documentos HTML. ¿Con qué empieza cualquier
documento HTML? Cada documento HTML tiene una estructura que consiste en tres
etiquetas anidadas: html, head y body.
Este es el estándar, un ejemplo:
<!DOCTYPE html>
<html>
<head>
Etiquetas de servicio
</head>
<body>
Documento principal
</body>
</html>
Todo lo que muestra el navegador está dentro de la etiqueta
body (cuerpo del documento). Dentro de la etiqueta
head se encuentran etiquetas con información
de servicio/auxiliar
para el navegador.
También, al comienzo del documento, es común (pero no obligatorio) escribir el tipo de documento — DOCTYPE, para que el navegador entienda mejor cómo interpretar errores. Muchos navegadores son capaces de mostrar correctamente documentos con diseño roto.
2. Ejemplo de un documento HTML
El documento HTML es la base de cualquier página web. Le dice al navegador cómo debe verse la página. Aquí tienes un ejemplo simple de un documento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Nombre de la página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
Partes principales del documento HTML
Esta línea se llama declaración de tipo de documento (doctype). Le dice al navegador que el documento está escrito en HTML5, la última versión del lenguaje HTML. Esto es importante para la visualización correcta de la página.
<html>
La etiqueta <html> abre el documento HTML. Todo el contenido
de la página web debe estar dentro de esta etiqueta. Marca el inicio y
el final del documento HTML.
<head>
La etiqueta <head> contiene información de servicio sobre
la página. Esta información no se muestra directamente en la página web, pero
es importante para navegadores y motores de búsqueda.
La etiqueta <title> define el título de la página, que
se muestra en la pestaña del navegador. Es lo primero que ve el usuario al
abrir la página.
<body>
La etiqueta <body> contiene todo el contenido visible de la página web: texto, imágenes, enlaces, tablas, etc. Todo lo que ve el usuario en la pantalla está dentro de esta etiqueta.
<h1>¡Hola, mundo!</h1>
La etiqueta <h1> representa un encabezado de nivel 1. Se utiliza para los encabezados más importantes en la página. El texto dentro de esta etiqueta se muestra en una fuente grande y en negrita.
<p>Esta es mi primera página web</p>
La etiqueta <p> define un párrafo de texto. Se usa para dividir
texto en bloques lógicos. El texto dentro de esta etiqueta se muestra como
un párrafo común.
GO TO FULL VERSION