12.4. La estructura de un documento HTML

El documento HTML válido más pequeño posible sería algo similar a esto:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Página de ejemplo</title> </head> <body> <h1>Hola mundo</h1> </body> </html>

El documento empieza con un elemento de tipo de documento o doctype. Este elemento describe el tipo de HTML que se utiliza para que los agentes de usuario puedan determinar cómo se debe interpretar el documento y saber si sigue las normas que dice que seguirá.

Ved también

El doctype se describe con más detalle en el apartado 14 de este módulo.

A continuación, se puede ver la etiqueta de apertura del elemento html. Éste es un elemento que incluye a todo el documento. La etiqueta html de cierre es lo último que hay en cualquier documento HTML.

Dentro del elemento html está el elemento head. Éste es un elemento que contiene información sobre el documento (los metadatos). Este elemento se describe más detalladamente en el apartado siguiente. En la cabecera está el elemento title, que define el título "Página de ejemplo" de la barra del menú.

Después del elemento head está el elemento body, que es el elemento que incluye el contenido real de la página; en este caso sólo hay un elemento de encabezamiento de nivel uno (h1), que contiene el texto "Hola mundo". Y éste es todo nuestro documento.

Como se puede ver, a menudo los elementos contienen otros elementos. El cuerpo del documento incluirá inevitablemente muchos otros elementos. Las divisiones de página crean la estructura general del documento y contendrán subdivisiones. Éstas contendrán títulos, párrafos, listas, etc. Los párrafos pueden contener elementos que creen enlaces hacia otros documentos, citas, énfasis, etc. A medida que vayáis avanzando en esta serie, iréis sabiendo más cosas sobre estos elementos.

12.5. La sintaxis de los elementos HTML

Como ya hemos visto, un elemento básico en HTML consiste en dos marcadores al principio y al final de un bloque de texto. Hay algunos elementos que no rodean al texto y, en la mayoría de los casos, los elementos pueden contener subelementos (como html que contiene head y body en el ejemplo anterior).

Los elementos también pueden tener atributos, que pueden modificar el comportamiento del elemento e introducir un significado adicional.

<div id="masthead"> <h1>Conceptos básicos del <abbr title="lenguaje de marcado de hipertexto">HTML</abbr> </h1> </div>

En este ejemplo hay un elemento div (división de página, una manera de partir los documentos en bloques lógicos) con un atributo id añadido que tiene el valor de masthead. El elemento div contiene un elemento h1 (encabezamiento de primer nivel o más importante), que al mismo tiempo contiene texto. Parte de este texto está incluido en un elemento abbr (que se utiliza para especificar la expansión de las siglas), que tiene el atributo title, cuyo valor está definido como lenguaje de marcado de hipertexto (Hypertext Markup Language).

Muchos de los atributos de HTML son comunes para todos los elementos, aunque algunos son específicos de uno o varios elementos concretos. Éstos tienen siempre la forma palabraclave="valor". El valor debe aparecer siempre entre comillas simples o dobles (en algunas circunstancias se pueden omitir las comillas, pero no es una práctica recomendable con respecto a la predictibilidad, la comprensión y la claridad; se deben poner siempre los valores entre comillas).

La mayoría de los atributos y sus valores posibles están definidos por las especificaciones HTML; no es posible crear atributos propios sin invalidar el HTML, ya que ello puede confundir a los agentes de usuario y provocar problemas a la hora de interpretar correctamente la página web. Las únicas excepciones reales son los atributos id y class; sus valores están totalmente bajo vuestro control, ya que sirven para añadir significado y semántica propias a vuestros documentos.

Un elemento que se encuentra dentro de otro elemento se conoce como "hijo" de este elemento. Así pues, en el ejemplo anterior, abbr es hijo del elemento h1, que al mismo tiempo es hijo de div. Y al revés, el elemento div sería "padre" del elemento h1. Este concepto de padre/hijo es muy importante, ya que es la base de CSS y se utiliza mucho en JavaScript.

12.6. Elementos de bloque y en línea

En el HTML hay dos categorías generales de elementos que corresponden a dos tipos de contenidos y estructuras que representan estos elementos: elementos de bloque y elementos en línea.

Los elementos de bloque son elementos de nivel superior y normalmente definen la estructura del documento. Puede ser útil ver los elementos de bloque como aquellos que empiezan en una línea nueva y que representan una ruptura con lo anterior.

Algunos elementos de bloque comunes incluyen los párrafos, las listas, los títulos y las tablas.

Los elementos en línea son aquellos que se encuentran incluidos en los elementos estructurales de bloque y que incluyen sólo partes pequeñas del contenido del documento, y no párrafos enteros ni grupos de contenido.

Un elemento en línea no hará que aparezca una línea nueva en el documento; son los tipos de elementos que aparecen dentro de un párrafo de texto. Algunos elementos en línea comunes son los vínculos de hipertexto, las palabras o frases destacadas o las citas breves.

12.7. Referencias de carácter

Un último aspecto que hay que mencionar de un documento HTML es la manera de incluir caracteres especiales. En el HTML, los caracteres <, > i & son especiales. Estos caracteres inician y finalizan partes del documento HTML, y no representan los caracteres de "menor que", "mayor que" y "et".

Uno de los primeros errores que puede cometer un autor de webs es utilizar un carácter "et" en un documento y entonces ver que aparece algo inesperado. Por ejemplo, si se escribe la frase "Imperial units measure weight in stones&pounds" puede ser que en algunos navegadores se vea "...stones£s".

Esto sucede porque en HTML la cadena literal "£" éses en realidad una referencia de carácter. Una referencia de carácter es una manera de incluir en un documento un carácter que es difícil o imposible de escribir desde un teclado, o en una codificación de documento concreta.

El símbolo "et" (&) introduce la referencia, y el punto y coma (;) la acaba. No obstante, muchos agentes de usuario pueden ser muy condescendientes a la hora de perdonar errores en el HTML, como por ejemplo el de olvidar el punto y coma, e interpretarán "&pound" como una referencia de carácter. Las referencias pueden ser números (referencias numéricas) o palabras abreviadas (referencias de entidades).

Un símbolo "et" se debe introducir en un documento como "&", que es la referencia de entidad de carácter, o como "&" que es la referencia numérica. En la web del W3C encontraréis una tabla completa de las referencias de caracteres.

Next up

Previous

Unidad 3 - Elementos de una página web

Description