La estructura general de las páginas web

La totalidad de una página web se inserta en el elemento <html>. Este elemento se considera la raíz de la página.

A continuación, tenemos dos partes de contenido: el encabezado y el cuerpo. El encabezado, con el elemento <head>, permite definir las propiedades globales de las páginas, aunque cada página pueda tener propiedades diferentes. El cuerpo de la página, el elemento <body>, contiene todo el contenido que se mostrará en la página. Estos dos elementos, <head> y <body>, son hermanos e hijos del elemento <html>.

Por lo tanto, podemos tener esta estructura mínima:

<!doctype html>  
<html>  
   <head>  
       ...  
   </head>  
   <body>  
       ...  
   </body>  
</html>

La declaración doctype

Como hemos mencionado en un capítulo anterior, el HTML es una aplicación SGML. De esta manera, es necesario que la primera línea de una página web contenga la indicación del lenguaje de etiquetas utilizado. Esta declaración está destinada al navegador. La sintaxis es muy sencilla:

<!doctype html>

Atención, observe que esta declaración del tipo de documento no es un elemento HTML.

El elemento <html>

El elemento <html> es el elemento raíz de las páginas HTML. La etiqueta de apertura, <html> se coloca inmediatamente después de la declaración de tipo de documento, y la etiqueta de fin, </html>, termina la página.

Entre los atributos globales, el uso del atributo lang no es obligatorio, pero sí muy aconsejable. Esto permite indicar al navegador cuál es el idioma utilizado en la página web. Este atributo se utiliza por los motores de búsqueda para la indexación y por los navegadores de síntesis vocal para las personas discapacitadas.

A continuación se muestra la sintaxis habitual:

<html lang="es">

El elemento <head>

1. Los elementos hijo del encabezado

El elemento <head> es realmente muy importante. Contiene toda una serie de propiedades esenciales para la página, ya que estas propiedades no se definen en ninguna otra parte del documento.

Estas propiedades se guardan con estos elementos hijos:

<meta>: permite guardar varios metadatos en el documento. Puede no tener ningún elemento, uno o varios.
<title>: es el único elemento obligatorio. Define el título del documento. Solo puede tener un único elemento de título por página.
<base>: este elemento permite indicar la URL de base para resolver las URL relativas del documento. Puede tener un único elemento de este tipo en cada documento.
<link>: establece los enlaces a las regiones exteriores a la página, como son los archivos de hojas de estilo CSS. Puede no tener ningún elemento, uno o varios.
<style>: permite declarar las reglas de estilo CSS incorporadas en la página. Puede no tener ningún elemento, uno o varios.
<script>: permite definir los scripts incorporados en la página. Puede no tener ningún elemento, uno o varios.

2. Los elementos <meta>

El elemento <meta> permite guardar varios metadatos. Algunos de estos metadatos son especialmente relevantes, como la codificación de los caracteres.

Es importante indicar la codificación de los caracteres...

El elemento <body>

El elemento <body> incluye todos los elementos de contenido de la página web. Su etiqueta de apertura, <body>, va justo después del cierre del encabezado </head>. Su etiqueta de cierre, </body>, se sitúa justo antes de la del documento, </html>. Por supuesto, en el mismo documento solo puede haber un elemento <body>.

Todos los elementos de tipo block poseen unas propiedades de visualización por defecto. Estas propiedades hace que el elemento se muestre con márgenes alrededor mediante la propiedad de CSS display. También hay otras propiedades que afectan al formato del texto y permiten ponerlo en negrita o cursiva. Por supuesto, puede modificar y personalizar estas propiedades en sus hojas de estilo.

El elemento <body> no es una excepción, al ser también de tipo block. Estos son los valores habituales de su propiedad display:

body {  
     display: block ;  
     margin: 8px ;  
}

Por lo tanto, tenemos un elemento con unos marcos de 8 píxeles alrededor de su bloque de visualización.

Ejemplo de una estructura sencilla

A continuación se muestra un ejemplo de una estructura simplificada, mínima y validada de una página web:

<!doctype html>  
<html lang="es">  
   <head>  
       <meta charset="UTF-8">  
       <title>El título de mi página</title>  
   </head>  
   <body>  
       <p>El contenido de mi página.</p>  
   </body>  
</html>

La estructura de las páginas